3

免責事項: この投稿はこの投稿の複製と見なされる場合がありますが、具体的に必要性を示しました。

私のKonvaJSアプリケーションでは、クリック イベントを Rectangle シェイプ ( Upper Layerの子) からLower Layerに追加された複数の画像に伝達する必要があります。

下位レイヤーには、画像と形状の間に 50 を超えるオブジェクトがあることに注意してください。そのため、下位レイヤーのターゲット オブジェクトをどうすればよいでしょうか。

親切にここに私の必要性を示す例があります:

 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 に答える