FabricJS - 移动路径时,"路径"对象不会更新

Question

以前我在FabricJS中使用Line类来允许用户在画布上绘制线条.我现在需要实现曲线,但由于Fabric的Line类不支持二次曲线,我重新编写了我的代码以使用Path类.

以前在绘制线时,如果在画布上移动了线,x1,y1,x2和y2值会自动更新,这样可以更容易地更新我创建的起点和终点的位置(只是在画布可以像操作Adobe Illustrator中的锚点一样进行操作.

Path类不使用x1,y1,x2或y2,而是传递一个转换为数组的字符串,例如M 100 100, Q 200 200 500 500.这些值然后可作为一个的一部分path对象(100 100为路径的开始点的x和y,200 200作为曲线和500 500作为端),这意味着我可以在得到的开始和结束点与Line类相似的方式.

问题是当移动线本身时路径对象不会更新.该left和top值更新,但我发现很难手动更新基于此路径值.我觉得我可能会遗漏一些明显的东西(例如,能够自动更新路径对象或获得可用于手动重新定位对象上的锚点的delta /差异:移动功能).

下面的片段取自Fabric网站上的二次曲线演示.如果您移动拖动实际线(而不是锚点),您可以看到锚点保持原样.

(function() {
  var canvas = this.__canvas = new fabric.Canvas('c', {
    height: 563,
    width: 1000,
  });
  fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

  canvas.on({
    'object:selected': onObjectSelected,
    'object:moving': onObjectMoving,
    'before:selection:cleared': onBeforeSelectionCleared
  });

  (function drawQuadratic() {

    var line = new fabric.Path('M 100 100, Q 200 200 200 200', { fill: '', stroke: 'black', objectCaching: false });
    
    console.log(line);
    
    console.log(line);

    line.selectable = true;
    canvas.add(line);

    var p1 = makeCurvePoint(200, 200, null, line, null)
    p1.name = "p1";
    canvas.add(p1);

    var p0 = makeCurveCircle(100, 100, line, p1, null);
    p0.name = "p0";
    canvas.add(p0);

    var p2 = makeCurveCircle(300, 100, null, p1, line);
    p2.name = "p2";
    canvas.add(p2);

  })();

  function makeCurveCircle(left, top, line1, line2, line3) {
    var c = new fabric.Circle({
      left: left,
      top: top,
      strokeWidth: 5,
      radius: 12,
      fill: '#fff',
      stroke: '#666'
    });

    c.hasBorders = c.hasControls = false;

    c.line1 = line1;
    c.line2 = line2;
    c.line3 = line3;

    return c;
  }

  function makeCurvePoint(left, top, line1, line2, line3) {
    var c = new fabric.Circle({
      left: left,
      top: top,
      strokeWidth: 8,
      radius: 14,
      fill: '#fff',
      stroke: '#666'
    });

    c.hasBorders = c.hasControls = false;

    c.line1 = line1;
    c.line2 = line2;
    c.line3 = line3;

    return c;
  }

  function onObjectSelected(e) {
    var activeObject = e.target;

    if (activeObject.name == "p0" || activeObject.name == "p2") {
      activeObject.line2.animate('opacity', '1', {
        duration: 200,
        onChange: canvas.renderAll.bind(canvas),
      });
      activeObject.line2.selectable = true;
    }
  }

  function onBeforeSelectionCleared(e) {
    var activeObject = e.target;
    if (activeObject.name == "p0" || activeObject.name == "p2") {
      activeObject.line2.animate('opacity', '0', {
        duration: 200,
        onChange: canvas.renderAll.bind(canvas),
      });
      activeObject.line2.selectable = false;
    }
    else if (activeObject.name == "p1") {
      activeObject.animate('opacity', '0', {
        duration: 200,
        onChange: canvas.renderAll.bind(canvas),
      });
      activeObject.selectable = false;
    }
  }

  function onObjectMoving(e) {
    if (e.target.name == "p0" || e.target.name == "p2") {
      var p = e.target;

      if (p.line1) {
        p.line1.path[0][1] = p.left;
        p.line1.path[0][2] = p.top;
      }
      else if (p.line3) {
        p.line3.path[1][3] = p.left;
        p.line3.path[1][4] = p.top;
      }
    }
    else if (e.target.name == "p1") {
      var p = e.target;

      if (p.line2) {
        p.line2.path[1][1] = p.left;
        p.line2.path[1][2] = p.top;
      }
    }
    else if (e.target.name == "p0" || e.target.name == "p2") {
      var p = e.target;

      p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top });
      p.line2 && p.line2.set({ 'x1': p.left, 'y1': p.top });
      p.line3 && p.line3.set({ 'x1': p.left, 'y1': p.top });
      p.line4 && p.line4.set({ 'x1': p.left, 'y1': p.top });
    }
  }
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.min.js"></script>
<canvas id="c"></canvas>

Answer 1

这可能不是一个完美的解决方案。您需要从路径对象计算路径的终点。然后将其设置为所有三个圆圈。并且暂时无法设置路径对象的路径，因此您需要使用计算出的点路径创建一个新的路径对象。

演示

(function() {
  var line;
  var canvas = this.__canvas = new fabric.Canvas('c', {
    selection: false,
    perPixelTargetFind: true,
    targetFindTolerance: 10
  });
  fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

  canvas.on({
    'object:moving': onObjectMoving,
    'object:modified': reinitpath
  });

  line = new fabric.Path('M 100 100 Q 200, 200, 300, 100', {
    fill: '',
    stroke: 'black',
    name: 'line',
    hasControls: false,
    hasBorders: false,
    objectCaching:false

  });
  canvas.add(line);

  var p1 = makeCurvePoint(200, 200, null, line, null)
  p1.name = "p1";
  canvas.add(p1);

  var p0 = makeCurveCircle(100, 100, line, p1, null);
  p0.name = "p0";
  canvas.add(p0);

  var p2 = makeCurveCircle(300, 100, null, p1, line);
  p2.name = "p2";
  canvas.add(p2);

  function makeCurveCircle(left, top, line1, line2, line3) {
    var c = new fabric.Circle({
      left: left,
      top: top,
      strokeWidth: 5,
      radius: 12,
      fill: '#fff',
      stroke: '#666'
    });

    c.hasBorders = c.hasControls = false;

    c.line1 = line1;
    c.line2 = line2;
    c.line3 = line3;

    return c;
  }

  function makeCurvePoint(left, top, line1, line2, line3) {
    var c = new fabric.Circle({
      left: left,
      top: top,
      strokeWidth: 8,
      radius: 14,
      fill: '#fff',
      stroke: '#666'
    });

    c.hasBorders = c.hasControls = false;
    setLineToCircle(c, line1, line2, line3)

    return c;
  }


  function onObjectMoving(e) {
    var p = e.target;
    if (p.name == "p0" || p.name == "p2") {
      if (p.line1) {
        p.line1.path[0][1] = p.left;
        p.line1.path[0][2] = p.top;
      } else if (p.line3) {
        p.line3.path[1][3] = p.left;
        p.line3.path[1][4] = p.top;
      }
    } else if (p.name == "p1") {
      if (p.line2) {
        p.line2.path[1][1] = p.left;
        p.line2.path[1][2] = p.top;
      }
    } else if (p.name == "line") {

      var transformedPoints = getTransformedPoint(p);
      p0.left = transformedPoints[0].x;
      p0.top = transformedPoints[0].y;
      p2.left = transformedPoints[1].x;
      p2.top = transformedPoints[1].y;
      p1.left = transformedPoints[2].x;
      p1.top = transformedPoints[2].y;

    }
  }

  function reinitpath(e) {
    p0.setCoords();
    p1.setCoords();
    p2.setCoords();
    canvas.remove(line);
    var path = line.path;
    if (e.target.name == 'line') {
      var transformedPoints = getTransformedPoint(line);
      path = [
        [],
        []
      ];
      path[0][0] = 'M';
      path[0][1] = transformedPoints[0].x;
      path[0][2] = transformedPoints[0].y;
      path[1][0] = 'Q';
      path[1][1] = transformedPoints[2].x;
      path[1][2] = transformedPoints[2].y;
      path[1][3] = transformedPoints[1].x;
      path[1][4] = transformedPoints[1].y;

    };
    line = new fabric.Path(path, {
      fill: '',
      stroke: 'black',
      name: 'line',
      hasControls: false,
      hasBorders: false,
      objectCaching:false
    });
    canvas.add(line);
    setLineToCircle(p1, null, line, null)
    setLineToCircle(p0, line, p1, null);
    setLineToCircle(p2, null, p1, line);

  }

  function getTransformedPoint(p) {
    var points = [];
    var path = p.path;
    points.push(new fabric.Point(path[0][1], path[0][2]));
    points.push(new fabric.Point(path[1][3], path[1][4]));
    points.push(new fabric.Point(path[1][1], path[1][2]));
    var matrix = line.calcTransformMatrix();
    return points.map(function(p) {
        return new fabric.Point(p.x - line.minX - line.width / 2, p.y - line.minY - line.height / 2);
      })
      .map(function(p) {
        return fabric.util.transformPoint(p, matrix);
      });
  }

  function setLineToCircle(circle, line1, line2, line3) {
    circle.line1 = line1;
    circle.line2 = line2;
    circle.line3 = line3;
  }
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>

<canvas id="c" width="600" height="600"></canvas>