Fabric.js:Line的部分在以编程方式更新其维度后未渲染

Question

我画了一条线，然后尝试更改它，使起点与x1(左(和x1(上(相同，并通过更改线的width(x2-x1-当向左移动原点时为负(和height(由y2-y1确定(来移动终点。

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

下面我定义了这条线，它很好地连接了我的两个点。然后，当其中一个流对象被移动时，我修改了线。当我将底部对象向右移动(正宽度(时，它工作正常，当我向左移动(负宽度(时线不会到达其边界。这条线有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;

未完全绘制的线条示例：屏幕截图

正宽度或负宽度的线条在正常工作时的外观示例：屏幕截图

有人在重绘线条时遇到过类似的负宽度问题吗？是否与原点有关？或者重新计算坐标，我会在设置这些值后重新绘制画布。这对正值非常有效，但当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>