Question

I have a polygon (square) on the Stage. When a user clicks on any edge of the polygon, a new vertex will be created at that point, increasing the number of edges by 1.

Problem: How can you detect a click on the edge/stroke of the Polygon?

After detecting the click, how do you add a new vertex/point to the Polygon at the place it was clicked? I am guessing that if the new point is added to the end of the polygon’s points array, the polygon may overlap because it draws the polygon in a anti-clockwise manner.

jsfiddle attempt: http://jsfiddle.net/frpn7/

Answer 1

Switch to “click” to capture the click on the polygon:

poly.on('click', function(e) {

Unfortunately this will also throw the click event on the inside of the polygon so you will need to create 2 polygons (1 for the inside and one for the border) if you want to have just the border be clickable, otherwise you might try not filling the polygon.

Edit with how to do that:

You can do that 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);

Second part borrowed from: Kinetic JS – Detecting Click on Border of Shape

The third part of re-drawing the polygon will come next. Speaking abstractly, you can always clear these polygons and simply re-draw the entire polygon again. First determine the click’s new position in the polygon point array. You can approximate it by looping over each point to determine the 2 closest points and injecting it in between them.