Question

我画一条线，然后尝试对其进行更改，并以x1（左）和x1（上）为起点，并通过更改线的width来移动端点（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

可以很好地显示正宽或负宽的线条

有人在重画线时遇到类似的负宽度问题吗？与原点有什么关系-或重新计算坐标，设置这些值后我会重新绘制画布-对于正值非常有用，但是当width为负值时，该行不会跨越边框（我尝试过重新绘制）底部原点的正宽度和负高度的直线-更好吗？）

Answer 1

如果您只需要线连接两个点并在更新这两个点时对其进行更新，则只需设置线的find_element_by_tag_name，x1和y1，{{ 1}}。这是一个示例，其中当框触发x2事件时，将更新此行：

y2

moving

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

1 个答案: