如何使用锚点修改线条的点？

说明：使用鼠标或手指拖动锚点，以修改二次曲线和贝塞尔曲线的曲率。
Konva 修改带锚点的曲线演示view raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@9.3.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Modify Curves with Anchor Points Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      // function to build anchor point
      function buildAnchor(x, y) {
        var anchor = new Konva.Circle({
          x: x,
          y: y,
          radius: 20,
          stroke: '#666',
          fill: '#ddd',
          strokeWidth: 2,
          draggable: true,
        });
        layer.add(anchor);

        // add hover styling
        anchor.on('mouseover', function () {
          document.body.style.cursor = 'pointer';
          this.strokeWidth(4);
        });
        anchor.on('mouseout', function () {
          document.body.style.cursor = 'default';
          this.strokeWidth(2);
        });

        anchor.on('dragmove', function () {
          updateDottedLines();
        });

        return anchor;
      }

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      // function to update line points from anchors
      function updateDottedLines() {
        var q = quad;
        var b = bezier;

        var quadLinePath = layer.findOne('#quadLinePath');
        var bezierLinePath = layer.findOne('#bezierLinePath');

        quadLinePath.points([
          q.start.x(),
          q.start.y(),
          q.control.x(),
          q.control.y(),
          q.end.x(),
          q.end.y(),
        ]);

        bezierLinePath.points([
          b.start.x(),
          b.start.y(),
          b.control1.x(),
          b.control1.y(),
          b.control2.x(),
          b.control2.y(),
          b.end.x(),
          b.end.y(),
        ]);
      }

      // we will use custom shape for curve
      var quadraticLine = new Konva.Shape({
        stroke: 'red',
        strokeWidth: 4,
        sceneFunc: (ctx, shape) => {
          ctx.beginPath();
          ctx.moveTo(quad.start.x(), quad.start.y());
          ctx.quadraticCurveTo(
            quad.control.x(),
            quad.control.y(),
            quad.end.x(),
            quad.end.y()
          );
          ctx.fillStrokeShape(shape);
        },
      });
      layer.add(quadraticLine);

      // we will use custom shape for curve
      var bezierLine = new Konva.Shape({
        stroke: 'blue',
        strokeWidth: 5,
        sceneFunc: (ctx, shape) => {
          ctx.beginPath();
          ctx.moveTo(bezier.start.x(), bezier.start.y());
          ctx.bezierCurveTo(
            bezier.control1.x(),
            bezier.control1.y(),
            bezier.control2.x(),
            bezier.control2.y(),
            bezier.end.x(),
            bezier.end.y()
          );
          ctx.fillStrokeShape(shape);
        },
      });
      layer.add(bezierLine);

      var quadLinePath = new Konva.Line({
        dash: [10, 10, 0, 10],
        strokeWidth: 3,
        stroke: 'black',
        lineCap: 'round',
        id: 'quadLinePath',
        opacity: 0.3,
        points: [0, 0],
      });
      layer.add(quadLinePath);

      var bezierLinePath = new Konva.Line({
        dash: [10, 10, 0, 10],
        strokeWidth: 3,
        stroke: 'black',
        lineCap: 'round',
        id: 'bezierLinePath',
        opacity: 0.3,
        points: [0, 0],
      });
      layer.add(bezierLinePath);

      // special objects to save references to anchors
      var quad = {
        start: buildAnchor(60, 30),
        control: buildAnchor(240, 110),
        end: buildAnchor(80, 160),
      };

      var bezier = {
        start: buildAnchor(280, 20),
        control1: buildAnchor(530, 40),
        control2: buildAnchor(480, 150),
        end: buildAnchor(300, 150),
      };

      updateDottedLines();
    </script>
  </body>
</html>