1

在 Kinetik 中，如果我有这个：

  1. 具有事件对象的层

  2. 上面，我有另一层重叠的对象

如何保留第 1 层事件？

（类似于 CSS 中的指针事件属性？）

谢谢 ： ） ！

例如：

在第 1 层：`

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

`

在第 2 层，同一位置的另一个形状。

然后，事件bolinche.on 不起作用。

4

1 回答 1

2

是的，您可以单击顶层到底层，类似于 pointer-events:none

你只是告诉你的顶层不要听事件......像这样：

myTopLayer.setListening(false);

现在所有鼠标事件都会冒泡到底层。

这是代码和小提琴：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>
于 2013-03-30T04:59:36.017 回答