CODEWITHSUNDEEP
javascriptkineticjs
Richard Deurwaarder
Richard Deurwaarder

Reputation: 2040

How do I 'forward' (mouse) events to a node/shape on a lower Zindex in kineticjs

I'm working with kineticjs where I have a stage with one layer in it. This layer has multiple shapes on it who react on a mouseover event (they show a tooltip) besides these shapes I also have some text nodes on a higher ZIndex (so they are above the shapes).

This all works fine with one exception, when a text is on top of a shape, the shape doesn't show a tooltip I assume it's because the textnode uses the event, rather than 'forward' it, eventhough I haven't bound anything to the text node.

How can I propagate events to nodes on a lower ZIndex?

Upvotes: 2

Views: 309

Answers (1)

PAEz
PAEz

Reputation: 8542

Personally I'd create a separate layer to put anything you dont want to register mouse events on and when you create the layer set its listening property to false.
You could also set the this property for the individual elements.
Here's an example using layers... 

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
});

var normalLayer = new Kinetic.Layer();
var textLayer = new Kinetic.Layer({listening :false});

var rect = new Kinetic.Rect({
    x: 20,
    y: 20,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4
});

rect.on('click', function(evt) {
    this.setFill('blue');
    normalLayer.draw();
});

normalLayer.add(rect);

var simpleText = new Kinetic.Text({
        x: 40,
        y: 40,
        text: 'Simple Text',
        fontSize: 30,
        fontFamily: 'Calibri',
        textFill: 'yellow'
      });

textLayer.add(simpleText);

stage.add(normalLayer);
stage.add(textLayer);

http://jsfiddle.net/MT435/
Remember the listening property can be set for individual elements aswell.

Upvotes: 2

Related Questions