pointer-events in Kineticjs

问题

In Kinetik, if I have this:

A layer with objects with events
Above, I have another layer with overlapping objects

How I can keep layer 1 events?

(Something like pointer-events property in CSS?)

Thanks : ) !

For example:

In layer 1:`

 var bolinche = new Kinetic.Circle({
   x: this.coordBolincheX,
   y: this.coordBolincheY,
   ......
   bolinche.on('mouseup', function() {                                                                          
   var getId = this.getId();
                                  obDibujaFiguras.creaTrazados(getId);
   });

In layer 2, another shape in the same place.

Then, the event bolinche.on not work.

回答1:

Yes you can click-through a top layer to the bottom layer similar to pointer-events:none

You just tell your top layer not to listen to events…like this:

myTopLayer.setListening(false);

Now all mouse events will bubble down to the bottom layer.

Here’s code and a Fiddle: http://jsfiddle.net/m1erickson/WyW44/

<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
    <p>Green is on top layer</p>
    <p>Blue is on bottom layer</p>
    <p>You can click through the green rect to the blue rect</p>
    <p>Works because green layer has "listening=false"</p>
    <div id="container"></div>

    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.4.0-beta.js"></script>

    <script>

      var stage = new Kinetic.Stage({
        container: 'container',
        width: 400,
        height: 200
      });
      var layerUnder = new Kinetic.Layer();
      stage.add(layerUnder);
      var layerOver = new Kinetic.Layer();
      stage.add(layerOver);

      var box1 = new Kinetic.Rect({
        x: 75,
        y: 30,
        width: 100,
        height:100,
        fill: "blue",
        stroke: 'black',
        strokeWidth: 6,
        draggable: true
      });      
      layerUnder.add(box1);
      layerUnder.draw();

      var box2 = new Kinetic.Rect({
        x: 100,
        y: 50,
        width: 100,
        height:100,
        fill: "green",
        stroke: 'black',
        strokeWidth: 6
      });      
      layerOver.add(box2);
      layerOver.draw();

      // turn off mouse event listening for the top layer
      // now you can click/drag the bottom layer even if the top rect obstructs
      layerOver.setListening(false);

      // listen for clicks on the bottom layer box
      box1.on('click', function(evt){ alert("You clicked the bottom blue rectangle!"); });


    </script>
  </body>
</html>

来源：https://stackoverflow.com/questions/15707529/pointer-events-in-kineticjs

标签

kineticjs