在KineticJS中点击添加一个新点到多边形

Add a new Point to a Polygon on Click in KineticJS

本文关键字：一个 新点 多边形 KineticJS 添加      更新时间：2023-09-26

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

问题:如何检测多边形边缘/笔画上的点击?

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

<<p> jsfiddle尝试/strong>: http://jsfiddle.net/frpn7/

切换到"click"来捕捉多边形上的点击:

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

不幸的是，这也会在多边形的内部抛出点击事件，所以你需要创建2个多边形(一个用于内部，一个用于边框)，如果你只想让边框可点击，否则你可能会尝试不填充多边形。

编辑方法:

你可以把两个形状组合在一起，并把它们放在一个组里。第一个形状将有边框，第二个形状将没有边框。

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

第二部分借鉴自:动态JS -检测点击形状的边界

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

相关文章：