kineticjs - 形状（弧）笔划上的单击事件不起作用

Question

使用 KineticJS，形状描边（在我的情况下为弧形）上的单击事件根本不会触发。

我的代码在那里 http://jsfiddle.net/mPsfm/

js

var stage = new Kinetic.Stage({
    container: 'container',
    width: 200,
    height: 200
});
var layer = new Kinetic.Layer();

var arc = new Kinetic.Shape({
        drawFunc: function(canvas) {

            var ctx = canvas.getContext();
            ctx.beginPath();
            ctx.lineWidth = 10;
            var startAngle = 0;
            var endAngle = 135 * Math.PI / 180;
            ctx.arc(50, 50, 40, startAngle, endAngle, false);
            ctx.stroke();
        }
});

arc.on('click', function() {
    alert("click detected");
 });

layer.add(arc);
stage.add(layer);

我怎样才能使这项工作顺利进行？

先感谢您。

Answer 1

http://jsfiddle.net/mPsfm/3/

你错过了一小行：

 canvas.fillStroke(this);

这使您的自定义形状功能：

 var arc = new Kinetic.Shape({
    drawFunc: function(canvas) {

        var ctx = canvas.getContext();
        ctx.beginPath();
        ctx.lineWidth = 10;
        var startAngle = 0;
        var endAngle = 135 * Math.PI / 180;
        ctx.arc(50, 50, 40, startAngle, endAngle, false);
        ctx.stroke();
        canvas.fillStroke(this);
    }
 });

Answer 2

感谢 EliteOctagon。

最终代码在这里！

var stage = new Kinetic.Stage({
    container: 'container',
    width: 200,
    height: 200
});
var layer = new Kinetic.Layer();

var arc = new Kinetic.Shape({
        drawFunc: function(canvas) {
            var ctx = canvas.getContext();
            ctx.beginPath();
            ctx.lineWidth = 10;
            var startAngle = 0;
            var endAngle = 135 * Math.PI / 180;
            ctx.arc(50, 50, 40, startAngle, endAngle, false);
            ctx.stroke();
            canvas.fillStroke(this);
        },
    drawHitFunc: function(canvas) {
            var ctx = canvas.getContext();
            ctx.beginPath();
            ctx.lineWidth = 10;
            var startAngle = 0;
            var endAngle = 135 * Math.PI / 180;
            ctx.arc(50, 50, 40+ctx.lineWidth, startAngle, endAngle, false);
            ctx.lineTo(50*Math.cos(endAngle)+40,50*Math.sin(endAngle)+40);
            ctx.lineTo(50*Math.cos(endAngle/2)+40,50*Math.sin(endAngle/2)+40);
            ctx.lineTo(50*Math.cos(startAngle)+40,50*Math.sin(startAngle)+40);
            ctx.stroke();
            canvas.fillStroke(this);
        }
});

arc.on('click', function() {
    alert("click detected");
});


layer.add(arc);
stage.add(layer);