クリックでKonvaの形状がうまくいきません

私はKonvaでカスタム形状を定義しようとしていますが、矩形を描く次のコードを試してみましたが、クリックを記録しますがクリック検出は機能しません。どうして？クリックでKonvaの形状がうまくいきません

私は

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script> 
    <meta charset="utf-8"> 
    <title>Konva Custom Shape Demo</title> 
    <style> 
    body { 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: #F0F0F0; 
    } 
    </style> 
</head> 
<body> 
    <div id="container"></div> 
    <script> 
    var stage = new Konva.Stage({ 
     container: 'container', 
     width: 300, 
     height: 300 
    }); 
    var layer = new Konva.Layer(); 
    var rect = new Konva.Shape({ 
     sceneFunc: function(ctx) { 
      ctx.beginPath(); 
      ctx.lineWidth = 2; 
      ctx.fillStyle = "white"; 
      ctx.strokeStyle = "black"; 
      ctx.rect(10, 10, 100, 100); 
      ctx.fill(); 
      ctx.stroke(); 
      ctx.closePath(); 
    }}); 

    rect.on("click", function() { 
     console.log("click"); 
    }); 
    layer.add(rect); 
    stage.add(layer); 
    </script> 
</body> 
</html>

出典

2017-08-11 cdarwin

私は1.6.7バージョンがあることを読んだと思う - 私はこの中で回転したカスタムシェイプのイベント検出に多くの改良が行われていると信じて、そして多分これは、非まで延長 - 回転も。 –

間違っているところ私は、コードがうまく見えたので、私はこのライブラリについては考えているが、私は興味があったと言っているかわかりません。

通常の形状のコードを試して、イベントハンドラが機能していることを確認した後、Konvaのイベントシステムがカスタムシェイプのクリックを検出したことは間違いありませんでした。そのメソッド呼び出しを追加した後

// Konva specific method 
context.fillStrokeShape(this);

：

（働いている）the official tutorial on custom shapesをチェックし、イベントリスナーを追加することが唯一の違いは、あなたのコードは、このメソッドの呼び出しを欠いていたことだったことを明らかにし、私はサイドの比較によって側を作る作らイベントハンドラが正しく動作します。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>Konva Custom Shape Demo</title> 
 
    <style> 
 
    body { 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #F0F0F0; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div id="container"></div> 
 
    <script> 
 
    var stage = new Konva.Stage({ 
 
     container: 'container', 
 
     width: 300, 
 
     height: 300 
 
    }); 
 
    var layer = new Konva.Layer(); 
 
    var rect = new Konva.Shape({ 
 
     sceneFunc: function(ctx) { 
 
      ctx.beginPath(); 
 
      ctx.lineWidth = 2; 
 
      ctx.fillStyle = "white"; 
 
      ctx.strokeStyle = "black"; 
 
      ctx.rect(10, 10, 100, 100); 
 
      ctx.fill(); 
 
      ctx.stroke(); 
 
      ctx.closePath(); 
 
      ctx.fillStrokeShape(this); 
 
    }}); 
 

 
    rect.on("click", function() { 
 
     console.log("click"); 
 
    }); 
 
    layer.add(rect); 
 
    stage.add(layer); 
 
    </script> 
 
</body> 
 
</html>

出典

2017-08-11 21:45:38 yuriy636

ありがとうございます。しかし、なぜ私はその電話をしなければならないのか分かりません。このチュートリアルでは、自分がやっていたストロークと塗りつぶしを行うだけでコールが必要であると言います。 – cdarwin

クリックでKonvaの形状がうまくいきません

答えて

関連する問題