请大家动动小手，给我一个免费的 Star 吧~
大家如果发现了 Bug，欢迎来提 Issue 哟~
不知不觉来到第 10 章了，感觉接近尾声了。。。
对齐线
先看效果：
这里交互有两个部分：
1、节点之间的对齐线
2、对齐磁贴
多选的情况下，效果是一样的：
主要逻辑会放在控制“选择”的代码文件里：
srcRenderhandlersSelectionHandlers.ts
这里需要一些辅助都定义：
interface SortItem { id?: number // 有 id 就是其他节点，否则就是 选择目标 value: number // 左、垂直中、右的 x 坐标值; 上、水平中、下的 y 坐标值； } type SortItemPair = [SortItem, SortItem] 尝试画个图说明一下上面的含义：
这里以纵向（基于 x 坐标值）为例：
这里的 x1~x9，就是 SortItem，横向（基于 y 坐标值）同理，特别地，如果是正在拖动的目标节点，会把该节点的 _id 记录在 SortItem 以示区分。
会存在一个处理，把一个方向上的所有 x 坐标进行从小到大的排序，然后一双一双的遍历，需要符合以下条件“必须分别属于相邻的两个节点”的 SortItem 对，也就是 SortItemPair。
在查找所有 SortItemPair 的同时，只会更新并记录节点距离最短的那些 SortItemPair（可能会存在多个）。
核心逻辑代码：
// 磁吸逻辑 attract = (newPos: Konva.Vector2d) => { // 对齐线清除 this.alignLinesClear() // stage 状态 const stageState = this.render.getStageState() const width = this.render.transformer.width() const height = this.render.transformer.height() let newPosX = newPos.x let newPosY = newPos.y let isAttract = false let pairX: SortItemPair | null = null let pairY: SortItemPair | null = null // 对齐线 磁吸逻辑 if (this.render.config.attractNode) { // 横向所有需要判断对齐的 x 坐标 const sortX: Array<SortItem> = [] // 纵向向所有需要判断对齐的 y 坐标 const sortY: Array<SortItem> = [] // 选择目标所有的对齐 x sortX.push( { value: this.render.toStageValue(newPos.x - stageState.x) // 左 }, { value: this.render.toStageValue(newPos.x - stageState.x + width / 2) // 垂直中 }, { value: this.render.toStageValue(newPos.x - stageState.x + width) // 右 } ) // 选择目标所有的对齐 y sortY.push( { value: this.render.toStageValue(newPos.y - stageState.y) // 上 }, { value: this.render.toStageValue(newPos.y - stageState.y + height / 2) // 水平中 }, { value: this.render.toStageValue(newPos.y - stageState.y + height) // 下 } ) // 拖动目标 const targetIds = this.render.selectionTool.selectingNodes.map((o) => o._id) // 除拖动目标的其他 const otherNodes = this.render.layer.getChildren((node) => !targetIds.includes(node._id)) // 其他节点所有的 x / y 坐标 for (const node of otherNodes) { // x sortX.push( { id: node._id, value: node.x() // 左 }, { id: node._id, value: node.x() + node.width() / 2 // 垂直中 }, { id: node._id, value: node.x() + node.width() // 右 } ) // y sortY.push( { id: node._id, value: node.y() // 上 }, { id: node._id, value: node.y() + node.height() / 2 // 水平中 }, { id: node._id, value: node.y() + node.height() // 下 } ) } // 排序 sortX.sort((a, b) => a.value - b.value) sortY.sort((a, b) => a.value - b.value) // x 最短距离 let XMin = Infinity // x 最短距离的【对】（多个） let pairXMin: Array<SortItemPair> = [] // y 最短距离 let YMin = Infinity // y 最短距离的【对】（多个） let pairYMin: Array<SortItemPair> = [] // 一对对比较距离，记录最短距离的【对】 // 必须是 选择目标 与 其他节点 成【对】 // 可能有多个这样的【对】 for (let i = 0; i < sortX.length - 1; i++) { // 相邻两个点，必须为 目标节点 + 非目标节点 if ( (sortX[i].id === void 0 && sortX[i + 1].id !== void 0) || (sortX[i].id !== void 0 && sortX[i + 1].id === void 0) ) { // 相邻两个点的 x 距离 const offset = Math.abs(sortX[i].value - sortX[i + 1].value) if (offset < XMin) { // 更新 x 最短距离 记录 XMin = offset // 更新 x 最短距离的【对】 记录 pairXMin = [[sortX[i], sortX[i + 1]]] } else if (offset === XMin) { // 存在多个 x 最短距离 pairXMin.push([sortX[i], sortX[i + 1]]) } } } for (let i = 0; i < sortY.length - 1; i++) { // 相邻两个点，必须为 目标节点 + 非目标节点 if ( (sortY[i].id === void 0 && sortY[i + 1].id !== void 0) || (sortY[i].id !== void 0 && sortY[i + 1].id === void 0) ) { // 相邻两个点的 y 距离 const offset = Math.abs(sortY[i].value - sortY[i + 1].value) if (offset < YMin) { // 更新 y 最短距离 记录 YMin = offset // 更新 y 最短距离的【对】 记录 pairYMin = [[sortY[i], sortY[i + 1]]] } else if (offset === YMin) { // 存在多个 y 最短距离 pairYMin.push([sortY[i], sortY[i + 1]]) } } } // 取第一【对】，用于判断距离是否在阈值内 if (pairXMin[0]) { if (Math.abs(pairXMin[0][0].value - pairXMin[0][1].value) < this.render.bgSize / 2) { pairX = pairXMin[0] } } if (pairYMin[0]) { if (Math.abs(pairYMin[0][0].value - pairYMin[0][1].value) < this.render.bgSize / 2) { pairY = pairYMin[0] } } // 优先对齐节点 // 存在 1或多个 x 最短距离 满足阈值 if (pairX?.length === 2) { for (const pair of pairXMin) { // 【对】里的那个非目标节点 const other = pair.find((o) => o.id !== void 0) if (other) { // x 对齐线 const line = new Konva.Line({ points: _.flatten([ [other.value, this.render.toStageValue(-stageState.y)], [other.value, this.render.toStageValue(this.render.stage.height() - stageState.y)] ]), stroke: 'blue', strokeWidth: this.render.toStageValue(1), dash: [4, 4], listening: false }) this.alignLines.push(line) this.render.layerCover.add(line) } } // 磁贴第一个【对】 const target = pairX.find((o) => o.id === void 0) const other = pairX.find((o) => o.id !== void 0) if (target && other) { // 磁铁坐标值 newPosX = newPosX - this.render.toBoardValue(target.value - other.value) isAttract = true } } // 存在 1或多个 y 最短距离 满足阈值 if (pairY?.length === 2) { for (const pair of pairYMin) { // 【对】里的那个非目标节点 const other = pair.find((o) => o.id !== void 0) if (other) { // y 对齐线 const line = new Konva.Line({ points: _.flatten([ [this.render.toStageValue(-stageState.x), other.value], [this.render.toStageValue(this.render.stage.width() - stageState.x), other.value] ]), stroke: 'blue', strokeWidth: this.render.toStageValue(1), dash: [4, 4], listening: false }) this.alignLines.push(line) this.render.layerCover.add(line) } } // 磁贴第一个【对】 const target = pairY.find((o) => o.id === void 0) const other = pairY.find((o) => o.id !== void 0) if (target && other) { // 磁铁坐标值 newPosY = newPosY - this.render.toBoardValue(target.value - other.value) isAttract = true } } } 虽然代码比较冗长，不过逻辑相对还是比较清晰，找到满足条件（小于阈值，足够近，这里阈值为背景网格的一半大小）的 SortItemPair，就可以根据记录的坐标值大小，定义并绘制相应的线条（添加到 layerCover 中），记录在某个变量中：
// 对齐线 alignLines: Konva.Line[] = [] // 对齐线清除 alignLinesClear() { for (const line of this.alignLines) { line.remove() } this.alignLines = [] } 在适合的时候，执行 alignLinesClear 清空失效的对齐线即可。
接下来，计划实现下面这些功能：
- 连接线
- 等等。。。
More Stars please！勾勾手指~
