使用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>