Kinetic JS - Detecting Click on Border of Shape

Question

I've got an interesting task. I need to detect a click on the border of a shape in Kinetic JS. In this case the shape is a polygon but bonus points if it works with any shape.

My first idea would be to draw lines around the border of the shape, perhaps with an opacity of 1, and then using their click events on pick up the click. It's a bit of PT though so I thought I'd run it past here and see if there were any other ideas.

Thanks for the help!

Answer 1

You can do it by combining two shapes together and put them in one group. The first shape will have a border and the second one with no border.

        var first_poly = new Kinetic.Polygon({
            points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93],
            fill: '#00D2FF',
            stroke: 'black',
            strokeWidth: 5
        });
        var second_poly = new Kinetic.Polygon({
            points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93],
            fill: '#00D2FF',
            stroke: 'black',
            strokeWidth: 0
        });

        first_poly.on("click",function(){
            alert("border clicked");
        })
        // add the shape to the layer
        layer.add(first_poly);
        layer.add(second_poly);
        stage.add(layer);