javascript - 在 KineticJS 中单击时向多边形添加一个新点

Question

我在舞台上有一个多边形（正方形）。当用户单击多边形的任何边时，将在该点创建一个新顶点，边数增加 1。

问题：如何检测对多边形边缘/笔划的点击？

检测到点击后，如何在点击的位置向多边形添加一个新的顶点/点？我猜如果将新点添加到多边形points数组的末尾，多边形可能会重叠，因为它以逆时针方式绘制多边形。

jsfiddle 尝试：http: //jsfiddle.net/frpn7/

Answer 1

切换到“单击”以捕获对多边形的单击：

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

不幸的是，这也会在多边形内部引发点击事件，因此如果您只想让边框可点击，则需要创建 2 个多边形（1 个用于内部，1 个用于边框），否则您可能会尝试不填充多边形。

编辑如何做到这一点：

您可以通过将两个形状组合在一起并将它们放在一组中来做到这一点。第一个形状有边框，第二个没有边框。

        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);

第二部分借自：Kinetic JS - Detecting Click on Border of Shape

接下来是重新绘制多边形的第三部分。抽象地说，您总是可以清除这些多边形并简单地重新绘制整个多边形。首先确定单击在多边形点数组中的新位置。您可以通过遍历每个点来确定最近的 2 个点并将其注入它们之间来近似它。