Fabric.js 6.3.0：左侧控件调宽度时线条位置偏移问题

问题原因 #

你的代码逻辑和Fabric.js Line对象的变换机制冲突，直接导致了位置偏移：

• 临时缩放后强制重置scale：当newWidth <50时，你先设置scaleX/scaleY缩放线条，但随后立刻将scaleX/scaleY强制设为1。Fabric.js的缩放基于对象默认的中心变换原点执行，缩放操作会改变线条端点相对于中心点的位置，而强制重置scale不会还原这些位置变化，最终导致线条位置偏移。
• 逻辑矛盾：这段代码中，通过scale调整宽度的操作被后续的scale重置完全抵消，既没达到最小宽度的效果，还触发了不必要的位置变换。
• 另外，Fabric.js里Line对象的width属性本质是x2 - x1的差值，直接修改width配合scale=1时，若锚点设置不当也会引发位置偏移。

修复方案 #

要避免位置偏移，建议直接修改线条的端点坐标调整长度，而非依赖scale变换：

if (this.selected.type === 'line') {
  // 计算当前线条实际长度（示例为水平线，垂直线替换为y1/y2差值）
  const currentLength = Math.abs(this.selected.x2 - this.selected.x1);
  let newLength = Math.round(currentLength * this.selected.scaleX);

  // 限制最小长度
  if (newLength < 50) {
    newLength = 50;
  }

  // 按比例调整端点坐标，保持起点位置不变
  const scaleRatio = newLength / currentLength;
  this.selected.set({
    x2: this.selected.x1 + (this.selected.x2 - this.selected.x1) * scaleRatio,
    // 垂直线场景替换为：y2: this.selected.y1 + (this.selected.y2 - this.selected.y1) * scaleRatio,
    scaleX: 1,
    scaleY: 1
  });

  this.canvas.renderAll();
}

如果坚持使用width属性调整，可将变换原点设为左上角，避免缩放影响位置：

if (this.selected.type === 'line') {
  // 设置变换原点为左上角，消除缩放对位置的影响
  this.selected.set({ originX: 'left', originY: 'top' });
  
  let newWidth = Math.round(this.selected.width * this.selected.scaleX);
  if (newWidth < 50) {
    newWidth = 50;
  }

  this.selected.set({
    width: newWidth,
    scaleX: 1,
    scaleY: 1
  });

  this.canvas.renderAll();
}

内容的提问来源于stack exchange，提问作者yash chapani