Question

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

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

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

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

Answer 1

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

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

不幸的是，这也会在多边形内部抛出click事件，因此如果你想让边框可以点击，你需要创建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个点并将它们注入它们之间。

在KineticJS中单击时，将新点添加到多边形

1 个答案: