Question

使用KineticJS，形状（在我的情况下是弧形）的一个上方的点击事件根本不会发射。

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);

单击形状描边上的事件（弧）不起作用

2 个答案: