Geek Answers Handbook

Making the object "transparent" to mouse events?

I am working on a project with an HTML5 canvas and KineticJS. A translucent overlay (KineticJS group or layer) is placed throughout the scene. The problem is that mouse events associated with KineticJS objects under this overlay are not processed.

How can I make this overlay (or any other object) "transparent" to mouse events?

NOTE. The question is only about Canvas, there are no other HTML elements that interfere with it. (To clarify what was suggested below.)

+6
source share
3 answers

Assuming you mean that HTML elements are placed on top of your canvas, try looking at pointer events : pointer events in MDN

eg.

#foo { pointer-events:none; }
+7
source

Yes, you can click the upper nodes into the lower nodes, similar to event pointers: none

You just say that your main object is not listening for events ... for example:

 myTopObject.setListening(false);

Now all mouse events will go down to the bottom object.

See this SO answer for code and Fiddle: event pointers in Kineticjs

+1
source

Adjusting opacity at the layer level also sets the opacity at the object level.

 layer.setOpacity(0.1);

"Mouse events associated with KineticJS objects under this overlay are not processed."

Hmm, mouse events bound to an object are handled, although the overlay (layer) has an opacity of 0. This seems to work fine, I don't know what you are in.

"How can I make this overlay (or any other object)" transparent "to mouse events?" For me, mouseover / mouseout works perfectly at the layer level to make it half transparent.

  layer.on('mouseover', function() { this.setOpacity(0.5); this.draw(); }); layer.on('mouseout', function() { this.setOpacity(1); this.draw(); });

Are you missing layer.draw() ?

+1
source

More articles:


All Articles