Triggering mouseover event with multi-layers about jcanvas HOT 3 CLOSED

@a-samy Hmm, I bet this has to do with some special logic in jCanvas to defer redrawing of successive layers until an image layer has loaded. Try moving the image layer to the end (that is, make it the last layer) and let me know if that resolves the issue.

from jcanvas.

When I made image the last layer, the event works fine with the shape and just triggered once with the image, and in my case I have multi-layers of images and I need to have actions on each image, is there any other way to do so with jCanvas?

from jcanvas.

@a-samy My apologies for the late response.

I tried your code in the jCanvas Sandbox and can't actually reproduce the issue, strangely.

$(function() {
	$('canvas').addLayer({
		type: 'image',
		name: 'fish',
		source: $('#fish')[0],
		x: 150,
		y: 150,
		width: 78,
		height: 100,
		mouseover: function(layer) {
			alert('fish');
		}
	}).addLayer({
		type: 'rectangle',
		name: 'fishSpot',
		fillStyle: '#c33',
		x: 150,
		y: 300,
		width: 90,
		height: 120,
		mouseover: function(layer) {
			alert('rectangle');
		}
	}).drawLayers();
})

But assuming this is definitely a problem for you, your alternative approach is to use a mousemove handler instead (which should behave much more consistently, since that uses the native DOM event under the hood). The only catch is that you'll need to add extra logic to make it behave like a mousemove event, which shouldn't actually be very difficult (and I'll try to outline an approach for you):

1. Create a variable or property that's accessible to all layer mousemove handlers; this variable will be used to keep track of which layer you're currently mousing over. For the purpose of this proof-of-concept, I will call this variable mousedoverLayer
2. Add a layer behind all others layers, whose size is the width and height of the canvas (e.g. x: 0, y: 0, width: $canvas.width(), height: $canvas.height(), fromCenter: false). This layer will be used to detect when you mouse off of a layer
3. Within each mouseover, handler, make sure you have the current layer parameter defined; e.g. mouseover: function(layer) { ... }
4. Wrap the body of each mouseover handler with an if statement like the following: if (mousedoverLayer !== layer) { mousedoverLayer = layer; ... }; this is the check that makes your mousemove behave like a mouseover

I think that's all you'd need. Let me know your thoughts.

from jcanvas.