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

Question

当我使用 draw() 创建多边形时，它会插入一些点 2 次。例如，当我创建一个有 4 个点的多边形时

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

如果我从元素中手动删除重复的点，我发现形状没有区别。但是，如果我移动或重塑多边形，它会再次插入 7 个点。

如果是 3 点（三角形）多边形，则总点数为 5。
如果是 4 点多边形，则总点数为 7。
如果是 5 点多边形，则总点数为 8。

如果你能解释一下逻辑，这将很有帮助，这样我就可以保留独特的点并正确地恢复它们。

来自 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 在没有事件的情况下调用它时具有标准行为。在这种情况下，它会自动绑定到 click 事件。然后，当您也开始通过事件调用 draw 时。它会打乱逻辑并产生你得到的结果。

要解决此问题，请选择一个选项。如果您想要更多控制权，请传递该事件。如果您对点击行为没问题，只需调用 draw 而不带任何参数

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

Repeated points in polygon when using svg.draw.js

javascript

polygon

svg.js