本文详解在 javascript 图形应用中，当用户拖拽矩形任一顶点（如右上角）时，如何基于原始矩形几何约束，动态重算其余三个顶点坐标，确保结果仍为严格矩形（边垂直、角为直角），并保持拓扑连接关系。
本文详解在 javascript 图形应用中，当用户拖拽矩形任一顶点（如右上角）时，如何基于原始矩形几何约束，动态重算其余三个顶点坐标，确保结果仍为严格矩形（边垂直、角为直角），并保持拓扑连接关系。
在交互式图形编辑器（如 SVG 或 Canvas 应用）中，用户常通过拖拽矩形某一角点来缩放或旋转矩形。但若仅更新被拖拽点而固定其他三点，结果将不再是矩形——边不再垂直、角度失真。正确做法是：将拖拽视为对矩形的一次仿射变换（含缩放+旋转变换），以未动顶点为锚点，利用向量正交性重建整个矩形。
核心思想是：矩形由两个正交向量唯一确定——例如从左上角（TL）出发的“宽向量”（→ TR − TL）和“高向量”（↓ BL − TL）。当任意角点被拖拽时，我们需识别其对应的参考锚点（如拖拽 TR 时，TL 通常保持不动），再根据新向量长度与方向，按正交关系推导其余两点。
以下以拖拽右上角（TR） 为例（原始坐标：TL = [1,5], TR = [3,3], BL = [5,5], BR = [7,3]；拖拽后 TR' = [4,2]），给出通用计算逻辑：
✅ 步骤一：提取原始矩形基础参数
const tl = { x: 1, y: 5 };
const tr = { x: 3, y: 3 };
const bl = { x: 5, y: 5 };
const w = tr.x - tl.x; // 原始宽度：2
const h = bl.y - tl.y; // 原始高度：0 → 注意！此例中原始点顺序有误（见下方说明）⚠️ 关键校验：给定四点 [1,5], [3,3], [5,5], [7,3] 实际构成的是平行四边形而非矩形（因 TL→TR 向量为 (2,-2)，TL→BL 向量为 (4,0)，点积为 8 ≠ 0，不正交）。因此实际应用中，必须先验证输入是否为有效矩形，或强制将其拟合为最近矩形（如取最小外接矩形）。本教程假设输入已校准为合法矩形（例如修正为 TL=[1,5], TR=[4,2], BL=[3,7], BR=[6,4] —— 此即答案中给出的新坐标，且满足正交性）。
✅ 步骤二：以 TL 为锚点，构建新宽向量并单位化
const newTr = { x: 4, y: 2 };
const dx = newTr.x - tl.x; // 3
const dy = newTr.y - tl.y; // -3
const newW = Math.sqrt(dx * dx + dy * dy); // ≈ 4.2426
const udx = dx / newW; // ≈ 0.7071
const udy = dy / newW; // ≈ -0.7071该单位向量 (udx, udy) 即新“宽方向”的基向量。
✅ 步骤三：计算正交“高方向”单位向量（逆时针旋转90°）
矩形高向量必须与宽向量垂直，故取 (-udy, udx)：
const uhx = -udy; // ≈ 0.7071 const uhy = udx; // ≈ 0.7071
✅ 步骤四：按原始高度 h 推导新 BL 和 BR
// 新 BL = TL + h × (高方向单位向量)
const newBl = {
x: tl.x + h * uhx,
y: tl.y + h * uhy
};
// 新 BR = BL + 新宽向量（或 TR + 高方向向量）
const newBr = {
x: newBl.x + dx,
y: newBl.y + dy
};✅ 答案中公式
new_bl.x = tl.x - h * udy是等价变形（因udy = dy/newW，且h * udy = h * dy / newW），但更推荐使用显式正交向量法，逻辑清晰且易推广至任意拖拽角点。
? 通用化：适配所有四个角点拖拽
| 拖拽角点 | 锚点（固定） | 新向量定义 | 高方向单位向量 |
|---|---|---|---|
| TR | TL | TR' − TL |
(-udy, udx) |
| BR | TR | BR' − TR |
(udy, -udx) |
| BL | TL | BL' − TL |
(udy, -udx) |
| TL | BR |
TL' − BR（反向） |
(udy, -udx) |
? 提示：实现时可封装为函数，接收
originalCorners,draggedCorner,newPosition,anchorCorner，自动判断向量关系并返回全部四点。
? 注意事项
- 始终校验矩形有效性：拖拽前检查原始四点是否构成矩形（邻边点积为0，对边长度相等）；
- 锚点选择需符合 UX 直觉：通常拖拽 TR/BR 时固定 TL，拖拽 TL/BL 时固定 BR，但应允许配置；
-
处理退化情况：当
newW ≈ 0（拖到锚点上）时，需防止除零错误，此时设新矩形为点； -
像素对齐与抗锯齿：最终坐标建议
Math.round()，避免 Canvas 渲染模糊。
掌握此向量驱动的矩形重绘逻辑，即可在任何前端图形库（Fabric.js、Konva、原生 Canvas）中实现专业级的自由缩放交互。
