使用 react-kova 移动多边形 - 更新位置

Question

我使用嵌入 React 的 Konva。我尝试移动使用完成的线创建的多边形。角点是可拖动的。该方法应该很简单。您使用点坐标并添加相对位置。我的问题是角点按预期移动。多边形本身的移动速度是原来的两倍。我怀疑框架的位置已经在内部计算，我在上面添加了移动的距离。如果我不这样做，角点就会留下来，这也是不希望的。

负责职位的句柄在这里：

 
  handleDragMoveLine = event => {

    let i;
    const points = this.state.points;
    const init_points = this.state.init_points;
    for(i = 0; i < points.length; i++) {
      let point = points[i];
      let init_point = init_points[i];
      point[0] = parseFloat(init_point[0]) + parseFloat(event.target.x());
      point[1] = parseFloat(init_point[1]) + parseFloat(event.target.y());
      points[i] = point;
    }
    // console.log("points", points);
    this.setState({
      points: points,
      flat_points: points.concat(this.state.isFinished ? [] : this.state.curMousePos).reduce((a, b) => a.concat(b), [])
    });

  };

我修改的完整例子在这里： https://codesandbox.io/s/fast-star-igu4v

感谢您的帮助。提前致谢！

Answer 1

在拖动操作时，Konva 正在更改 x 和 y 坐标。

当您应用 x 并将 y 更改为 points 属性时，您将获得双重效果。因为（1）x和y是变化，（2）点也变了。

有很多不同的方法可以解决这个问题。

1。将 x 和 y 重置为原始 {0, 0} 值

event.position({ x: 0, y: 0})

https://codesandbox.io/s/peaceful-chebyshev-0n2vw?file=/src/App.js

2。将一行的位置存入状态

因此，您在您的州中不仅会拥有 points，还会拥有 x 和 y 职位。这样你就可以根据那个位置调整锚点的位置。

3。制作一个不同的节点结构，所以一条线和一个锚点被放置在一个可拖动的组中

<Group draggable>
  <Line/>
  <Anchors/>
</Group>