实现源点到目标点的端口级连接及缩放一致性问题求助

• 已完成部分代码（CodeSandbox 项目）
• 当前需求：
  • 创建源点到目标点的连接，确保缩放时连接样式保持一致
  • 每个源/目标对象带有多个端口，连接必须绑定到指定端口
• 连接数据结构定义：

sourceId: number;
targetId: number;
sourcePortId: number;
targetPortId: number;

• 预期实现效果参考示意图：
  

1. 端口定位与连接绘制 #

• 为每个对象的端口存储相对坐标（相对于对象自身的位置，比如{x: 0.1, y: 0.5}代表对象左侧中间位置），而非绝对坐标。缩放时，通过对象当前尺寸和缩放比例动态计算端口绝对位置：

  // 端口绝对位置计算示例
  const portAbsPos = {
    x: obj.x + obj.width * portRelPos.x * scale,
    y: obj.y + obj.height * portRelPos.y * scale
  };
  

• 若用SVG绘制，给画布添加transform="scale(${scale})"统一缩放，路径会自动适配；若用Canvas，绘制前执行ctx.scale(scale, scale)变换，再基于计算后的端口坐标绘制路径。

2. 连接与端口的绑定逻辑 #

• 维护一个符合给定数据结构的连接数组。
• 渲染时遍历连接数组：
  1. 通过sourceId找到源对象，再用sourcePortId匹配对应端口的相对坐标
  2. 通过targetId找到目标对象，再用targetPortId匹配对应端口的相对坐标
  3. 计算两者绝对坐标后，绘制连接路径（直线或贝塞尔曲线均可）

3. 缩放一致性保障 #

• 不要直接修改连接的绝对坐标适配缩放，始终基于对象和端口的相对位置动态计算。
• 若使用可视化框架（如React + Konva），确保缩放变换作用于整个画布容器，而非单独修改元素尺寸，实现连接与元素的同步缩放。

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