Javascript 在KineticJS中单击向多边形添加新点

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

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

检测到单击后，如何将新的顶点/点添加到单击位置的多边形？我猜想，如果将新点添加到多边形的

点

数组的末尾，多边形可能会重叠，因为它以逆时针方式绘制多边形

jsiddle尝试：

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

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

第二部分借用自：

接下来是重新绘制多边形的第三部分。抽象地说，您总是可以清除这些多边形，然后简单地重新绘制整个多边形。首先确定单击在多边形点阵列中的新位置。您可以通过在每个点上循环来确定最近的两个点，并将其插入其中来近似该点。

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

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

第二部分借用自：

---

接下来是重新绘制多边形的第三部分。抽象地说，您总是可以清除这些多边形，然后简单地重新绘制整个多边形。首先确定单击在多边形点阵列中的新位置。您可以通过在每个点上循环来确定最近的两个点并在它们之间注入来近似它。

感谢Scott，我尝试了一个没有填充的多边形（通过不指定填充），并按照建议使用了

单击

事件，但它仍然记录了对笔划和笔划内区域的单击。如何在原始多边形内创建多边形，使其仅可单击原始多边形的边界？我通过更多帮助和以前回答的问题编辑了我的答案。这有帮助吗？感谢Scott，我尝试了一个没有填充的多边形（通过不指定填充），并按照建议使用了

单击

事件，但它仍然记录了对笔划和笔划内区域的单击。如何在原始多边形内创建多边形，使其仅可单击原始多边形的边界？我通过更多帮助和以前回答的问题编辑了我的答案。那有用吗？