React-Konva: предотвращение возврата изображения перетаскиваемым изображением после размещения точки - PullRequest
Новая
       6

React-Konva: предотвращение возврата изображения перетаскиваемым изображением после размещения точки

0 голосов
/ 26 сентября 2018

Используя React-Konva, я создал масштабируемый холст / сцену, которая содержит перетаскиваемое изображение.Точки также можно наносить на слой на холсте.

Цель состоит в том, чтобы иметь возможность перетаскивать изображение (и увеличивать изображение на сцене), а затем наносить точки в определенных точках на изображении.Проблема в том, что если я перетаскиваю изображение, а затем рисую точку, изображение вернется в положение перед перетаскиванием.Я хочу, чтобы изображение оставалось в том положении, в которое я его перетащил.

Кто-нибудь знает, как я могу это сделать?

Демонстрация моего кода приведена здесь: https://codesandbox.io/s/8lm5p56y6l

1 Ответ

0 голосов
/ 26 сентября 2018

В вашей функции 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

...