Fabric.js修改Path坐标后Bounding box未同步更新如何解决

手动修改fabric.Path实例path数组内的坐标值，不会触发Fabric内部的路径边界重算逻辑。哪怕关闭对象缓存、删除对象后重新添加，实例内部缓存的旧包围盒数据也不会刷新，最终表现就是路径视觉上已经移动，选中时的控制框/包围盒仍停留在初始位置。

全版本Fabric.js（从早期1.x到最新6.x）都有标准处理API，不需要用删除重加对象的hack方案，修改完路径坐标后按顺序调用两个方法即可完成同步：

• 执行path实例._setPath(当前path数组)：重新解析路径数据，计算路径实际宽高与内部边界偏移
• 执行path实例.setCoords()：基于最新的对象位置、尺寸，更新包围盒8个控制点的坐标，同步选框位置

var pathLine = new fabric.Path('M 10 10 L 10 100 L 100 100', {
    fill: '',
    stroke: 'black',
    objectCaching: false
})

var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'grey',
    width: 50,
    height: 50,
});

function createCanvas(id){
    const canvas = new fabric.Canvas(id);
    canvas.add(pathLine);
    canvas.add(rect);
    pathLine.perPixelTargetFind = true;

    canvas.on('object:moving', function() {
        // 更新路径点位
        pathLine.path[2][1] = rect.left;
        pathLine.path[2][2] = rect.top;
        // 触发路径重解析，更新边界数据
        pathLine._setPath(pathLine.path);
        // 同步更新矩形和路径的包围盒坐标
        pathLine.setCoords();
        rect.setCoords();
        canvas.renderAll();
    });

    return canvas;
}

• 删除路径再重新添加的操作完全多余，会产生不必要的性能损耗，直接调用上述两个方法即可
• 如果需要批量修改路径的多个点位，等所有点位修改完成后再统一调用重解析和坐标更新方法，不需要每改一个点就执行一次
• 5.0及以上高版本Fabric.js支持直接给path属性赋值新的路径数组，赋值后同样需要调用setCoords()同步包围盒

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