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

【问题标题】：Click Event on a Shape doesn't work in kineticjs形状上的单击事件在 kineticjs 中不起作用
【发布时间】：2015-01-17 14:51:57
【问题描述】：

我想在对形状进行点击事件时打印消息。它根本不会触发，并且可拖动也不起作用。我怎样才能使它工作？有人可以帮忙吗？

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>

【问题讨论】：

标签： javascript canvas kineticjs

【解决方案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>

【讨论】：