前端使用 Konva 实现可视化设计器（10）- 对齐线
请大家动动小手，给我一个免费的 Star 吧~
大家如果发现了 Bug，欢迎来提 Issue 哟~
不知不觉来到第 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.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！勾勾手指~
