拖拽角点时椭圆上矩形对齐的算法实现问题及优化思路

你的当前思路“让拖拽改变的边匹配未改变的边”只适用于椭圆/矩形无旋转的场景，在有角度时会失效，因为旋转后矩形的边与椭圆的长轴短轴不再平行，“未改变的边”在椭圆的局部坐标系中实际是有偏移的。Figma的核心逻辑是保持矩形的宽高比与椭圆的长半轴/短半轴比严格一致，同时通过坐标转换处理旋转情况，具体实现步骤如下：

核心逻辑 #

不管椭圆或矩形是否旋转，矩形的宽高比必须等于椭圆的长半轴(a)与短半轴(b)的比值（或其倒数，取决于矩形与椭圆的对应关系）。所有计算需要先转换到椭圆的局部坐标系（将椭圆旋转至轴对齐状态），再转换回全局坐标系。

具体实现步骤 #

• 获取椭圆参数：确认椭圆的中心坐标(cx, cy)、长半轴a、短半轴b、旋转角度θ（这个是实现对齐的基础参数，你应该已经持有）。
• 坐标转换到椭圆局部坐标系：
  将拖拽角点的起始位置P0(x0,y0)、结束位置P1(x1,y1)，以及矩形的所有顶点，通过旋转变换转到椭圆的局部坐标系（x轴沿椭圆长轴，y轴沿短轴），变换公式：

  x' = (x - cx) * cosθ + (y - cy) * sinθ
  y' = -(x - cx) * sinθ + (y - cy) * cosθ
  

• 在局部坐标系中维持宽高比调整矩形：
  • 在轴对齐的椭圆局部坐标系中，旧算法的逻辑可以复用，但要强制保持矩形宽高比为2a:2b（或2b:2a，看矩形初始与椭圆的对应）。
  • 根据拖拽的角点，确定主动变化的维度：比如拖拽矩形右上角，在局部坐标系中x方向的位移是Δx = x1' - x0'，那么y方向的位移Δy需要按比例调整为Δx * (b/a)（如果矩形宽对应椭圆长轴），或者Δx * (a/b)（如果矩形宽对应椭圆短轴）。
  • 计算出调整后的角点在局部坐标系中的位置，再反推矩形的其他顶点坐标。
• 坐标转换回全局坐标系：
  将调整后的局部坐标系坐标通过逆旋转变换转回全局坐标系，公式：

  x = cx + x' * cosθ - y' * sinθ
  y = cy + x' * sinθ + y' * cosθ
  

注意点 #

• 要区分矩形是“内接”还是“外接”椭圆：内接是矩形顶点在椭圆上，外接是矩形边与椭圆相切，Figma的默认逻辑是前者，你需要根据需求调整比例系数。
• 拖拽不同角点时，主动变化的维度可能不同：比如拖拽左下角，局部坐标系中x减小、y减小，此时需要同时按比例调整两个方向的位移，确保宽高比不变。

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