FabricJs - 如何根据线的x位置将线附加到现有线？

Question

我想问一下如何将新线附加到现有线的x轴的给定线上（例如附加图像上的Line1）。

示例： 我想在 Line1 和 Line3 之间添加蓝线。我知道 Line1 和 Line3 上蓝线的唯一x位置。 Y位置未知，所以我需要在Line1的给定x位置和Line3给定x位置的蓝线末尾附加蓝线的开头。

是否可以使用FabicJS？什么是正确的方法？

非常感谢您的任何建议。

Answer 1

如果你的Line1 y1 = y2和你的Line3 y1 = y2，你需要从Line1和Line3获取蓝线的y值：

var canvas = new fabric.Canvas('c', { selection: false });
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
var points1 = [ 100, 100, 200, 100 ];
var line1 = new fabric.Line(points1, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red',
      selectable: false,
      perPixelTargetFind: true
  });
 var points2 = [ 200, 100, 250, 250 ];
 var line2 = new fabric.Line(points2, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red',
      selectable: false,
      perPixelTargetFind: true
  });
 var points3 = [ 250, 250, 50, 250 ];
 var line3 = new fabric.Line(points3, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red',
      selectable: false,
      perPixelTargetFind: true
  });
 var points4 = [ 50, 250, 100, 100 ];
 var line4 = new fabric.Line(points4, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red',
      selectable: false,
      perPixelTargetFind: true
  });

 var points5 = [ 150, line1.y1, 150, line3.y1 ];
 var line5 = new fabric.Line(points5, {
    strokeWidth: 5,
    fill: 'blue',
    stroke: 'blue',
      selectable: false,
      perPixelTargetFind: true
  });
  canvas.add(line1,line2,line3, line4, line5)

上面的小提琴示例是here

但如果你的Line1 y1 不等于 y2 而Line3 y1 不等于 y2 ，那么你必须计算Line1和Line3上蓝线 x-position 的蓝线的 y1 和 y2 值。

您的蓝线将具有逻辑：

var blueX1 = 150;
var blueX2 = 100;
var blueY1 = getY(line1.x1, line1.y1, line1.x2, line1.y2, blueX1);
var blueY2 = getY(line3.x1, line3.y1, line3.x2, line3.y2, blueX2);

 var points5 = [ blueX1, blueY1, blueX2, blueY2 ];
 var line5 = new fabric.Line(points5, {
    strokeWidth: 5,
    fill: 'blue',
    stroke: 'blue',
      selectable: false,
      perPixelTargetFind: true
  });


function getY(x1,y1,x2,y2,blueX){
    return (blueX-x1) * (y2 - y1) / (x2 - x1) + y1
  }

Here是一个更新的小提琴。您需要根据与Line1和Line3

的蓝色交点更改blueX1和blueX2