3

免责声明：可能认为这篇文章是这篇文章的副本，但我已经特别证明了我的需要。

我在我的KonvaJS应用程序中有一个案例，我需要将单击事件从 Rectangle 形状（即Upper Layer的子对象）传播到添加到Lower Layer的几个图像。

请注意，我在较低层中有超过 50 个图像和形状之间的对象，那么我现在如何知道 Lower Layer 中的目标对象是什么。

请举一个例子来证明我的需要：

 var width = window.innerWidth;
 var height = window.innerHeight;

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

 var lowerLayer = new Konva.Layer();
 var upperLayer = new Konva.Layer();

 //lion
 var lionImage = new Image();
 lionImage.onload = function() {

   var lion = new Konva.Image({
     x: 50,
     y: 50,
     image: lionImage,
     width: 106,
     height: 118
   });

   // add the shape to the layer
   lowerLayer.add(lion);
   stage.draw();

   lion.on("click", function() {
     alert("you clicked the lion");
   });

 };
 lionImage.src = 'http://konvajs.github.io/assets/lion.png';

 //monkey
 var monkeyImage = new Image();
 monkeyImage.onload = function() {

   var monkey = new Konva.Image({
     x: 200,
     y: 50,
     image: monkeyImage,
     width: 106,
     height: 118
   });

   // add the shape to the layer
   lowerLayer.add(monkey);
   stage.draw();

   monkey.on("click", function() {
     alert("you clicked the monkey");
   });
 };
 monkeyImage.src = 'http://konvajs.github.io/assets/monkey.png';

 var upperTransparentBox = new Konva.Rect({
   x: 0,
   y: 0,
   height: stage.height(),
   width: stage.width(),
   fill: 'transparent',
   draggable: false,
   name: 'upperTransparentBox'
 });
 upperTransparentBox.on("click", function() {
   alert("you clicked the upper Transparent Box");
 });
 upperLayer.add(upperTransparentBox);

 // add the layer to the stage
 stage.add(lowerLayer);
 stage.add(upperLayer);
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script>
  <meta charset="utf-8">
  <title>Konva Image Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
</body>

</html>

4

1 回答 1

4

从技术上讲，可以click在任何节点上手动触发事件。但我认为这是一种反模式。您可以使用“getIntersection()”函数找到一个交集，然后对节点执行所需的操作。

 var width = window.innerWidth;
 var height = window.innerHeight;

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

 var lowerLayer = new Konva.Layer();
 var upperLayer = new Konva.Layer();

 //lion
 var lionImage = new Image();
 lionImage.onload = function() {

   var lion = new Konva.Image({
     x: 50,
     y: 50,
     name: 'lion',
     image: lionImage,
     width: 106,
     height: 118
   });

   // add the shape to the layer
   lowerLayer.add(lion);
   stage.draw();

   lion.on("click", function() {
     alert("you clicked the lion");
   });

 };
 lionImage.src = 'http://konvajs.github.io/assets/lion.png';

 //monkey
 var monkeyImage = new Image();
 monkeyImage.onload = function() {

   var monkey = new Konva.Image({
     x: 200,
     y: 50,
     name: 'monkey',
     image: monkeyImage,
     width: 106,
     height: 118
   });

   // add the shape to the layer
   lowerLayer.add(monkey);
   stage.draw();

   monkey.on("click", function() {
     alert("you clicked the monkey");
   });
 };
 monkeyImage.src = 'http://konvajs.github.io/assets/monkey.png';

 var upperTransparentBox = new Konva.Rect({
   x: 0,
   y: 0,
   height: stage.height(),
   width: stage.width(),
   fill: 'transparent',
   draggable: false,
   name: 'upperTransparentBox'
 });
 upperTransparentBox.on("click", function() {
   var target = lowerLayer.getIntersection(stage.getPointerPosition());
   if (target) {
      alert('clicked on ' + target.name());
   }
 });
 upperLayer.add(upperTransparentBox);

 // add the layer to the stage
 stage.add(lowerLayer);
 stage.add(upperLayer);
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script>
  <meta charset="utf-8">
  <title>Konva Image Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
</body>

</html>

于 2016-07-15T01:26:33.863 回答