Fabric.js：调整矩形大小时出现问题

Question

代码： https://codepen.io/eajithkumar128/pen/poNwJJv?editors=0010

我在使用矩形绘制的 canvas 中有一个类似表格的结构，我在行和列末端绘制了如下线（蓝色线是矩形，红色线是织物线对象）

我正在尝试通过移动线条来调整矩形的大小，每当我移动列线时，我都可以看到整个矩形本身在移动，其中我只是想更新宽度，我还可以看到在它后面绘制了一个虚构的矩形它具有正确的宽度，但原始矩形未正确调整大小。 请参考下图。

在选择行时获取行前后的 rect object 的代码：

canvas.on('selection:created', function(e){
        let targetEle = e.target;
    initialPosition = e.left;
    selectedBoxesLeft = []
        selectedBoxesRight = []
    canvas.forEachObject((v)=>{
        if(v.left+v.width === targetEle.left && v.type==="rect"){
        selectedBoxesLeft.push(v);
      }
      if(v.left === targetEle.left && v.type==="rect"){
        selectedBoxesRight.push(v);
      }
    });
    console.log(selectedBoxesLeft);
    console.log(selectedBoxesRight);
});

移动时调整大小的代码：

canvas.on('object:moving',function(e){
    let target = e.target;
  if(target.left < initialPosition){
    selectedBoxesLeft.forEach((v)=>{
      v.width =target.left - v.left
    })
    
    selectedBoxesRight.forEach((v)=>{
      let left = v.left
      v.left = target.left;
      v.width = v.width + (left- target.left)
    });
    canvas.renderAll()
  }else{
    // selectedBoxesLeft.forEach((v)=>{
    //   v.width = v.width + (target.left - v.width)
    // })
    // selectedBoxesRight.forEach((v)=>{
    //   // v.width = v.width + (v.left - target.left)
    //   v.left = target.left;
    //   v.width = v.width - target.left;
    // })
  }
});

Answer 1

调整矩形大小而不是使用

v.width =target.left - v.left

将其更改为

v.set('width', target.left - v.left)

解决了这个问题