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

【问题标题】：FabricJs - how to append line to existing line based on the x position of the line?FabricJs - 如何根据行的 x 位置将行附加到现有行？
【发布时间】：2017-06-29 23:09:37
【问题描述】：

我想问如何在现有线的 x 轴的给定线上附加新线（例如附图中的 Line1）。

示例： 我想在 Line1 和 Line3 之间添加蓝线。我知道 Line1 和 Line3 上蓝线的唯一 x 位置。 Y 位置未知，因此我需要在 Line1 的给定 x 位置上附加蓝线的起点，在 Line3 的给定 x 位置上附加蓝线的终点。

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

非常感谢您的建议。

【问题讨论】：

标签： javascript html canvas fabricjs

【解决方案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 位置 计算蓝线的 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

【讨论】：