I'm using the konvajs library to draw multiple images to a canvas. The images are transparent on certain points.
Now I want to attach a click handler to the images, but the click handler shouldn't be fired if the image is transparent on that point / promote the click handler to the udnerlying image.
However currently the image on top get's all the click handlers. Is there a way to ignore click events on transparent parts of an image?
After looking throw the konvajs doku, I found this image sample: http://konvajs.github.io/docs/events/Image_Events.html
Hovering the lion does exactly what I want!
Related
I currently have an html page that produces a line graph inside a canvas element. I have also implemented a feature so that when you click on a point in the graph, a table below the canvas displays the information for that graph point, and clears if you click somewhere that isn't a graph point on the canvas. However, there is currently no indicator for what graph point you have selected.
I would like to make it so that the dot you click on either gets bigger, or highlighted, or something. Unfortunately, I don't think there's any way to do that on the one canvas without needing to redraw the entire graph afterwards. If I drew a bigger dot on top of the original, I would then need to erase it and replace it with the smaller one, as well as redrawing the segment of the line graph that was covered by the larger dot.
I was looking into using a second canvas on top of the first with identical dimensions, using a z-index to control which was on top. However, I don't know how this would affect the click event. If two canvasses are on top of each other, is it possible for the click event to register the lower canvas? Does it only register the higher one? I guess I could just change the click event to be for whichever canvas is on top, but keep all the code for drawing on the canvas the same.
Any advice for how to solve this problem?
Solved a few of my own questions.
Firstly, the click event will only recognize whichever canvas is on top. However, I did like I said, and changed my click event to be for the top canvas, while leaving all instructions on the inside to be for the top canvas. Thank goodness I didn't use the 'this' keyword, or the change would have been much more annoying.
To make the graph points highlight, I first added a second canvas on top of my first one, placing them on top of each other by making their positions "absolute" and giving them a z-index of 0 and 1 respectively. Then, inside the if statement where the original click event recognized that a point had been clicked on, I told the top canvas to draw a larger dot on the same coordinates as the first dot (which I had saved in an array). First, I had it clear the top canvas though, so any other highlighted dots would no longer be highlighted. If the canvas was clicked on somewhere other than a dot, nothing was highlighted.
I am trying to create a Flash Application similar to www.faceinhole.com.
So far I was able to load my photo through Browse functionality.
Display it inside a movie clip.
Mask this movie clip with an oval shape.
Add the transform controls (senocular) to resize and move the image.
The problem:
Whenever I click on the visible part of the Masked Movie Clip, I can successfully drag my photo around. However when I click on the hidden part of the Masked Movie Clip, I cannot drag my photo around.
Question: Is there a way to add mouseEnabled=false to the hidden area of a mask?
Place a invisible (alpha=0) Sprite on top of everything on the stage or visible section, including the picture and mask and have that drag around. Add a callback to it that updates the picture's position underneath the mask based on the drag values. You'll need to reset the invisible sprite so you can keep dragging the picture and also put limits to how far it can be dragged.
Is it possible to create some stack of transparent HTML5 canvases with event propagation?
For instance, I have a background canvas with drawn image on it with some attached click handler. After, I want to add another one canvas over the background canvas with exactly same size, also it has transparent zones. The question is, will the click handler of background canvas be fired if I click on it over the top layer?
will the click handler of background canvas be fired if I click on it over the top layer?
No it will not. The canvas blocks events from things behind it.
Generally you have two options: Put events on each canvas and make a system of letting them "fall through" if nothing happens on the first canvas, or putting events only on the topmost canvas and using those one events to do operations concerning all canvases.
I suggest the second approach. Keep all the events on only the topmost canvas.
I am playing around with HTML5 Canvas to develop an interactive personal website.
I created a canvas 400x200 and then put a background image on it. Now on top of the BG Image, I have placed 5 more images. Now, my requirement is, depending on the image clicked I want to 1, display a text outside of the canvas, and 2, grey out the other 4 images (more in an animated form).
I am able to accomplish till displaying the images, I am unable to create a click event action. Is it because the whole canvas is treated as one single image? if so would using #usemap work? I tried adding a addEventListener event but nothing is happening.
is there a easier way in SVG to accomplish the same?
Thanks for any pointers.
You can add click handler on the canvas using jquery like this
$("#canvasId").click(function(e){
alert("canvas clicked";
}
Now you will have to determine the image at which the click event was occurred. If you know the top-left and bottomRight corner of the image you can determine the image on which you had clicked. To determine the mouse location you can use something like following
var x = Math.floor((e.pageX-$("#canvasId").offset().left) / 20);
var y = Math.floor((e.pageY-$("#canvasId").offset().top) / 20);
I have a function that displays an image on top of a movie clip but when you click another image, it of course replaces the current image. I don't know how to stop it from replacing the image, that way I can make an image appear and drag it over somewhere on the stage and then make a different image appear and drag that somewhere else, too. and what is the drag event for Actionscript 3.0.
Sprite or MovieClip startDrag() and stopDrag() methods.
also i don't understand the following:
function that displays an image on top of a movie clip but when you click another image, it of course replaces the current image
how do images get inside of your swf (library, embed, loader)?
why are they replacing each other on MouseEvent.CLICK?
according to my current vision of your problem Event.stopImmediatePropagation() or Event.stopPropagation() in MouseEvent.CLICK handler function may help