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

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

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

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

github源码

gitee源码

示例地址

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

// src/Render/handlers/DragOutsideHandlers.ts

drop: (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 = target
      this.render.linkTool.groupIdCover(group)
    }
  })
  // 略
}

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

// src/Render/tools/AssetTool.ts

  // 加载节点 json
  async loadJson(src: string) {
   
    try {
   
      // 读取 json内容
      const json = JSON.parse(await (await fetch(src)).text())

      // 子素材
      const assets = json.children

      // 刷新id
      this.render.linkTool.jsonIdCover(assets)

      // 生成空白 stage+layer
      const stageEmpty = new Konva.Stage({
   
        container: document.createElement('div')
      })
      const layerEmpty = new Konva.Layer(