React-Konva：放置点后防止可拖动图像恢复位置

Question

使用 React-Konva，我创建了一个包含可拖动图像的可缩放 canvas/stage。也可以在 canvas.

中的图层上绘制点

目的是能够拖动图像（并放大到舞台上），然后在图像上的特定点绘制点。问题是，如果我拖动图像，然后绘制一个点，图像将快速回到拖动前的位置。我希望图像保持在我将其拖动到的位置。

有人知道我该怎么做吗？

我的代码演示在这里：https://codesandbox.io/s/8lm5p56y6l

Answer 1

在您的 render() 函数中，您有以下代码：

<Image
  draggable
  x={0}
  y={0}
  image={this.state.image}
  ref={node => {
    this.imageNode = node;
  }}
  rotation={this.state.angle}
/>

react-konva 始终按照您在 render 函数中描述的方式更新形状道具。因此它会在您更新组件后立即将图像的位置更新回 {0,0}。

为了防止它，您可以跳过 x 和 y 并且不要定义它们（因为它们只是零）。

或者您可以将 dragend 上的图像位置保存到组件的状态中：

handleImageDragEnd = (e) => {
  this.setState({
    imageX: e.target.x(),
    imageY: e.target.y(),
  });
}

// later in render:

<Image
  draggable
  x={this.state.imageX}
  y={this.state.imageY}
  image={this.state.image}
  ref={node => {
    this.imageNode = node;
  }}
  rotation={this.state.angle}
  onDragEnd={this.handleImageDragEnd}
/>

演示：https://codesandbox.io/s/2olo66jmqr

React-Konva：放置点后防止可拖动图像恢复位置

React-Konva: Prevent draggable image reverting position after placing point

canvas

reactjs

konvajs