JointJS自动加载后链接位置异常：锚定左上角而非中心

使用JointJS开发绘图应用，支持创建矩形并通过链接连接，已实现自动保存/加载功能，但加载后链接锚定矩形左上角而非中心，手动调整矩形尺寸后链接才会自动修正为锚定中心。

预期行为 #

加载图形后链接立即锚定矩形中心。

实际行为 #

加载后链接锚定左上角；调整矩形尺寸后恢复正常。

相关代码 #

const rect1 = new shapes.standard.Rectangle();
rect1.position(50, 50);
rect1.resize(100, 40);
rect1.attr({
  body: { stroke: "#C94A46", rx: 2, ry: 2 },
  label: { text: "Rect1", fill: "#353535" },
});
rect1.addTo(this.graph);

const rect2 = new shapes.standard.Rectangle();
rect2.position(200, 50);
rect2.resize(100, 40);
rect2.attr({
  body: { stroke: "#C94A46", rx: 2, ry: 2 },
  label: { text: "Rect2", fill: "#353535" },
});
rect2.addTo(this.graph);

// Create the link
const link = new shapes.standard.Link();
link.source(rect1, {
  magnet: "auto",
});

link.target(rect2, { x: "50%", y: "50%" }); // Connect to the center
link.attr({
  line: {
    stroke: "#000000", // Color
    strokeWidth: 2, // Width
  },
});
link.addTo(this.graph);

已尝试方案 #

• 确保magnet设为"auto"，target定义为{x: "50%", y: "50%"}
• 手动触发更新或重渲染，问题仍存在

1. 加载后强制链接重连 #

加载完成后，遍历所有链接调用reconnect()，这个方法会让链接重新计算与源/目标元素的锚点位置，直接修正中心锚定：

// 加载图形状态后执行
this.graph.getLinks().forEach(link => link.reconnect());

2. 显式指定中心锚点类型 #

创建链接时，不要用百分比坐标，直接指定锚点类型为center，避免加载时百分比计算异常：

// 创建链接时修改锚点配置
link.source(rect1, {
  anchor: { name: "center" },
  magnet: "auto"
});

link.target(rect2, {
  anchor: { name: "center" }
});

3. 触发图形全量布局刷新 #

如果重连无效，尝试重置图形单元格布局或强制视图重绘：

// 重置所有单元格的布局计算
this.graph.resetCells();

// 若持有paper实例，强制重绘所有元素
this.paper.drawCells();

4. 检查保存/加载的尺寸数据 #

确认保存的图形数据里包含元素的width和height属性，加载时正确还原。如果尺寸丢失，元素初始尺寸为0，百分比锚点会默认指向左上角，调整尺寸后才会重新计算中心。

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