前端使用 Konva 實現可視化設計器（7）- 導入導出、上一步、下一步

請大家動動小手，給我一個免費的 Star 吧~

這一章實現導入導出爲JSON文件、另存爲圖片、上一步、下一步。

github源碼

gitee源碼

示例地址

導出爲JSON文件

提取需要導出的內容

  getView() {
    // 複製畫布
    const copy = this.render.stage.clone()
    // 提取 main layer 備用
    const main = copy.find('#main')[0] as Konva.Layer
    // 暫時清空所有 layer
    copy.removeChildren()

    // 提取節點
    let nodes = main.getChildren((node) => {
      return !this.render.ignore(node) && !this.render.ignoreDraw(node)
    })

    // 重新裝載節點
    const layer = new Konva.Layer()
    layer.add(...nodes)
    nodes = layer.getChildren()

    // 計算節點佔用的區域
    let minX = 0
    let maxX = copy.width()
    let minY = 0
    let maxY = copy.height()
    for (const node of nodes) {
      const x = node.x()
      const y = node.y()
      const width = node.width()
      const height = node.height()

      if (x < minX) {
        minX = x
      }
      if (x + width > maxX) {
        maxX = x + width
      }
      if (y < minY) {
        minY = y
      }
      if (y + height > maxY) {
        maxY = y + height
      }

      if (node.attrs.nodeMousedownPos) {
        // 修正正在選中的節點透明度
        node.setAttrs({
          opacity: copy.attrs.lastOpacity ?? 1
        })
      }
    }

    // 重新裝載 layer
    copy.add(layer)

    // 節點佔用的區域
    copy.setAttrs({
      x: -minX,
      y: -minY,
      scale: { x: 1, y: 1 },
      width: maxX - minX,
      height: maxY - minY
    })

    // 返回可視節點和 layer
    return copy
  }

1、首先複製一份畫布
2、取出 main layer
3、篩選目標節點
4、計算目標節點佔用區域
5、調整拷貝畫布的位置和大小

導出 JSON

使用 stage 的 toJSON 即可。

  // 保存
  save() {
    const copy = this.getView()

    // 通過 stage api 導出 json
    return copy.toJSON()
  }

導入 JSON，恢復畫布

相比導出，過程會比較複雜一些。

恢復節點結構

  // 恢復
  async restore(json: string, silent = false) {
    try {
      // 清空選擇
      this.render.selectionTool.selectingClear()

      // 清空 main layer 節點
      this.render.layer.removeChildren()

      // 加載 json，提取節點
      const container = document.createElement('div')
      const stage = Konva.Node.create(json, container)
      const main = stage.getChildren()[0]
      const nodes = main.getChildren()

      // 恢復節點圖片素材
      await this.restoreImage(nodes)

      // 往 main layer 插入新節點
      this.render.layer.add(...nodes)

      // 上一步、下一步 無需更新 history 記錄
      if (!silent) {
        // 更新歷史
        this.render.updateHistory()
      }
    } catch (e) {
      console.error(e)
    }
  }

1、清空選擇
2、清空 main layer 節點
3、創建臨時 stage
4、通過 Konva.Node.create 恢復 JSON 定義的節點結構
5、恢復圖片素材（關鍵）

恢復圖片素材

  // 加載 image（用於導入）
  loadImage(src: string) {
    return new Promise<HTMLImageElement | null>((resolve) => {
      const img = new Image()
      img.onload = () => {
        // 返回加載完成的圖片 element
        resolve(img)
      }
      img.onerror = () => {
        resolve(null)
      }
      img.src = src
    })
  }
  // 恢復圖片（用於導入）
  async restoreImage(nodes: Konva.Node[] = []) {
    for (const node of nodes) {
      if (node instanceof Konva.Group) {
        // 遞歸
        await this.restoreImage(node.getChildren())
      } else if (node instanceof Konva.Image) {
        // 處理圖片
        if (node.attrs.svgXML) {
          // svg 素材
          const blob = new Blob([node.attrs.svgXML], { type: 'image/svg+xml' })
          // dataurl
          const url = URL.createObjectURL(blob)
          // 加載爲圖片 element
          const image = await this.loadImage(url)
          if (image) {
            // 設置圖片
            node.image(image)
          }
        } else if (node.attrs.gif) {
          // gif 素材
          const imageNode = await this.render.assetTool.loadGif(node.attrs.gif)
          if (imageNode) {
            // 設置圖片
            node.image(imageNode.image())
          }
        } else if (node.attrs.src) {
          // 其他圖片素材
          const image = await this.loadImage(node.attrs.src)
          if (image) {
            // 設置圖片
            node.image(image)
          }
        }
      }
    }
  }

關於恢復 svg，關鍵在於拖入 svg 的時候，記錄了完整的 svg xml 在屬性 svgXML 中。

關於恢復 gif、其他圖片，拖入的時候記錄其 src 地址，就可以恢復到節點中。

上一步、下一步

其實就是需要記錄歷史記錄

歷史記錄

  history: string[] = []
  historyIndex = -1

  updateHistory() {
    this.history.splice(this.historyIndex + 1)
    this.history.push(this.importExportTool.save())
    this.historyIndex = this.history.length - 1
    // 歷史變化事件
    this.config.on?.historyChange?.(_.clone(this.history), this.historyIndex)
  }

1、從當前歷史位置，捨棄後面的記錄
2、從當前歷史位置，覆蓋最新的 JSON 記錄
3、更新位置
4、暴露事件（用於外部判斷歷史狀態，以此禁用、啓用上一步、下一步）

更新歷史記錄

一切會產生變動的位置都執行 updateHistory，如拖入素材、移動節點、改變節點位置、改變節點大小、複製粘貼節點、刪除節點、改變節點的層次。具體代碼就不貼了，只是在影響的地方執行一句：

this.render.updateHistory()

上一步、下一步方法

  prevHistory() {
    const record = this.history[this.historyIndex - 1]
    if (record) {
      this.importExportTool.restore(record, true)
      this.historyIndex--
      // 歷史變化事件
      this.config.on?.historyChange?.(_.clone(this.history), this.historyIndex)
    }
  }

  nextHistory() {
    const record = this.history[this.historyIndex + 1]
    if (record) {
      this.importExportTool.restore(record, true)
      this.historyIndex++
      // 歷史變化事件
      this.config.on?.historyChange?.(_.clone(this.history), this.historyIndex)
    }
  }

另存爲圖片

  // 獲取圖片
  getImage(pixelRatio = 1, bgColor?: string) {
    // 獲取可視節點和 layer
    const copy = this.getView()

    // 背景層
    const bgLayer = new Konva.Layer()

    // 背景矩形
    const bg = new Konva.Rect({
      listening: false
    })
    bg.setAttrs({
      x: -copy.x(),
      y: -copy.y(),
      width: copy.width(),
      height: copy.height(),
      fill: bgColor
    })

    // 添加背景
    bgLayer.add(bg)

    // 插入背景
    const children = copy.getChildren()
    copy.removeChildren()
    copy.add(bgLayer)
    copy.add(children[0], ...children.slice(1))

    // 通過 stage api 導出圖片
    return copy.toDataURL({ pixelRatio })
  }

主要關注有2點：
1、插入背景層
2、設置導出圖片的尺寸

導出的時候，其實就是把當前矢量、非矢量素材統一輸出爲非矢量的圖片，設置導出圖片的尺寸越大，可以保留更多的矢量素材細節。

接下來，計劃實現下面這些功能：

• 實時預覽窗
• 對齊效果
• 連接線
• 等等。。。

是不是值得更多的 Star 呢？勾勾手指~

源碼

gitee源碼

示例地址