javascript - 形状上的单击事件在kineticjs中不起作用

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 中。

请注意，此包装上下文是 Canvas 上下文的子集，并且不具有所有 Canvas 上下文方法。例如，合成不可用。

这是使用 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>