前端使用 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) {