I have using https://konvajs.org/docs/sandbox/Free_Drawing.html this first example,but also added image in stage.
But when I erase drawn line, image also removed.
How can I fixe that
The demo is using globalCompositeOperation = destination-out to implement erase function. globalCompositeOperation affects all drawings in a canvas.
To solve the issue you can use another Konva.Layer at the bottom with your image.
Each Konva.Layer has its own canvas element. So it will be not affected by shapes with globalCompositeOperation = destination-out in another layer.
Related
I am attempting to create a view for Android whose background appears to blur the view's content for which it is on top. This is nothing new and has been done before. I based my implementation on what was done here: Dimezis/BlurView.
The approach uses the pre-draw event from the view tree observed to draw a view to an internal canvas. The canvas is backed by a bitmap. A blur is applied to the bitmap before it is drawn to the canvas passed to BlurView's draw method. This approach works well for all standard views/controls and is a common method used to achieve the blur view effect.
However, it does not handle Skia-based drawings that may be on the view that is blurred.
Skia, via SKCanvasView, is used heavily for controls within the App so this is kind of a deal breaker if I cannot find a solution. The issue is very odd. Anything that is drawn on the canvas view appears to be scaled and translated when drawn to the internal canvas.
Screen-Shot - blur label v. blur SKCanvasView
The screen-shot show the difference in results from blurring a label with text v. blurring a red circle drawn on an SKCanvasView.
For reference, I've posted a sample project on GitHub. It can be found here: jaredballen/BlurView
I'd really appreciate any input that can be shared.
When you invoke _rootView?.Draw(_internalCanvas); the circle SKCanvasView is internally rendering itsself using _internalCanvas size (same as _blurView size) resulting in demonstrated behavour. My guess this could be solved by making _internalCanvas of the same size as the _rootView, rendering root view as blurred, then clipping and translating the result inside the smaller _blurView.
there is a task to spread some raster cubes (PNG, with transparent background) along
the canvas based on Paper.JS platform.
I did it, however, there is a bug – canvas is bigger than browser window and when you are scrolling it to the right, animated cubes go glitchy, see attached screenshot. It seems that
the renderer doesn't clear previous frames. The same bug occurs in all browsers.
Is anyone knows how to overcome it? When I am trying to resize window and call onResize, everything becomes good unless I am not trying to scroll it again.
artefact image
Try using symbols instead of recreating the same rasters over and over:
In you 'building cubes' setup:
sprites[s] = new Symbol(new Raster(urls[s]));
and in hive():
var tmpRaster = sprites[selector].place();
Also, I believe paper.js tries to not animate off-screen elements to save on processing time. Instead of having the canvas be larger than the viewport, you may be better off using view.scrollBy(point)
i need some help in my webGL code.
I created a TextGeometry and i included it in a mesh, i didn't have any problem about that. However, i would like updating this text without creating another TextGeometry.
Indeed, my main goal is to translate a text (from right to left) and to make it disappear when he reaches to the left side, but only character by character (like a fade effect).
I tried some attempts : for example, according to text position, deleting it with a :
scene.remove(text)
and creating another text which is the same as previously minus the first character. I don't know if i was clear... But this solution makes my application very slow : that's why i don't want creating an Object every time, but just updating his text property.
I didn't find many help in three.js documentation, may you give me a hand about that ?
Cheers
You could try this:
Create a PlaneGeometry and texture it using the image from a hidden canvas object that contains your text, then apply image transforms to the canvas itself (fading as necessary) and continually update the texture in Three.js as it moves across the scene.
For an example of how to use a canvas object as an image (of text), I have an example posted at: http://stemkoski.github.com/Three.js/Texture-From-Canvas.html
i have a scrollview which contains a pdfpage rendered with CATiledLayer, i want to draw stuff onto the pdf page so i created a overlay layer, i need the graphic to look vectorized so i decided to use CATiledlayer for the overlay layer. Only problem is that it is very slow to draw (I'm using beizerpath to draw), then i tried to optimize it by creating the overlay layer with the visible height and width when zooming in and out, so i don't need to create the overlay for the whole content bound. But still no luck , i want to try CALayer but the draw path just becomes blurry and pixelated, so i'm not sure how i can improve on this. I also tried drawinrect but for some reason it doesn't seem to work.
I suggest not using bezierpath to draw annotations since it requires you to redraw the whole path every time the pen moves. It would be better if you draw only the current line segment using CGContextAddQuadCurveToPoint.
At touchMoved, get the current point and 2 prev points
Using those points, get the area where the line should be drawn
draw at that area in drawRect using setNeedsDisplayAtRect
inside drawRect, go to the end of your path and add your new line using CGContextAddQuadCurveToPoint
First of all I will explain my situation so you can know my problem a little better. I'm making a HTML5 app. I have a canvas, and using a color picker you can change the color of the canvas. Now i have a picture which I want to put on the canvas but that pictures color needs to be changed using a color picker. So i need to replace, lets say, black color on that picture and put it on the canvas so it dosnt screw up the background.
So that will look like this:
1st color picker- changes the color of the canvas
2nd color picker - replaces the black color on the image with the one in the color picker and puts it on the canvas
Now my problem is how to replace the color on the image without reloading the page.
My only condition is no using silverlight, flash, java or any other similar tehnology that need 3rd party software to be installed on the device.
Thanks in advance.
If you dont understand my query fully, feel free to ask.
My approach with a JS only solution could be:
Loading the image inside a canvas element. Look at the MDC canvas tutorial
Trigger the user click on the canvas and get the pixel color (see links below to know how to get the color of a pixel) and look at this answer to get the mouse position
Substitute all the colors in the canvas with the one the user pick. For some examples about pixel manipulation:
Pushing pixel with canvas at Mozilla Hacks
http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/
This JS at mezzoblue apply heavy filter to an image
After some canvas experiment I notice that mostly in all the browser the pixel manipulation with canvas could be very slow also with small images. So another experiment to do could be to get the pixel color and then:
pass the color information to a PHP (or another server side script) with an AJAX call
do the color manipulation with an image library like GD or imagemagik
return back your image with the Ajax response
reload your canvas with the modified version of the image