I'm trying to create a coloring book using EaselJS similar to this example:
https://github.com/CreateJS/EaselJS/blob/master/examples/CurveTo.html
However, I have discontinuous shapes I want users to color, and I want to hide paint strokes outside the shapes while allowing them to initiate a stroke outside of the shape. If they do start drawing outside the allowed space, I still want the part of the path within boundaries to be displayed.
to see what i mean click here
My first idea is to use a full canvas and cover the parts not colorable with an svg filled with the background color, but that would involve having to pass a click event on the svg to the same pixel on the canvas it's covering.
Is there a better approach?
Related
I wonder if anyone could assist me with this?
I am writing a webpage with a drawing area ("GraphicsArea", below) that loads a map as a SVG image into the innerHTML of the "DiagramArea" div contained in it. The SVG has defined areas which have events attached to them and css styling that allows me to highlight areas as I mouseover them, and fill them with a highlight colour when I click on them. This all works fine.
I have, superimposed over the "DiagramArea", a HTML5 canvas element ("CanvasArea"). I have some javascript that allows me to draw inside this freehand with the mouse. The canvas is transparent, and I can see the map underneath it when I draw.
I can toggle between the drawing canvas layer and the "DiagramArea" with the SVG which I am using as an imagemap, by setting zIndex. I have a button that does this, allowing me to swap between functionality to highlight areas of the map, and the freehand drawing functionality.
My problem is that if I toggle away from the canvas, its drawing is hidden while I use the image map functionality. I can toggle it back again to display the drawing overlay after I have highlighted the areas I want to highlight, but it's a bit clumsy
Is there a way to keep the canvas contents visible while I'm using the rollover and click events attached to the SVG? I'm not particularly fussy as to whether it's a style or code solution. I'd prefer to avoid having to use an external library, if possible.
<div id="GraphicsArea">
<canvas id='CanvasArea'></canvas>
<div id="DiagramArea"></div>
</div>
Many thanks.
I'm making a svg drawing app. I have a tool that allows the user to select all the shapes in a rectangular area.
I need a way to detect the svg shapes under the rectangle.
I tried to use "document.elementFromPoint" and "getIntersectionList" on my root svg element. I use a path svg object with the fillColor set to none to display a line. getIntersectionList selects the path if the area is over the invisible region, so it isn't working. "document.elementFromPoint" doesn't work if I scroll.
The only way I can think of is to generate a click event on all the pixels inside the area, and listen to that event.
How can I do that? thank you
edit:
Here's an illustration. The white square is the selection area. Items under it must be highlighted in red. The square follows the mouse. If I move the mouse away from the lines, they must turn back white
If you want to have a click events on the svg elements, I would strongly suggest checking ngx-svg library. It provides various svg elements and events on each of them. The usage is also pretty simple -
<svg-container id="test-container>
<svg-circle radius="2" (clickEvent)="doSomething($event)"></svg-circle>
</svg-container>
The events are available on all elements. Also you can customize different stuff using the library. For more information, check the documentation of the library.
I saw a very interesting canvas technique on the site http://capitolcouture.pn/ when clicking on Issue 1. This flower/circle Effect.
I'm quite familiar with the canvas element drawing diagrams and so on, but I'm not able to examine how the transparent circle is created and put over the second canvas with text.
EDIT
Because of the tip, that people don't follow links from stackoverflow beginners I try to explain the effect.
You have 2 canvas elements.
One is lying on top of the other.
The canvas lying below the first one contains some text.
If one hovers over the top canvas, a certain radius around the mousepointer gets transparent cleared on the second canvas.
On this mouse hover, the first canvas spawns graphics corresponding to the second ones text letters.
Any suggestions?
So I have a circle that is being drawn on a canvas, it changes size according to a setting. However, if the setting is set too high, the circle is bigger than it's reserved area, and overlaps other things in the canvas.
I'm currently erasing the area surrounding the box after it is drawn, but it causes difficulties. I basically have to draw everything around it twice because I need the circle to be drawn last. This makes it more difficult to implement click actions in said surrounding area, because the click is registered twice.
TL;RD: How could I mask out part of a circle before I draw it on the canvas?
For this you can use the clip() function.
context.rect(50,50,200,200);//the area in which the circle is to be drawn
context.save();//saved context so it can be restored later
context.clip();
//now draw your circle
context.restore(); //remove the clip
Only the area inside the given rectangle is drawn.
Here is a good tutorial on the subject.
I am trying to get the mouse over function working in my pure Javascript (no jQuery, HTML or CSS). At the moment I have created just a small circle and when I mouse over it I want it to change colors.
instance.threadContext is just the part of the canvas where the circle is being drawn.
Any help would be much appreciated.
What you need to understand is that when you draw something onto a canvas, it does not become a ui element, but is actually a part of the overall image of the canvas. The reason you can't invoke a mouse-over event on the circle is because the circle isn't a thing that can receive events, it's just a drawing of a circle on an element which itself can receive events.
One way that you can get around this is to measure the mouse position on move and redraw the circle in an over state when the position is within the area for which you want the event to be triggered.