Modify path with anchor points on HTML5 canvas

Question

My problem is how to make a UI where the user can modify a complex path by dragging anchor points that are on the path. Note on - for example the control points for Bezier curves in this example in the Konvajs documentation are off the path itself, whereas I prefer anchor points on a complex path.

I will be trying to modify a curve created as in this question.

Here is a snippet that draws a sample path. Can anyone help me please? Scroll the snippet window down slightly then click on the rectangle to see the path animation.

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

    var layer = new Konva.Layer();

    var rect = new Konva.Rect({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2,
        stroke: '#555',
        strokeWidth: 3,
        fill: '#ddd',
        width: 50,
        height: 50,
        shadowColor: 'black',
        shadowBlur: 10,
        shadowOffset: [10, 10],
        shadowOpacity: 0.2,
        cornerRadius: 10
    });

    var path = new Konva.Path({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2,
        data: 'M30 10 C-20 -50 -20 -70 50 -80 C150 -100 50 -150 -100 -80',
        stroke: '#00D2FF',
        strokeWidth: 5
    });

    var pathLen = path.getLength() + 10;
    path.dashOffset(pathLen);
    path.dash([pathLen]);

    var anim = new Konva.Animation(function (frame) {
        var dashLen = pathLen - frame.time / 5;
        if (dashLen < 0) {
            var tween = new Konva.Tween({
                node: path,
                duration: 1,
                strokeWidth: 10,
                easing: Konva.Easings.ElasticEaseOut
            });
            tween.play();
            anim.stop();
        } else {
            path.dashOffset(dashLen);
        }
    }, layer);

    rect.on('mousedown', function() {
        anim.start();
    })


    layer.add(path);
    layer.add(rect);

    stage.add(layer);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>
<div id='container' style="display: inline-block; width: 500px, height: 500px; background-color: silver; overflow: hidden; position: relative;"></div>
<div id='img'></div>

Also, can anyone suggest why part of the curve is drawn before the animation runs?

Answer 1

My solution without anchor on control point:

  var stage = new Konva.Stage({
    container: "container",
    width: 500,
    height: 500,
    draggable: true
  });

  var layer = new Konva.Layer();
  var curveLayer = new Konva.Layer();
  var k = 0;

  var rect = new Konva.Rect({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    stroke: "#555",
    strokeWidth: 3,
    fill: "#ddd",
    width: 50,
    height: 50,
    shadowColor: "black",
    shadowBlur: 10,
    shadowOffset: [10, 10],
    shadowOpacity: 0.2,
    cornerRadius: 10
  });

  var path = buildPath("M25 25 L-75 -200 C-75 -200 -120 -300 -200 -200");

  var pathLen = path.getLength() + 1000;
  path.dashOffset(pathLen);
  path.dash([pathLen]);

  var anim = new Konva.Animation(function(frame) {
    var dashLen = pathLen - frame.time * 10;
    if (dashLen < 0) {
      var tween = new Konva.Tween({
        node: path,
        duration: 1,
        strokeWidth: 10,
        easing: Konva.Easings.ElasticEaseOut
      });
      var circle = buildAnchorPoint(-75, -200);
      var circle1 = buildAnchorPoint(-200, -200);
      //var circle2 = buildAnchorPoint(-120, -242.5);
      layer.draw();
      circle.on("dragmove", function() {
        var point = stage.getPointerPosition();
        var pointx = point.x - stage.x();
        var pointy = point.y - stage.y();
        console.log(
          "X: " +
            (pointx - stage.getWidth() / 2) +
            " Y: " +
            (pointy - stage.getHeight() / 2)
        );
        path.data(
          "M25 25 L" +
            (pointx - stage.getWidth() / 2) +
            " " +
            (pointy - stage.getHeight() / 2) +
            " C" +
            (pointx - stage.getWidth() / 2) +
            " " +
            (pointy - stage.getHeight() / 2) +
            "-120 -300" +
            (circle1.getX() - stage.getWidth() / 2) +
            " " +
            (circle1.getY() - stage.getHeight() / 2)
        );
        curveLayer.draw();
        layer.draw();
      });
      circle1.on("dragmove", function() {
        var point = stage.getPointerPosition();
        var pointx = point.x - stage.x();
        var pointy = point.y - stage.y();
        console.log(
          "X: " +
            (point.x - stage.getWidth() / 2) +
            " Y: " +
            (point.y - stage.getHeight() / 2)
        );
        path.data(
          "M25 25 L" +
            (circle.getX() - stage.getWidth() / 2) +
            " " +
            (circle.getY() - stage.getHeight() / 2) +
            "C" +
            (circle.getX() - stage.getWidth() / 2) +
            " " +
            (circle.getY() - stage.getHeight() / 2) +
            " -120 -300 " +
            (pointx - stage.getWidth() / 2) +
            " " +
            (pointy - stage.getHeight() / 2)
        );
        curveLayer.draw();
        layer.draw();
      });
      tween.play();
      anim.stop();
    } else {
      path.dashOffset(dashLen);
    }
  }, curveLayer);

  rect.on("mousedown", function() {
    if (k == 0) {
      anim.start();
      k++;
    }
  });

  layer.add(rect);

  stage.add(curveLayer);
  stage.add(layer);

  function buildPath(data) {
    var path = new Konva.Path({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      data: data,
      stroke: "#00D2FF",
      strokeWidth: 5,
      lineJoin: "round",
      lineCap: "round"
    });
    curveLayer.add(path);
    return path;
  }

  function buildAnchorPoint(x, y) {
    var circle = new Konva.Circle({
      x: stage.getWidth() / 2 + x,
      y: stage.getHeight() / 2 + y,
      stroke: "#c1fbff",
      strokeWidth: 1,
      fill: "#00D2FF",
      radius: 5,
      cornerRadius: 10,
      draggable: true
    });
    layer.add(circle);
    return circle;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>
<div id='container' style="display: inline-block; width: 500px, height: 500px; background-color: silver; overflow: hidden; position: relative;"></div>
<div id='img'></div>

Can someone help with anchor on control point?

Also, I'd like to clean code a bit, because I will have many paths witch anchors, that's why I need to make handlers not like in my code, help please!