mxgraph中旋转单元格后X坐标变更问题的解决咨询

在mxGraph里旋转单元格后出现坐标不匹配的情况，其实是个很常见的设计行为，核心原因在于mxGraph默认围绕单元格的几何中心进行旋转，旋转后mxGeometry里的x/y值对应的是旋转后单元格边界框的左上角，而非你视觉上对齐的原位置左上角。哪怕你手动把单元格拖回和旋转前完全对齐的视觉位置，内部的坐标计算逻辑还是基于旋转后的边界框，所以数值会看起来完全不同。

背后的原因 #

当你旋转单元格时，mxGraph会自动计算出包裹旋转后图形的最小矩形（也就是新的边界框），此时mxGeometry的x/y就是这个新边界框的左上角坐标。而旋转前的x/y是原边界框的左上角，这两个边界框的位置和尺寸（比如宽高会在90/270度旋转时互换）都不一样，所以哪怕视觉上对齐，坐标数值也会有差异。

实现视觉位置与几何坐标匹配的方法 #

如果你希望旋转后，单元格的mxGeometry x/y能和旋转前保持一致（即视觉左上角对齐时，几何坐标也对应），可以通过手动修正坐标的方式实现，核心思路是基于旋转中心来调整：

1. 旋转前记录关键参数：在执行旋转操作前，先保存单元格的原始x、y、width、height，以及它的中心坐标（x + width/2, y + height/2）。
2. 完成旋转后计算偏移：获取旋转后单元格的边界框，计算其中心坐标，然后算出这个中心与原中心的偏移量。
3. 修正几何坐标：用旋转后边界框的左上角坐标加上偏移量，得到对应原位置的几何坐标，再更新单元格的mxGeometry。

下面是具体的代码示例：

// 假设你已经有mxGraph实例和目标单元格cell
const graph = yourMxGraphInstance;
const cell = targetCell;

// 提前保存的旋转前参数（示例用你提供的原始值）
const originalX = 196.43333435058594;
const originalY = 372.6499938964844;
const originalWidth = cell.getGeometry().width;
const originalHeight = cell.getGeometry().height;
const originalCenter = {
  x: originalX + originalWidth / 2,
  y: originalY + originalHeight / 2
};

// 获取旋转后的单元格状态和边界框
const cellState = graph.getView().getState(cell);
const rotatedBounds = cellState.getBoundingBox();
const rotatedCenter = {
  x: rotatedBounds.x + rotatedBounds.width / 2,
  y: rotatedBounds.y + rotatedBounds.height / 2
};

// 计算偏移量：让旋转后的中心回到原中心位置
const offsetX = originalCenter.x - rotatedCenter.x;
const offsetY = originalCenter.y - rotatedCenter.y;

// 更新几何坐标
const newGeometry = cell.getGeometry().clone();
newGeometry.x = rotatedBounds.x + offsetX;
newGeometry.y = rotatedBounds.y + offsetY;

// 应用修改到模型
graph.getModel().setGeometry(cell, newGeometry);

额外提示 #

• 如果你用的是mxGraph内置的旋转工具，可以监听mxEvent.ROTATE事件，在旋转完成后自动触发上述修正逻辑，无需手动操作。
• 注意旋转90/270度时，单元格的宽高会互换，计算中心时要考虑这个变化，避免偏移计算出错。

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