HTML5 Konva类重新定位

时间:2018-01-22 02:35:39

标签: javascript html5 konvajs

我试图拖动一个圆圈并重新定位一条线

<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>

如何通过拖动圈来改变线的位置?

1 个答案:

答案 0 :(得分: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();
})