如何通过拖拽任意角点缩放并保持矩形形状：坐标重计算完整教程-js教程-PHP中文网

如何通过拖拽任意角点缩放并保持矩形形状：坐标重计算完整教程

本文详解在 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
};