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

【问题标题】：How to propagate a click event from a shape in the Upper layer to an image in the Lower Layer using KonvaJS?如何使用 KonvaJS 将单击事件从上层中的形状传播到下层中的图像？
【发布时间】：2016-07-14 09:07:03
【问题描述】：

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

我的KonvaJS 应用程序中有一个案例，我需要将点击事件从矩形形状（即上层的子级）传播到添加到下层。

请注意，我在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>

【问题讨论】：

标签： javascript canvas kineticjs konvajs

【解决方案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>

【讨论】：