形狀上的Click事件在dynamicjs中不起作用

Question

我想在形狀上單擊事件時打印消息，它根本不會觸發，可拖動也無法工作，我該如何工作？有人可以幫忙嗎？

JS代碼

 $(function(){
    var stage = new Kinetic.Stage({
        container: 'toolbar',
        width: $("#gamebox").width(),
        height: window.innerHeight * 0.9,
        listening: true
   });
  var layer = new Kinetic.Layer();
  stage.add(layer);
  var line = new Kinetic.Shape({
            drawFunc: function (canvas) {
             console.log("shape");
            var context = canvas.getContext();
            context.beginPath();
            context.moveTo(20,5);
            context.quadraticCurveTo(10, 35, 20, 60);
            context.moveTo(20,5);
            context.quadraticCurveTo(30, 35, 20, 60);
            canvas.stroke(this);
            context.fillStyle = 'black';
            context.fill();
        },
         strokeWidth: 2,
        draggable: true
    });

    line.on('click', function() {
        alert("click detected");
    });
    layer.add(line);
    stage.add(layer);
 });

HTML代碼

<div id="toolbar">        
</div>
<div id="gamebox">
</div>

Answer 1

在KineticJS的最新版本（我認為是5.0+）中，將包裝的上下文輸入到drawFunc中。

請注意，此包裝的上下文是畫布上下文的子集，並不具有所有畫布上下文方法。 例如，合成不可用。

這是一個使用KineticJS 5.1.0的代碼的工作示例：

 var stage = new Kinetic.Stage({ container: 'container', width: 350, height: 350 }); var layer = new Kinetic.Layer(); stage.add(layer); var line=new Kinetic.Shape({ x:0, y:0, stroke:"blue", fill: 'red', drawFunc: function(context) { context.beginPath(); context.moveTo(20,5); context.quadraticCurveTo(10, 35, 20, 60); context.moveTo(20,5); context.quadraticCurveTo(30, 35, 20, 60); context.fillStrokeShape(this); } }); layer.add(line); line.on('click', function() { alert("click detected"); }); layer.draw(); 

 body{padding:20px;} #container{ border:solid 1px #ccc; margin-top: 10px; width:350px; height:350px; } 

 <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script> <h4>Click the shape.</h4> <div id="container"></div>