Moving a Polygon with react-kova - update the position

Question

I use Konva embedded in React. I try to move a polygon created using a finished Line. The corner points are draggable. The approach supposed to be simple. You use the points coordinates and add the relative position. My problem is that the corner points are moved how expected. The polygon itself moves twice as fast. I suspect that the position of the framework is already calculated internally and I add the moved distance on top. If I dont do that, the corner points stay behind, what is undesired too.

The handle responsible for the position is here:

 
  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), [])
    });

  };

The complete example I modified is here: https://codesandbox.io/s/fast-star-igu4v

I appreciate every help. Thanks in advance!

score 0 · Accepted Answer · answered Jun 01 '21 at 18:01

0

On dragging action, Konva is changing x and y coordinates.

As you apply x and y changes into points attribute, you have that double effect. Because (1) x and y are changes and (2) points are changed too.

There are a lot of different ways to solve the issue.

1. Reset `x` and `y` back to original `{0, 0}` value

event.position({ x: 0, y: 0})

https://codesandbox.io/s/peaceful-chebyshev-0n2vw?file=/src/App.js

2. Save position of a line into the state

So you will have not just points but also x and y position in your state. That way you can adjust position of anchor points by that position.

3. Make a different nodes structure, so a line an anchors are placed inside one draggable group

<Group draggable>
  <Line/>
  <Anchors/>
</Group>

answered Jun 01 '21 at 18:01

lavrton

18,973
4
30
63

thank you for the answer. Using the first option, the line(polygon) jump sometimes to its initial position. I tried the first two options. Using the first option, the polygon is very jumpy while moving. It seems to ghost to its initial position(or the last position of the drop action). In Firefox it seems to be less jumpy as in Chromium based browsers(Chrome and Edge). Is there any cure? – KLE Jun 02 '21 at 14:19
For the second option… I don’t know which X and Y position to store and adjust in the state. The very same you describe in the first option? I know only those described in the documentation: [link](https://konvajs.org/api/Konva.Line.html). I tried some, but the behavior was completely messed up. – KLE Jun 02 '21 at 14:19
I tried the third option briefly in wrapping my components inside a Group element what didn’t worked at the first try. Since I have the listeners, I would need to restructure the example more deeply, I didn’t stressed it to the end. To remove the listeners and equip my Line and Anchor elements with similar attributes like in the example here [link](https://konvajs.org/docs/drag_and_drop/Drag_a_Group.html) didn’t work. – KLE Jun 02 '21 at 14:19

Moving a Polygon with react-kova - update the position

1 Answers1

1. Reset x and y back to original {0, 0} value

2. Save position of a line into the state

3. Make a different nodes structure, so a line an anchors are placed inside one draggable group

1. Reset `x` and `y` back to original `{0, 0}` value