Fabric JS：如何让路径点实时跟随拖拽对象？解决路径消失问题

我创建了一个包含4个控制点的路径，希望这些路径点能跟随屏幕上被拖拽的对象移动。我尝试在canvas.on('object:moving')事件中更新路径的path属性，想在对象拖拽过程中同步更新路径，但一旦移动对象，路径就消失了。

以下是我的实现代码：

//调用函数更新路径点字符串，然后设置path属性
updateUpperArmPath();
upperArmPath.set({
    path: upperArmPathPoints
});

//更新上臂路径的函数
function updateUpperArmPath() {
    pointString = createPathString([
        {x: originCircle.left - originCircle.radius, y: originCircle.top},
        {x: originCircle.left + originCircle.radius, y: originCircle.top},
        {x: jointCircle.left + jointCircle.radius, y: jointCircle.top},
        {x: jointCircle.left - jointCircle.radius, y: jointCircle.top}
    ]);
    upperArmPathPoints = pointString;
}

//从点数组自动生成路径字符串的函数
function createPathString(points) {
    var pathString = '';
  
    for (var i = 0; i < points.length; i++) {
      var point = points[i];
      var command = i === 0 ? 'M' : 'L';
      pathString += ' ' + command + ' ' + point.x + ' ' + point.y;
    }
  
    pathString += ' Z';
    return pathString;
}

核心问题 #

在Fabric.js中，直接给路径的path属性赋值字符串格式的路径指令，容易出现坐标不匹配或渲染失效的问题。另外，你使用的left和top是对象的全局坐标，但路径的path默认基于自身坐标系统（相对于路径对象的left/top），这会导致路径位置偏移甚至不可见。

修复步骤 #

• 改用Fabric.js推荐的路径数组格式：放弃字符串格式的路径指令，使用数组格式（如['M', x, y]），这种格式更稳定，能正确处理坐标逻辑。
• 修正坐标系统匹配：将路径的left和top设为0，让路径直接使用全局坐标，避免相对坐标带来的偏移。
• 强制画布重新渲染：修改路径属性后，必须调用canvas.renderAll()触发画布更新，否则修改不会显示。

修改后的完整代码 #

// 绑定对象移动事件
canvas.on('object:moving', function() {
    updateUpperArmPath();
    upperArmPath.set({ path: upperArmPathPoints });
    canvas.renderAll(); // 关键：强制画布刷新
});

// 更新上臂路径的函数
function updateUpperArmPath() {
    // 使用Fabric标准的路径数组格式
    upperArmPathPoints = [
        ['M', originCircle.left - originCircle.radius, originCircle.top],
        ['L', originCircle.left + originCircle.radius, originCircle.top],
        ['L', jointCircle.left + jointCircle.radius, jointCircle.top],
        ['L', jointCircle.left - jointCircle.radius, jointCircle.top],
        ['Z'] // 闭合路径
    ];
    // 重置路径自身位置，确保坐标匹配全局系统
    upperArmPath.set({ left: 0, top: 0, originX: 'left', originY: 'top' });
}

额外注意事项 #

• 避免使用未声明的全局变量（比如原代码中的pointString），改用局部变量或封装到作用域内，防止变量污染引发意外问题。
• 如果一定要用字符串格式路径，需确保路径坐标是相对于路径对象自身的left/top，同时设置路径的originX和originY为left和top来对齐坐标。

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