使用svg.draw.js时多边形中的重复点

Question

When I create a polygon using draw() it inserts some points 2 times. Eg When I create a polygon with 4 points

<polygon id="SvgjsPolygon1063" points="179,177 179,177 397,147 323,381 323,381 88,350 88,350" class="labelbox shape"></polygon>

If I delete repeated points manually from the element I see there is no difference in the shape. But if I move or reshape the polygon it again inserts 7 points.

• In case of 3 points (triangle) polygon, total points are 5.
• In case of 4 points polygon, total points are 7.
• In case of 5 points polygon, total points are 8.

It'll be helpful if you can explain the logic so I can persist unique points and restore them properly.

Simplified Code from main application ;

var createPolygon = function(){//TODO: bug: creating duplicate points
    var poly =  myCanvas.nested().polygon().addClass('labelpolygon shape').draw();
    poly.resize();
    poly.parent().draggable();

    poly.on('drawstart', function(e){
        document.addEventListener('keydown', function(e){
            if(e.keyCode == 13){
                poly.draw('done');
                poly.off('drawstart');
            }
        });
    });

    return poly;
}
myCanvas.on('mousedown', function(event){

    if(!alreadyDrawing){
        var currentTool = createPolygon(event,myCanvas);

        currentTool.on('drawstart', function(){
            alreadyDrawing = true;
        });
        currentTool.on('resizedone', function(){
            //update data
        });
        currentTool.draw(event);
        selectedElement = currentTool;
    }
});

myCanvas.on('mouseup', function(event){
    selectedElement.draw(event);
});

function attachEvents(currentTool){
    currentTool.parent().on('click',function(e) {
        currentTool.selectize({ rotationPoint: false});
        e.stopPropagation();
    });
}

Answer 1

draw has a standard behavior when you call it without an event. It automatically binds to the click event in that case. When you then start to call draw with an event, too. It will mess up the logic and produces the result you are getting.

To solve this issue, decide for one option. If you want more control, pass the event. If you are fine with the click behavior, just call draw without any parameters