没问题！我来帮你搞定Fabric.js里让箭头始终跟着两个元素移动的需求。核心逻辑很简单：监听元素的移动事件，实时更新箭头的起点和终点坐标，同时还要处理箭头头部的位置和角度，让它始终指向目标元素。

实现步骤详解 #

1. 初始化画布与基础元素

首先咱们先创建一个Fabric画布，再添加两个可拖拽的元素（比如矩形和圆形）作为箭头的连接目标：

// 初始化画布
const canvas = new fabric.Canvas('canvas');

// 创建第一个元素（矩形）
const rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 80,
  height: 50,
  fill: '#f55',
  draggable: true
});

// 创建第二个元素（圆形）
const circle = new fabric.Circle({
  left: 300,
  top: 200,
  radius: 30,
  fill: '#55f',
  draggable: true
});

// 添加到画布
canvas.add(rect, circle);

2. 创建带箭头的线条对象

Fabric.js没有原生的箭头组件，咱们可以用fabric.Path来绘制一条带箭头的路径，这样能更好控制箭头的样式：

// 创建箭头路径（初始位置随便设，后面会实时更新）
const arrow = new fabric.Path('', {
  stroke: '#333',
  strokeWidth: 2,
  fill: '#333', // 箭头头部填充颜色
  selectable: false // 禁止选中箭头，避免干扰元素拖拽
});
canvas.add(arrow);

3. 编写箭头位置更新函数

这个函数是核心，它会获取两个元素的中心坐标，计算线条的路径，包括箭头头部的角度和位置：

function updateArrow() {
  // 获取两个元素的中心坐标
  const rectCenter = rect.getCenterPoint();
  const circleCenter = circle.getCenterPoint();

  // 计算线条的起点、终点，以及箭头头部的参数
  const dx = circleCenter.x - rectCenter.x;
  const dy = circleCenter.y - rectCenter.y;
  const angle = Math.atan2(dy, dx);
  const arrowLength = 15; // 箭头头部的长度
  const arrowWidth = 8; // 箭头头部的宽度

  // 构建箭头的SVG路径字符串
  // 线条从矩形中心到圆形中心，然后添加箭头头部的三角形
  const path = `
    M ${rectCenter.x} ${rectCenter.y} 
    L ${circleCenter.x} ${circleCenter.y}
    L ${circleCenter.x - arrowLength * Math.cos(angle - Math.PI/6)} ${circleCenter.y - arrowLength * Math.sin(angle - Math.PI/6)}
    M ${circleCenter.x} ${circleCenter.y}
    L ${circleCenter.x - arrowLength * Math.cos(angle + Math.PI/6)} ${circleCenter.y - arrowLength * Math.sin(angle + Math.PI/6)}
  `;

  // 更新箭头路径
  arrow.set({ path: path });
  canvas.renderAll();
}

// 初始化时先调用一次，让箭头显示出来
updateArrow();

4. 监听元素移动事件，实时更新箭头

给画布添加object:moving事件监听，每次元素移动时调用更新函数：

canvas.on('object:moving', function(e) {
  // 只有当移动的是我们的目标元素时才更新箭头
  if (e.target === rect || e.target === circle) {
    updateArrow();
  }
});

额外优化建议 #

• 连接元素边缘而非中心：如果不想连接元素中心，可以计算元素边缘的最近点，比如用getBoundingRect()获取元素的边界，然后计算从一个元素边缘到另一个元素边缘的线条。
• 处理元素缩放/旋转：如果元素会被缩放或旋转，需要在更新函数中考虑元素的缩放比例和旋转角度，用getPointByOrigin()等方法获取准确的连接点。
• 自定义箭头样式：你可以调整arrowLength、arrowWidth以及颜色、线宽等参数，让箭头符合你的设计需求。

这样一来，不管你拖拽矩形还是圆形，箭头都会牢牢跟着两个元素，始终保持连接状态啦！

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