如何解决使用 react-kova 移动多边形 - 更新位置 1.将 x 和 y 重置为原始 {0, 0} 值2.将一行的位置保存到状态中3.制作不同的节点结构,将一条线和锚点放在一个可拖动组内
我使用嵌入在 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
我感谢每一个帮助。提前致谢!
解决方法
在拖动操作时,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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。