HTML5 Konva Class reposition

Question

I'm trying to drag one circle and reposition a line

<script> 
var circle = new Konva.Circle({
                x : xx,
                y : yy,
                radius : radius,
                fill : "#F49342",
                stroke : "#ED6347",
                draggable : "true"

            });
var line = new Konva.Line({
          points: [23,23,35,35],
          stroke: 'black',
          strokeWidth: 2,
          lineCap: 'round',
          lineJoin: 'round'
        });
    </script>

How can I changle line's position by dragging circle?

score 1 · Answer 1 · answered Jan 22 '18 at 03:19

1

circle.on('dragmove', () => {
  // copy old points
  const points = line.points().concat();

  // move points
  points[0] = circle.x();
  points[1] = circle.y();
  line.points(points);

  // OR you can change line position:
  line.position(circle.position());

  line.getLayer().batchDraw();
})

answered Jan 22 '18 at 03:19

lavrton

18,973
4
30
63

1

Well I'm trying to make it in a loop – sundowatch Jan 22 '18 at 03:36
1

layers[i].on('dragmove',function(){ lines[i].points([150,144,248,77]); lines_layers[i].batchDraw(); }); like this – sundowatch Jan 22 '18 at 03:36
1

it works without loop, but it doesn't work in a loop – sundowatch Jan 22 '18 at 03:37
1

@sundowatch I guess because "i" variable is not what you expect in your dragmove event. Take a look here: https://stackoverflow.com/questions/7053965/when-using-callbacks-inside-a-loop-in-javascript-is-there-any-way-to-save-a-var – lavrton Jan 23 '18 at 01:10

HTML5 Konva Class reposition

1 Answers1