Fabric.js：以编程方式更新其尺寸后未呈现的部分线

Question

我画了一条线，然后试着改变它，用x1（左）和x1（上）留下相同的起点，并通过改变线的[=14移动端点=]（x2-x1 - 向左移动原点时为负数）和 height（由 y2-y1 决定）。

这条线以正 width 值重复绘制，但 90% 的时间它在笔画中有间隙，就好像这条线没有从一个边界到另一个边界完全拉伸一样。

下面我定义了线，它运行良好并连接了我的 2 个点。然后，我在移动其中一个流对象时修改该行。当我将底部对象向右移动（正宽度）时，它工作正常，当我向左移动（负宽度）时，该线没有到达其边界。该行有 borders: true，所以我可以看到边界与它们试图连接的流对象完美对齐（在图像中可见）。

//[startleft, starttop, endleft, endtop] 
canvas.add(new fabric.Line(
  [globalConnect[0], globalConnect[1], globalConnect[2], globalConnect[3]], {
      stroke:'black', 
      strokeWidth:3,  
      lockScalingX:true, 
      lockScalingY:true, 
      lockRotation:true, 
      hasControls:true, 
      hasBorders:true, 
      lockMovementX:true, 
      lockMovementY:true
    })
);


canvas.item(tempObjectIdx + 1).left = tempX1;
canvas.item(tempObjectIdx + 1).top = tempY1;
canvas.item(tempObjectIdx + 1).width = tempX2-tempX1;
canvas.item(tempObjectIdx + 1).height = tempY2-tempY1;

未完全绘制的线条示例：screenshot

正常工作时正宽度或负宽度的线条示例：screenshot

有人在重绘线条时遇到负宽度的类似问题吗？是否与起点有关 - 或重新计算坐标，我在设置这些值后重绘 canvas - 对于正值非常有效，但当 width 为负时，该线不跨越边框（我已经尝试从底部原点以正宽度和负高度重绘线 - 没有更好？）

Answer 1

如果你只需要连接两点的直线，并在两点更新时更新它，你只需要设置直线的x1、y1和x2， y2 在每个适当的事件上。这是一个示例，其中当框触发 moving 事件时更新此类行：

const canvas = new fabric.Canvas('c')
const box1 = new fabric.Rect({
  left: 50,
  top: 50,
  width: 100,
  height: 100,
  fill: 'green'
})
const box2 = new fabric.Rect({
  left: 250,
  top: 250,
  width: 100,
  height: 100,
  fill: 'red'
})
const box1point = box1.getPointByOrigin('center', 'bottom')
const box2point = box2.getPointByOrigin('center', 'top')
const connector = new fabric.Line(
    [box1point.x, box1point.y, box2point.x, box2point.y],
    {
      stroke: "black",
      strokeWidth: 3,
      lockScalingX: true,
      lockScalingY: true,
      lockRotation: true,
      hasControls: true,
      hasBorders: true,
      lockMovementX: true,
      lockMovementY: true
    }
  )
box1.on('moving', function() {
  const connectPoint = this.getPointByOrigin('center', 'bottom')
  connector.set({
    x1: connectPoint.x,
    y1: connectPoint.y
  })
})
box2.on('moving', function() {
  const connectPoint = this.getPointByOrigin('center', 'top')
  connector.set({
    x2: connectPoint.x,
    y2: connectPoint.y
  })
})
canvas.add(box1, box2, connector)

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<canvas id='c' width="500" height="400"></canvas>

Fabric.js：以编程方式更新其尺寸后未呈现的部分线

Fabric.js: parts of Line not rendered after updating its dimensions programmatically

width

fabricjs