Question

Using KineticJS, a click event on a stoke of the shape(in my case arc) doesn’t fire at all.

my code is there 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);

How can I make this work well?

Thank you in advance.

Answer 1

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

you were missing one little line:

 canvas.fillStroke(this);

This makes your custom shape function:

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