Question

免责声明：可能会认为这篇文章与this post重复，但我已经明确证明了我的需求。

我的KonvaJS应用程序中有一个案例，我需要将一个Click事件从Rectangle形状（上层的子项）传播到多个添加的图像到下层。

请注意，我在下层中有超过50个图像和形状之间的对象，所以我现在怎样才能在下层中找到目标对象。

请在此举例说明我的需要：

＆＃13;

 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);

＆＃13;

<!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>

＆＃13;

Answer 1

从技术上讲，可以在任何节点上手动触发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>

如何使用KonvaJS将单击事件从上层中的形状传播到下层中的图像？

1 个答案: