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

Question

我想在形状上的点击事件 made.It 根本没有触发并且可拖动也没有触发时打印消息 work.How 我可以完成这项工作吗？有人可以帮忙吗？

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>

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

Click Event on a Shape doesn't work in kineticjs

javascript

canvas

kineticjs