前端使用 Konva 实现可视化设计器（18）- 素材嵌套

前端使用 Konva 实现可视化设计器（18）- 素材嵌套 - 加载阶段

本章主要实现素材的嵌套（加载阶段）这意味着可以拖入画布的对象，不只是图片素材，还可以是嵌套的图片和图形。

请大家动动小手，给我一个免费的 Star 吧~

大家如果发现了 Bug，欢迎来提 Issue 哟~

github源码

gitee源码

示例地址

在原来的 drop 处理基础上，增加一个 json 类型素材的处理入口：

// src/Render/handlers/DragOutsideHandlers.tsdrop: (e: GlobalEventHandlersEventMap['drop']) => {// 略this.render.assetTool[type === 'svg'? `loadSvg`: type === 'gif'? 'loadGif': type === 'json'? 'loadJson' // 新增，处理 json 类型素材: 'loadImg'](src).then((target: Konva.Image | Konva.Group) => {// 图片素材if (target instanceof Konva.Image) {// 略} else {// json 素材target.id(nanoid())target.name('asset')group = targetthis.render.linkTool.groupIdCover(group)}})// 略
}

drop 原逻辑基本不变，关键逻辑在 loadJson 中：

// src/Render/tools/AssetTool.ts// 加载节点 jsonasync loadJson(src: string) {try {// 读取 json内容const json = JSON.parse(await (await fetch(src)).text())// 子素材const assets = json.children// 刷新idthis.render.linkTool.jsonIdCover(assets)// 生成空白 stage+layerconst stageEmpty = new Konva.Stage({container: document.createElement('div')})const layerEmpty = new Konva.Layer()stageEmpty.add(layerEmpty)// 空白 json 根const jsonRoot = JSON.parse(stageEmpty.toJSON())jsonRoot.children[0].children = [json]// 重新加载 stageconst stageReload = Konva.Node.create(JSON.stringify(jsonRoot), document.createElement('div'))// 目标 group（即 json 转化后的节点）const groupTarget = stageReload.children[0].children[0] as Konva.Group// 释放内存stageEmpty.destroy()groupTarget.remove()stageReload.destroy()// 深度遍历加载子素材const nodes: {target: Konva.Stage | Konva.Layer | Konva.Group | Konva.Nodeparent?: Konva.Stage | Konva.Layer | Konva.Group | Konva.Node}[] = [{ target: groupTarget }]while (nodes.length > 0) {const item = nodes.shift()if (item) {const node = item.targetif (node instanceof Konva.Image) {if (node.attrs.svgXML) {const n = await this.loadSvgXML(node.attrs.svgXML)n.listening(false)node.parent?.add(n)node.remove()} else if (node.attrs.gif) {const n = await this.loadGif(node.attrs.gif)n.listening(false)node.parent?.add(n)node.remove()} else if (node.attrs.src) {const n = await this.loadImg(node.attrs.src)n.listening(false)node.parent?.add(n)node.remove()}}if (node instanceof Konva.Stage ||node instanceof Konva.Layer ||node instanceof Konva.Group) {nodes.push(...node.getChildren().map((o) => ({target: o,parent: node})))}}}// 作用：点击空白区域可选择const clickMask = new Konva.Rect({id: 'click-mask',width: groupTarget.width(),height: groupTarget.height()})groupTarget.add(clickMask)clickMask.zIndex(1)return groupTarget} catch (e) {console.error(e)return new Konva.Group()}}

loadJson，关键逻辑说明：

1、jsonIdCover 把加载到的 json 内部的 id 们刷新一遍

2、借一个空 stage 得到一个空 stage 的 json 结构（由于素材 json 只包含素材自身结构，需要补充上层 json 结构）

3、加载拼接好的 json，得到一个新 stage

4、从 3 的 stage 中提取目标素材 group

5、加载该 group 内部的图片素材

6、插入一个透明 Rect，使其点击 sub-asset 们之间的空白，也能选中整个 asset

最后，进行一次 linkTool.groupIdCover 处理：

// src/Render/tools/LinkTool.ts// 把深层 group 的 id 统一为顶层 group 的 idgroupIdCover(group: Konva.Group) {const groupId = group.id()const subGroups = group.find('.sub-asset') as Konva.Group[]while (subGroups.length > 0) {const subGroup = subGroups.shift() as Konva.Group | undefinedif (subGroup) {const points = subGroup.attrs.pointsif (Array.isArray(points)) {for (const point of points) {point.rawGroupId = point.groupIdpoint.groupId = groupIdfor (const pair of point.pairs) {pair.from.rawGroupId = pair.from.groupIdpair.from.groupId = groupIdpair.to.rawGroupId = pair.to.groupIdpair.to.groupId = groupId}}}subGroups.push(...(subGroup.find('.sub-asset') as Konva.Group[]))}}}

这里的逻辑就是把顶层 asset 的新id，通过广度优先遍历，下发到下面所有的 point 和 pair 上，并保留原来的 groupId（上面的 rawGroupId）为日后备用。groupId 更新之后，在连接线算法执行的时候，会忽略同个 asset 下不同 sub-asset 的 pair 关系，即不会重复绘制内部不同 sub-asset 之间实时连接线（连接线在另存为素材 json 的时候，已经直接固化成 Line 实例了，往后将跟随根 asset 行动，特别是 transform 变换）。

接着，因为这次的实现，内部属于各 sub-asset 的 point 依旧有效，首先，调整一下 pointsVisible，使其在 hover 根 asset 的时候，内部所有 point 都会显现：

// src/Render/tools/LinkTool.tspointsVisible(visible: boolean, group?: Konva.Group) {const start = group ?? this.render.layer// 查找深层 pointsfor (const asset of [...(['asset', 'sub-asset'].includes(start.name()) ? [start] : []),...start.find('.asset'),...start.find('.sub-asset')]) {const points = asset.getAttr('points') ?? []asset.setAttrs({points: points.map((o: any) => ({ ...o, visible }))})}// 重绘this.render.redraw()}

然后，关键要调整 LinkDraw：

// src/Render/draws/LinkDraw.tsoverride draw() {// 略// 所有层级的素材const groups = [...(this.render.layer.find('.asset') as Konva.Group[]),...(this.render.layer.find('.sub-asset') as Konva.Group[])]// 略const pairs = points.reduce((ps, point) => {return ps.concat(point.pairs ? point.pairs.filter((o) => !o.disabled) : [])}, [] as LinkDrawPair[])// 略// 连接线for (const pair of pairs) {// 多层素材，需要排除内部 pair 对// pair 也不能为 disabledif (pair.from.groupId !== pair.to.groupId && !pair.disabled) {// 略}}
}