I'm trying to draw rectangles with the mouse using the Raphael 2+ library (note: the answer to this question won't work with Raphael 2).
With rectangles (Paper.rect), the mousedown/mouseup events only trigger when the cursor is on the edge of the rectangle and not within it. Is there a way to attach these events so they trigger when the mouse cursor is within the rectangle?
Ultimately, I'm trying to draw marquees/frames with the mouse. Ideally, I'd like to attach mouse listeners to the paper, but this is no longer possible, so I'm creating a 'surface' rect on the paper and drawing my elements within it. Is this approach whack? Any ideas most welcome.
I've played around, and it seems that you have to fill your shape in order to have your events fired. See here : http://jsfiddle.net/bathz/KrpKs/
That just makes sens to me, It enables you to sharply define the perimeter of what you listen to. I guess you could fill the shape with a transparent color, but I'll leave it to you.
Related
I'm using konvajs to draw and use canvas with shapes inside where each have a click listener.
I have a scenario where I need to rotate the entire canvas. Issue is that when I do rotate the canvas container, the event listener for the shapes is kept in the original position.
Surprisingly I don't see the same behavior for when I translate the canvas - I would expect to see the same behavior as the shapes change position.
Have a reproducible example here: https://codesandbox.io/s/broken-wave-r4f7i7
Konva doesn't support transforming of container with CSS. It can't calculate pointer position correctly in that case.
If you need to rotate/scale canvas, please use Konva methods.
stage.rotation(90);
I have a shape that has hoverIn() and hoverOut() function and it can be dragged at the same time. My problem is when I drag too fast (not like really really fast), the mouse pointer may go outside of the shape boundary before the shape is actually moved. This cause hoverOut to be fired and it messes up with my dragging function. When I drag slow, this doesn't happened since the shape displacement is small and the mouse is always inside.
How can I handle the fact that if I'm dragging I don't want to deal with hoverOut. I tried the unHoverfunction(), it partially worked but now after dragging and leaving the shape the hoverOut function is not fired as it should be.
I've just created a flag, it seems like no built-in solution exist. Thanks for your time.
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.
I have a chessboard like UI, wherein when I drag across check squares I need to EaselJS to detect my shapes(different squares) .I have hooked up those shapes with onMouseMove event handler. However I see that which ever shape gets clicked on mouse down that same shapes keeps emitting the onmousemove event even though I have moved outside the surface area of that shape and onto another shape. How can I have events that listen when I move out of the shape and into another shape using drag/touch or mouse drag?
The mousemove events come from the shape you clicked on, so the target will always be that initial clicked shape.
To determine what is currently under the mouse, use the getObjectUnderPoint or getObjectsUnderPoint APIs.
http://www.createjs.com/Docs/EaselJS/classes/Container.html#method_getObjectsUnderPoint
I am having problems detecting mouseover events on SVG path elements. It seems that the smaller the strokeWidth for the path element, the less success I have in detecting the mouseover.
Also, I am using jquery-svg plugin to do the drawing.
Below is a fiddle of trying to detect using a jquery mouseover event on the path element.
Mouseover Fiddle
Below is a fiddle of trying to detect by attaching a mousemove listener to svg, then using document.getElementFromPoint.
getElementFromPoint Fiddle
Neither of these seem to work reliably, especially if the mouse is moving fast. Is it possible to make either of these more sensitivity to better detect the mouseover? Or perhaps a better way of doing this?
The way browsers work, you don't get mouseover events continuously, but you get one each time the operating system updates the cursor position. And if the mouse is moving fast, you will get a events a few pixels apart. The mouse doesn't slide over the document, it jumps. Here's a jsfiddle showing where each event occurs. There's nothing that you can do to get mouseover events for all the elements between two consecutive positions of the cursor.
You could do something different: remember the previous location of the mousemove event, compute the line between that point and the current mouse position, and compute all the intersections between this line and all the other shapes in the document. But that is going to be resource-intensive, since there's no API available for that, you'll have to compute intersections yourself. There is a library that can help you.