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

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

1 个答案: