请大家动动小手，给我一个免费的 Star 吧~
大家如果发现了 Bug，欢迎来提 Issue 哟~
github源码
gitee源码
示例地址
不知不觉来到第 10 章了，感觉接近尾声了。。。
对齐线
先看效果：
这里交互有两个部分：
1、节点之间的对齐线
2、对齐磁贴
多选的情况下，效果是一样的：
主要逻辑会放在控制“选择”的代码文件里：
src\Render\handlers\SelectionHandlers.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.xlet newPosY = newPos.ylet isAttract = falselet pairX: SortItemPair | null = nulllet pairY: SortItemPair | null = null// 对齐线 磁吸逻辑if (this.render.config.attractNode) {// 横向所有需要判断对齐的 x 坐标const sortX: Array<SortItem> = []// 纵向向所有需要判断对齐的 y 坐标const sortY: Array<SortItem> = []// 选择目标所有的对齐 xsortX.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) // 右})// 选择目标所有的对齐 ysortY.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) {// xsortX.push({id: node._id,value: node.x() // 左},{id: node._id,value: node.x() + node.width() / 2 // 垂直中},{id: node._id,value: node.x() + node.width() // 右})// ysortY.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！勾勾手指~
源码
gitee源码
示例地址
