前端使用 Konva 实现可视化设计器（6）
请大家动动小手，给我一个免费的 Star 吧~
这一章处理一下复制、粘贴、删除、画布归位、层次调整，通过右键菜单控制。
复制粘贴
复制粘贴（通过快捷键）
// 复制暂存
pasteCache: Konva.Node[] = [];
// 粘贴次数（用于定义新节点的偏移距离）
pasteCount = 1;
// 复制
pasteStart() {
this.pasteCache = this.render.selectionTool.selectingNodes.map((o) => {
const copy = o.clone();
// 恢复透明度、可交互
copy.setAttrs({
listening: true,
opacity: copy.attrs.lastOpacity ?? 1,
});
// 清空状态
copy.setAttrs({
nodeMousedownPos: undefined,
lastOpacity: undefined,
lastZIndex: undefined,
selectingZIndex: undefined,
});
return copy;
});
this.pasteCount = 1;
}
// 粘贴
pasteEnd() {
if (this.pasteCache.length > 0) {
this.render.selectionTool.selectingClear();
this.copy(this.pasteCache);
this.pasteCount++;
}
}
快捷键处理：
keydown: (e: GlobalEventHandlersEventMap['keydown']) => {
if (e.ctrlKey) {
if (e.code === Types.ShutcutKey.C) {
this.render.copyTool.pasteStart() // 复制
} else if (e.code === Types.ShutcutKey.V) {
this.render.copyTool.pasteEnd() // 粘贴
}
}
}
}
逻辑比较简单，可以关注代码中的注释。
复制粘贴（右键）
/**
* 复制粘贴
* @param nodes 节点数组
* @param skip 跳过检查
* @returns 复制的元素
*/
copy(nodes: Konva.Node[]) {
const arr: Konva.Node[] = [];
for (const node of nodes) {
if (node instanceof Konva.Transformer) {
// 复制已选择
const backup = [...this.render.selectionTool.selectingNodes];
this.render.selectionTool.selectingClear();
this.copy(backup);
} else {
// 复制未选择
const copy = node.clone();
// 使新节点产生偏移
copy.setAttrs({
x: copy.x() + this.render.toStageValue(this.render.bgSize) * this.pasteCount,
y: copy.y() + this.render.toStageValue(this.render.bgSize) * this.pasteCount,
});
// 插入新节点
this.render.layer.add(copy);
// 选中复制内容
this.render.selectionTool.select([...this.render.selectionTool.selectingNodes, copy]);
}
}
return arr;
}
逻辑比较简单，可以关注代码中的注释。
删除
处理方法：
// 移除元素
remove(nodes: Konva.Node[]) {
for (const node of nodes) {
if (node instanceof Konva.Transformer) {
// 移除已选择的节点
this.remove(this.selectionTool.selectingNodes);
// 清除选择
this.selectionTool.selectingClear();
} else {
// 移除未选择的节点
node.remove();
}
}
}
事件处理：
keydown: (e: GlobalEventHandlersEventMap['keydown']) => {
if (e.ctrlKey) {
// 略
} else if (e.code === Types.ShutcutKey.删除) {
this.render.remove(this.render.selectionTool.selectingNodes)
}
}
画布归位
逻辑比较简单，恢复画布比例和偏移量：
// 恢复位置大小
positionZoomReset() {
this.render.stage.setAttrs({
scale: { x: 1, y: 1 }
})
this.positionReset()
}
// 恢复位置
positionReset() {
this.render.stage.setAttrs({
x: this.render.rulerSize,
y: this.render.rulerSize
})
// 更新背景
this.render.draws[Draws.BgDraw.name].draw()
// 更新比例尺
this.render.draws[Draws.RulerDraw.name].draw()
// 更新参考线
this.render.draws[Draws.RefLineDraw.name].draw()
}
稍微说明一下，初始位置需要考虑比例尺的大小。
层次调整
关于层次的调整，相对比较晦涩。
一些辅助方法
获取需要处理的节点，主要是处理 transformer 内部的节点：
// 获取移动节点
getNodes(nodes: Konva.Node[]) {
const targets: Konva.Node[] = []
for (const node of nodes) {
if (node instanceof Konva.Transformer) {
// 已选择的节点
targets.push(...this.render.selectionTool.selectingNodes)
} else {
// 未选择的节点
targets.push(node)
}
}
return targets
}
获得计算所需的最大、最小 zIndex:
// 最大 zIndex
getMaxZIndex() {
return Math.max(
...this.render.layer
.getChildren((node) => {
return !this.render.ignore(node)
})
.map((o) => o.zIndex())
)
}
// 最小 zIndex
getMinZIndex() {
return Math.min(
...this.render.layer
.getChildren((node) => {
return !this.render.ignore(node)
})
.map((o) => o.zIndex())
)
}
记录选择之前的 zIndex
由于被选择的节点会被临时置顶，会影响节点层次的调整，所以选择之前需要记录一下选择之前的 zIndex：
// 更新 zIndex 缓存
updateLastZindex(nodes: Konva.Node[]) {
for (const node of nodes) {
node.setAttrs({
lastZIndex: node.zIndex()
})
}
}
处理 transformer 的置顶影响
通过 transformer 选择的时候，所选节点的层次已经被置顶。
所以调整时需要有个步骤：
- 记录已经被 transformer 影响的每个节点的 zIndex（其实就是记录置顶状态）
- 调整节点的层次
- 恢复被 transformer 选择的节点的 zIndex（其实就是恢复置顶状态）
举例子：
现在有节点：
A/1 B/2 C/3 D/4 E/5 F/6 G/7
记录选择 C D E 之前的 lastZIndex：C/3 D/4 E/5
选择后，“临时置顶” C D E：
A/1 B/2 F/3 G/4 C/5 D/6 E/7
此时置底了 C D E，由于上面记录了选择之前的 lastZIndex，直接计算 lastZIndex，变成 C/1 D/2 E/3
在 selectingClear 的时候，会根据 lastZIndex 让 zIndex 的调整生效：
逐步变化：
0、A/1 B/2 F/3 G/4 C/5 D/6 E/7 改变 C/5 -> C/1
1、C/1 A/2 B/3 F/4 G/5 D/6 E/7 改变 D/6 -> D/2
2、C/1 D/2 A/3 B/4 F/5 G/6 E/7 改变 E/7 -> E/3
3、C/1 D/2 E/3 A/4 B/5 F/6 G/7 完成调整因为 transformer 的存在，调整完还要恢复原来的“临时置顶”：
A/1 B/2 F/3 G/4 C/5 D/6 E/7
下面是记录选择之前的 zIndex 状态、恢复调整之后的 zIndex 状态的方法：
// 记录选择期间的 zIndex
updateSelectingZIndex(nodes: Konva.Node[]) {
for (const node of nodes) {
node.setAttrs({
selectingZIndex: node.zIndex()
})
}
}
// 恢复选择期间的 zIndex
resetSelectingZIndex(nodes: Konva.Node[]) {
nodes.sort((a, b) => a.zIndex() - b.zIndex())
for (const node of nodes) {
node.zIndex(node.attrs.selectingZIndex)
}
}
关于 zIndex 的调整
主要分两种情况：已选的节点、未选的节点
- 已选：如上面所说，调整之余，还要处理 transformer 的置顶影响
- 未选：直接调整即可
// 上移
up(nodes: Konva.Node[]) {
// 最大zIndex
const maxZIndex = this.getMaxZIndex()
const sorted = this.getNodes(nodes).sort((a, b) => b.zIndex() - a.zIndex())
// 上移
let lastNode: Konva.Node | null = null
if (this.render.selectionTool.selectingNodes.length > 0) {
this.updateSelectingZIndex(sorted)
for (const node of sorted) {
if (
node.attrs.lastZIndex < maxZIndex &&
(lastNode === null || node.attrs.lastZIndex < lastNode.attrs.lastZIndex - 1)
) {
node.setAttrs({
lastZIndex: node.attrs.lastZIndex + 1
})
}
lastNode = node
}
this.resetSelectingZIndex(sorted)
} else {
// 直接调整
for (const node of sorted) {
if (
node.zIndex() < maxZIndex &&
(lastNode === null || node.zIndex() < lastNode.zIndex() - 1)
) {
node.zIndex(node.zIndex() + 1)
}
lastNode = node
}
this.updateLastZindex(sorted)
}
}
直接举例子（忽略 transformer 的置顶影响）：
现在有节点：
A/1 B/2 C/3 D/4 E/5 F/6 G/7，上移 D F
执行一次：
移动F，A/1 B/2 C/3 D/4 E/5 G/6 F/7
移动D，A/1 B/2 C/3 E/4 D/5 G/6 F/7
再执行一次：
移动F，已经到头了，不变，A/1 B/2 C/3 E/4 D/5 G/6 F/7
移动D，A/1 B/2 C/3 E/4 G/5 D/6 F/7
再执行一次：
移动F，已经到尾了，不变，A/1 B/2 C/3 E/4 G/5 D/6 F/7
移动D，已经贴着 F 了，为了保持 D F 的相对顺序，也不变，A/1 B/2 C/3 E/4 G/5 D/6 F/7
结束
// 下移
down(nodes: Konva.Node[]) {
// 最小 zIndex
const minZIndex = this.getMinZIndex()
const sorted = this.getNodes(nodes).sort((a, b) => a.zIndex() - b.zIndex())
// 下移
let lastNode: Konva.Node | null = null
if (this.render.selectionTool.selectingNodes.length > 0) {
this.updateSelectingZIndex(sorted)
for (const node of sorted) {
if (
node.attrs.lastZIndex > minZIndex &&
(lastNode === null || node.attrs.lastZIndex > lastNode.attrs.lastZIndex + 1)
) {
node.setAttrs({
lastZIndex: node.attrs.lastZIndex - 1
})
}
lastNode = node
}
this.resetSelectingZIndex(sorted)
} else {
// 直接调整
for (const node of sorted) {
if (
node.zIndex() > minZIndex &&
(lastNode === null || node.zIndex() > lastNode.zIndex() + 1)
) {
node.zIndex(node.zIndex() - 1)
}
lastNode = node
}
this.updateLastZindex(sorted)
}
}
直接举例子（忽略 transformer 的置顶影响）：
现在有节点：
A/1 B/2 C/3 D/4 E/5 F/6 G/7，下移 B D
执行一次：
移动B，B/1 A/2 C/3 D/4 E/5 F/6 G/7
移动D，B/1 A/2 D/3 C/4 E/5 F/6 G/7
再执行一次：
移动B，已经到头了，不变，B/1 A/2 D/3 C/4 E/5 F/6 G/7
移动D，B/1 D/2 A/3 C/4 E/5 F/6 G/7
再执行一次：
移动B，已经到头了，不变，B/1 D/2 A/3 C/4 E/5 F/6 G/7
移动D，已经贴着 B 了，为了保持 B D 的相对顺序，也不变，B/1 D/2 A/3 C/4 E/5 F/6 G/7
结束
// 置顶
top(nodes: Konva.Node[]) {
// 最大 zIndex
let maxZIndex = this.getMaxZIndex()
const sorted = this.getNodes(nodes).sort((a, b) => b.zIndex() - a.zIndex())
if (this.render.selectionTool.selectingNodes.length > 0) {
// 先选中再调整
this.updateSelectingZIndex(sorted)
// 置顶
for (const node of sorted) {
node.setAttrs({
lastZIndex: maxZIndex--
})
}
this.resetSelectingZIndex(sorted)
} else {
// 直接调整
for (const node of sorted) {
node.zIndex(maxZIndex)
}
this.updateLastZindex(sorted)
}
}
从高到低，逐个移动，每次移动递减 1
// 置底
bottom(nodes: Konva.Node[]) {
// 最小 zIndex
let minZIndex = this.getMinZIndex()
const sorted = this.getNodes(nodes).sort((a, b) => a.zIndex() - b.zIndex())
if (this.render.selectionTool.selectingNodes.length > 0) {
// 先选中再调整
this.updateSelectingZIndex(sorted)
// 置底
for (const node of sorted) {
node.setAttrs({
lastZIndex: minZIndex++
})
}
this.resetSelectingZIndex(sorted)
} else {
// 直接调整
for (const node of sorted) {
node.zIndex(minZIndex)
}
this.updateLastZindex(sorted)
}
}
从低到高，逐个移动，每次移动递增 1
调整 zIndex 的思路比较个性化，所以晦涩。要符合 konva 的 zIndex 特定，且达到目的，算法可以自行调整。
右键菜单
事件处理
mousedown: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['mousedown']>) => {
this.state.lastPos = this.render.stage.getPointerPosition()
if (e.evt.button === Types.MouseButton.左键) {
if (!this.state.menuIsMousedown) {
// 没有按下菜单，清除菜单
this.state.target = null
this.draw()
}
} else if (e.evt.button === Types.MouseButton.右键) {
// 右键按下
this.state.right = true
}
},
mousemove: () => {
if (this.state.target && this.state.right) {
// 拖动画布时（右键），清除菜单
this.state.target = null
this.draw()
}
},
mouseup: () => {
this.state.right = false
},
contextmenu: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['contextmenu']>) => {
const pos = this.render.stage.getPointerPosition()
if (pos && this.state.lastPos) {
// 右键目标
if (pos.x === this.state.lastPos.x || pos.y === this.state.lastPos.y) {
this.state.target = e.target
} else {
this.state.target = null
}
this.draw()
}
},
wheel: () => {
// 画布缩放时，清除菜单
this.state.target = null
this.draw()
}
逻辑说明都在注释里了，主要处理的是右键菜单出现的位置，以及出现和消失的时机，最后是右键的目标。
override draw() {
this.clear()
if (this.state.target) {
// 菜单数组
const menus: Array<{
name: string
action: (e: Konva.KonvaEventObject<MouseEvent>) => void
}> = []
if (this.state.target === this.render.stage) {
// 空白处
menus.push({
name: '恢复位置',
action: () => {
this.render.positionTool.positionReset()
}
})
menus.push({
name: '恢复大小位置',
action: () => {
this.render.positionTool.positionZoomReset()
}
})
} else {
// 未选择：真实节点，即素材的容器 group
// 已选择：transformer
const target = this.state.target.parent
// 目标
menus.push({
name: '复制',
action: () => {
if (target) {
this.render.copyTool.copy([target])
}
}
})
menus.push({
name: '删除',
action: () => {
if (target) {
this.render.remove([target])
}
}
})
menus.push({
name: '置顶',
action: () => {
if (target) {
this.render.zIndexTool.top([target])
}
}
})
menus.push({
name: '上一层',
action: () => {
if (target) {
this.render.zIndexTool.up([target])
}
}
})
menus.push({
name: '下一层',
action: () => {
if (target) {
this.render.zIndexTool.down([target])
}
}
})
menus.push({
name: '置底',
action: () => {
if (target) {
this.render.zIndexTool.bottom([target])
}
}
})
}
// stage 状态
const stageState = this.render.getStageState()
// 绘制右键菜单
const group = new Konva.Group({
name: 'contextmenu',
width: stageState.width,
height: stageState.height
})
let top = 0
// 菜单每项高度
const lineHeight = 30
const pos = this.render.stage.getPointerPosition()
if (pos) {
for (const menu of menus) {
// 框
const rect = new Konva.Rect({
x: this.render.toStageValue(pos.x - stageState.x),
y: this.render.toStageValue(pos.y + top - stageState.y),
width: this.render.toStageValue(100),
height: this.render.toStageValue(lineHeight),
fill: '#fff',
stroke: '#999',
strokeWidth: this.render.toStageValue(1),
name: 'contextmenu'
})
// 标题
const text = new Konva.Text({
x: this.render.toStageValue(pos.x - stageState.x),
y: this.render.toStageValue(pos.y + top - stageState.y),
text: menu.name,
name: 'contextmenu',
listening: false,
fontSize: this.render.toStageValue(16),
fill: '#333',
width: this.render.toStageValue(100),
height: this.render.toStageValue(lineHeight),
align: 'center',
verticalAlign: 'middle'
})
group.add(rect)
group.add(text)
// 菜单事件
rect.on('click', (e) => {
if (e.evt.button === Types.MouseButton.左键) {
// 触发事件
menu.action(e)
// 移除菜单
this.group.removeChildren()
this.state.target = null
}
e.evt.preventDefault()
e.evt.stopPropagation()
})
rect.on('mousedown', (e) => {
if (e.evt.button === Types.MouseButton.左键) {
this.state.menuIsMousedown = true
// 按下效果
rect.fill('#dfdfdf')
}
e.evt.preventDefault()
e.evt.stopPropagation()
})
rect.on('mouseup', (e) => {
if (e.evt.button === Types.MouseButton.左键) {
this.state.menuIsMousedown = false
}
})
rect.on('mouseenter', (e) => {
if (this.state.menuIsMousedown) {
rect.fill('#dfdfdf')
} else {
// hover in
rect.fill('#efefef')
}
e.evt.preventDefault()
e.evt.stopPropagation()
})
rect.on('mouseout', () => {
// hover out
rect.fill('#fff')
})
rect.on('contextmenu', (e) => {
e.evt.preventDefault()
e.evt.stopPropagation()
})
top += lineHeight - 1
}
}
this.group.add(group)
}
}
逻辑也不复杂，根据右键的目标分配相应的菜单项
空白处：恢复位置、大小
节点：复制、删除、上移、下移、置顶、置底
绘制右键菜单
右键的目标有二种情况：空白处、单个/多选节点。
接下来，计划实现下面这些功能：
- 实时预览窗
- 导出、导入
- 对齐效果
- 等等。。。
是不是值得更多的 Star 呢？勾勾手指~