代码之家  ›  专栏  ›  技术社区  ›  Amit Kumar Gupta

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

  •  0
  • Amit Kumar Gupta  · 技术社区  · 8 年前

    当我使用 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();
        });
    }
    
    1 回复  |  直到 8 年前
        1
  •  0
  •   Fuzzyma    8 年前

    draw 在没有事件的情况下调用时具有标准行为。它自动绑定到 click 在那种情况下。当你开始打电话 还有一个活动。它会扰乱逻辑并产生你得到的结果。

    要解决这个问题,请选择一个选项。 如果需要更多控制,请传递事件。如果你对点击行为很满意,只要打电话给 没有任何参数