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

Question

使用 React-Konva，我创建了一个包含可拖动图像的可缩放画布/舞台。点也可以绘制在画布的图层上。

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

有人知道我该怎么做吗？

我的代码演示在这里：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