圖形編輯器開發：參考線吸附效功能，讓圖形自動對齊
作者：前端西瓜哥
參考線吸附的實現，就是找出最近的垂直線和水平線，計算出OffsetX 和 OffsetY，修正被移動圖形的 x 和 y，并記錄并繪制出最終重合的參考線。
最近我給圖形編輯器增加了參照線吸附功能，講講我的實現思路。
我正在開發的圖形設計工具：
https://github.com/F-star/suika
線上體驗：
https://blog.fstars.wang/app/suika/
效果是被移動的圖形會參考周圍圖形，自動與它們進行吸附對齊。
不得不說，很酷炫。
感覺這個圖形編輯器突然變得靈動起來，有了靈魂一般。
為什么需要參照線吸附功能？
這里的參照線，指的是在移動目標圖形時，當靠近其他圖形的包圍盒的延長線（看不見）時，會（1）繪制出最近的延長線和延長線上的點，（2）并將目標圖形吸附上去，輕松實現（3）對齊的效果。
可以看到，通過參照線，我們很容易就能實現各種對齊，比如兩圖形的底邊和定邊對齊、右下角和左上角對齊。
這在 以對齊為基本要素 的視覺設計中，是非常好用的功能。
整體思路
整體思路為：
- 記錄參照線。
- 找出目標圖形最靠近的水平參照線和垂直參照線。
- 計算出偏移值 offsetX、offsetY。
- 標記要繪制的所有參照線段（不是兩端無限延長的）。
- 修正圖形的 x、y。
- 繪制參照線和點。
記錄參照線
首先是確定能夠作為 “參照” 的參照圖形。
通常來說，參照圖形為視口內的圖形，并排除掉被移動的目標圖形。視口外的圖形通常都不在設計師的關注區域內。
確認好參照圖形后，計算出它們的包圍盒（bbox）。
這次的包圍盒有點特殊，要多給一個中點坐標，因為中線也要作為參照線。
接口簽名為：
export interface IBoxWithMid {
minX: number;
minY: number;
midX: number;
midY: number;
maxX: number;
maxY: number;
}它們組成了參照圖形的 8 個點，沿著這些點繪制豎線和橫線，就是被移動的目標圖形對應要吸附的參照線。
被移動的圖形也要計算包圍盒，并得到 5 個點。
基于這些點的產生的水平線和垂直線，在靠近參照線時會吸附到最近的參照線上，分為水平移動和垂直移動兩個維度。
編輯器上的效果：
我們首先要把所有的參照線記錄下來，在圖形準備移動（mousedown）的時候。大致有以下這幾個操作：
- 遍歷參照圖形（在視口內，且不為被移動目標圖形）；
- 計算出它們的包圍盒，得到 8 個點，3 條垂直線和 3 條水平線。在一條垂直線上的多個點，其 x 值是相同的，y 不同，我們 x 作為 key，y 的數組為 value，保存到 hLineMap 映射對象中。每一項代表一條垂直線；
- 水平線同理，保存在 vLineMap 中。
- 然后對這兩個 map 的 key 保存到 sortedXs 或 sortedYs 數組中，并排序，方便之后二分查找提高查找效率。
抽象一個 RefLine（參照線）類。
interface IVerticalLine { // 有多個端點的垂直線
x: number;
ys: number[];
}
interface IHorizontalLine { // 有多個端點的水平線
y: number;
xs: number[];
}
class RefLine {
// 參照圖形產生的垂直參照線，y 相同（作為 key），x 值不同（作為 value）
private hLineMap = new Map<number, number[]>();
// 參照圖形產生的水平照線，x 相同（作為 key），y 值不同（作為 value）
private vLineMap = new Map<number, number[]>();
// 對 hLineMap 的 key 排序，方便高效二分查找，找到最近的線
private sortedXs: number[] = [];
// 對 vLineMap 的 key 排序
private sortedYs: number[] = [];
private toDrawVLines: IVerticalLine[] = []; // 等待繪制的垂直參照線
private toDrawHLines: IHorizontalLine[] = []; // 等待繪制的水平參照線
constructor(private editor: Editor) {}
cacheXYToBbox() {
this.clear();
const hLineMap = this.hLineMap;
const vLineMap = this.vLineMap;
const selectIdSet = this.editor.selectedElements.getIdSet();
const viewportBbox = this.editor.viewportManager.getBbox2();
for (const graph of this.editor.sceneGraph.children) {
// 排除掉被移動的圖形
if (selectIdSet.has(graph.id)) {
continue;
}
const bbox = bboxToBboxWithMid(graph.getBBox2());
// 排除在視口外的圖形
if (!isRectIntersect2(viewportBbox, bbox)) {
continue;
}
// 將參照圖形記錄下來
// 這里是水平線，特點是 x 相同。
this.addBboxToMap(hLineMap, bbox.minX, [bbox.minY, bbox.maxY]);
this.addBboxToMap(hLineMap, bbox.midX, [bbox.minY, bbox.maxY]);
this.addBboxToMap(hLineMap, bbox.maxX, [bbox.minY, bbox.maxY]);
this.addBboxToMap(vLineMap, bbox.minY, [bbox.minX, bbox.maxX]);
this.addBboxToMap(vLineMap, bbox.midY, [bbox.minX, bbox.maxX]);
this.addBboxToMap(vLineMap, bbox.maxY, [bbox.minX, bbox.maxX]);
}
this.sortedXs = Array.from(hLineMap.keys()).sort((a, b) => a - b);
this.sortedYs = Array.from(vLineMap.keys()).sort((a, b) => a - b);
}
private addBboxToMap(
m: Map<number, number[]>,
xOrY: number,
xsOrYs: number[],
) {
const line = m.get(xOrY);
if (line) {
line.push(...xsOrYs);
} else {
m.set(xOrY, [...xsOrYs]);
}
}
// ...
}找出最近參照線
然后是找出目標圖形最靠近的水平參照線和垂直參照線。
這一步是在圖形移動（mousemove）時做的，是動態變化的。
首先我們分別找到目標圖形的 minX、midX、maxX 的最近垂直參照線，然后計算出它們各自的絕對距離，最后找出這里面最小的一個。
class RefLinet {
updateRefLine(_targetBbox: IBox2): {
offsetX: number;
offsetY: number;
} {
// 重置
this.toDrawVLines = [];
this.toDrawHLines = [];
// 目標對象的包圍盒，這里補上 midX，midY
const targetBbox = bboxToBboxWithMid(_targetBbox);
const hLineMap = this.hLineMap;
const vLineMap = this.vLineMap;
const sortedXs = this.sortedXs;
const sortedYs = this.sortedYs;
// 一個參照圖形都沒有，結束
if (sortedXs.length === 0 && sortedYs.length === 0) {
return { offsetX: 0, offsetY: 0 };
}
// 如果 offsetX 到最后還是 undefined，說明沒有找到最靠近的垂直參照線
let offsetX: number | undefined = undefined;
let offsetY: number | undefined = undefined;
// 分別找到目標圖形的 minX、midX、maxX 的最近垂直參照線
const closestMinX = getClosestValInSortedArr(sortedXs, targetBbox.minX);
const closestMidX = getClosestValInSortedArr(sortedXs, targetBbox.midX);
const closestMaxX = getClosestValInSortedArr(sortedXs, targetBbox.maxX);
// 分別計算出距離
const distMinX = Math.abs(closestMinX - targetBbox.minX);
const distMidX = Math.abs(closestMidX - targetBbox.midX);
const distMaxX = Math.abs(closestMaxX - targetBbox.maxX);
// 找到最近距離
const closestXDist = Math.min(distMinX, distMidX, distMaxX);
// y 同理
}
}這里有一個比較重要的算法，就是找出排序數組中，離目標值最近的數組元素。
該算法為二分查找的變體，雖然原理不復雜，但一次能寫對卻不容易。這里我是找 gpt 幫我寫的，非常完美。
實現如下：
const getClosestValInSortedArr = (
sortedArr: number[],
target: number,
) => {
if (sortedArr.length === 0) {
throw new Error('sortedArr can not be empty');
}
if (sortedArr.length === 1) {
return sortedArr[0];
}
let left = 0;
let right = sortedArr.length - 1;
while (left <= right) {
const mid = Math.floor((left + right) / 2);
if (sortedArr[mid] === target) {
return sortedArr[mid];
} else if (sortedArr[mid] < target) {
left = mid + 1;
} else {
right = mid - 1;
}
}
// check if left or right is out of bound
if (left >= sortedArr.length) {
return sortedArr[right];
}
if (right < 0) {
return sortedArr[left];
}
// check which one is closer
return Math.abs(sortedArr[right] - target) <=
Math.abs(sortedArr[left] - target)
? sortedArr[right]
: sortedArr[left];
};計算偏移值
前面我們得到了最小距離 closestXDist。
接著我們要判斷其是否小于一個特定的臨界值 tol。不可能你離著十米開外，移動一下就千里迢迢吸附過來了吧。
如果滿足，在臨界值內，我們就繼續。
offsetX 還差一步就能算出來了：確定正負，因為 closestXDist 是一個絕對值，不能直接用。
那我們就拿這個最小距離和之前計算出的三個距離 distMinX、distMidX、distMaxX對比，找到相等的，就能計算出 offsetX 了。
const isEqualNum = (a: number, b: number) => Math.abs(a - b) < 0.00001;
const tol = 5 / zoom; // 最小距離不能超過這個
// 確認偏移值 offsetX
if (closestXDist <= tol) {
// 這里考慮了一下浮點數誤差
if (isEqualNum(closestXDist, distMinX)) {
offsetX = closestMinX - targetBbox.minX;
} else if (isEqualNum(closestXDist, distMidX)) {
offsetX = closestMidX - targetBbox.midX;
} else if (isEqualNum(closestXDist, distMaxX)) {
offsetX = closestMaxX - targetBbox.maxX;
} else {
throw new Error('it should not reach here, please put a issue to us');
}
}offsetY 同理，不贅述。
標記需繪制參照線段
計算出了 offsetX 和 offsetY。
接下來要修正一下我們的 targetBbox。
const correctedTargetBbox = { ...targetBbox };
if (offsetX !== undefined) {
correctedTargetBbox.minX += offsetX;
correctedTargetBbox.midX += offsetX;
correctedTargetBbox.maxX += offsetX;
}
if (offsetY !== undefined) {
correctedTargetBbox.minY += offsetY;
correctedTargetBbox.midY += offsetY;
correctedTargetBbox.maxY += offsetY;
}修正后的目標圖形的包圍盒，它的邊就和一些參照線發生了對齊。
對齊的參照線，可能一條沒有，可能只有一條，也可能有最多的 6 條。
基于新的目標圖形，我們來找它落在的參照線有哪些。
// offsetX 不為 undefined，說明落在了臨界值內
if (offsetX !== undefined) {
/*************** 左垂直的參考線 ************/
// 對比 “offset” 和 “離 minX 最近的垂直線到 minX 的距離（不是絕對值）”
if (isEqualNum(offsetX, closestMinX - targetBbox.minX)) {
// 創建一個垂直線對象（特點是這些點的 x 相同）
const vLine: IVerticalLine = {
x: closestMinX,
ys: [],
};
// 修正后的目標圖形的對應點。
vLine.ys.push(correctedTargetBbox.minY);
vLine.ys.push(correctedTargetBbox.maxY);
// 參照圖形上的點
vLine.ys.push(...hLineMap.get(closestMinX)!);
// 添加到 “待繪制垂線集合”
this.toDrawVLines.push(vLine);
}
/*************** 中間垂直的參考線 ************/
if (isEqualNum(offsetX, closestMidX - targetBbox.midX)
) {
const vLine: IVerticalLine = {
x: closestMidX,
ys: [],
};
vLine.ys.push(correctedTargetBbox.midY);
vLine.ys.push(...hLineMap.get(closestMidX)!);
this.toDrawVLines.push(vLine);
}
/*************** 右垂直的參考線 ************/
// ...
}
// 水平線同理
if (offsetY !== undefined) {
/*************** 上水平的參考線 ************/
/*************** 中間水平的參考線 ************/
/*************** 下水平的參考線 ************/
}修正圖形的 x、y
計算出的 offsetX 和 offsetY，記得拿去修正被移動目標圖形的 x 和 y。
const onMousemove = (e) => {
// ...
const { offsetX, offsetY } = this.editor.refLine.updateRefLine(
bboxToBbox2(this.editor.selectedElements.getBBox()!),
);
// 修正
for (let i = 0, len = selectedElements.length; i < len; i++) {
selectedElements[i].x = startPoints[i].x + dx + offsetX;
selectedElements[i].y = startPoints[i].y + dy + offsetY;
}
}繪制參照線和點
最后是繪制參照線，以繪制垂直線為例。
for (const vLine of this.toDrawVLines) {
let minY = Infinity;
let maxY = -Infinity;
// 這個是世界坐標系轉視口坐標系
const { x } = this.editor.sceneCoordsToViewport(vLine.x, 0);
// 遍歷繪制點
for (const y_ of vLine.ys) {
// TODO: optimize
const { y } = this.editor.sceneCoordsToViewport(0, y_);
minY = Math.min(minY, y);
maxY = Math.max(maxY, y);
// 可能有重復的點，用備忘錄排除掉
const key = `${x},${y}`;
if (pointsSet.has(key)) {
continue;
}
pointsSet.add(key);
// 繪制點
drawXShape(ctx, x, y, pointSize);
}
// 所有點中的 minY 和 maxY，繪制線段
drawLine(ctx, x, minY, x, maxY);
}
水平線同理。
優化點
- 這里的實現，在圖形有旋轉角度的時候，參照線會過多顯得冗余，可以精簡一些，減少要對比的參照線。
- 對齊到像素網格的時候，包圍盒的值要取整。
- 考慮和按住 Shift 固定 x 或 y 平移的情況，此時有一個 offset 不能去進行校正。
最后
總結一下，參考線吸附的實現，就是找出最近的垂直線和水平線，計算出 offsetX 和 offsetY，修正被移動圖形的 x 和 y，并記錄并繪制出最終重合的參考線。
另外很感謝 Github Copilot，幫我寫了很多模板代碼。如果讓我自己復制然后改改的話，很容易寫錯。
責任編輯：姜華
來源：
前端西瓜哥
