• 前端使用 Konva 实现可视化设计器(9)- 另存为SVG


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

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

    github源码

    gitee源码

    示例地址

    另存为SVG

    这一章增强了另存为的能力,实现“另存为SVG”,大概是全网唯一的实例分享了吧。

    灵感来源:react-konva-custom-context-canvas-for-use-with-canvas2svg

    大神提到了 canvas2svg,表达了可以通过创建一个 canvas2svg 的实例,作为 CanvasRenderingContext2D 替换了 Konva 原有 canvas 的 CanvasRenderingContext2D,并使其 layer 重绘,canvas2svg 的实例借此监听 canvas 的动作,转换成 Svg 动作,最终生成 svg 内容。

    不过,大神的例子,并没有说明如何处理并导出图片节点

    通过测试大神的例子,并观察导出的 svg xml 特点,以下是基本实现思路和注意事项:
    1、必须通过替换 layer 的 context 实现,通过 stage 是无效的。
    2、导出的 svg xml,图片节点将以 svg 的 image 节点存在。
    3、svg 图片素材节点的 xlink:href 以 blob: 链接定义。
    4、其它图片素材节点的 xlink:href 是以一般路径链接定义。
    5、通过正则表达式提取图片素材节点链接。
    6、fetch svg 图片素材节点链接,获得 svg xml 文本。
    7、fetch 其它图片素材节点,获得 blob 后,转换为 base64 链接。
    8、替换 canvas2svg 导出的 svg xml 内的 svg 图片素材节点为内嵌 svg 节点(xml)。
    9、替换 canvas2svg 导出的 svg xml 内的其它图片素材节点的 xlink:href 为 base64 链接
    10、导出替换完成的 svg xml。

    关键逻辑

    功能入口

    主要是 canvas2svg 的使用,获得原始的 rawSvg xml 内容:

      // 获取Svg
      async getSvg() {
        // 获取可视节点和 layer
        const copy = this.getView()
        // 获取 main layer
        const main = copy.children[0] as Konva.Layer
        // 获取 layer 的 canvas context
        const ctx = main.canvas.context._context
    
        if (ctx) {
          // 创建 canvas2svg
          const c2s = new C2S({ ctx, ...main.size() })
          // 替换 layer 的 canvas context
          main.canvas.context._context = c2s
          // 重绘
          main.draw()
    
          // 获得 svg
          const rawSvg = c2s.getSerializedSvg()
          // 替换 image 链接
          const svg = await this.parseImage(rawSvg)
    
          // 输出 svg
          return svg
        }
        return Promise.resolve(
          ``
        )
      }
    

    替换 image 链接方法

    根据 xlink:href 链接的特点,通过正则表达式提取,用于后续处理:

    
      // 替换 image 链接
      parseImage(xml: string): Promise<string> {
        return new Promise((resolve) => {
          // 找出 blob:http 图片链接(目前发现只有 svg 是)
          const svgs = xml.match(/(?<=xlink:href=")blob:https?:\/\/[^"]+(?=")/g) ?? []
          // 其他图片转为 base64
          const imgs = xml.match(/(?<=xlink:href=")(?) ?? []
    
          Promise.all([this.parseSvgImage(svgs), this.parseOtherImage(imgs)]).then(
            ([svgXmls, imgUrls]) => {
              // svg xml
              svgs.forEach((svg, idx) => {
                // 替换
                xml = xml.replace(
                  new RegExp(`<]* xlink:href="${svg}"[^><]*/>`),
                  svgXmls[idx].match(/<]*>.*<\/svg>/)?.[0] ?? '' // 仅保留 svg 结构
                )
              })
    
              // base64
              imgs.forEach((img, idx) => {
                // 替换
                xml = xml.replace(`"${img}"`, `"${imgUrls[idx]}"`)
              })
    
              // 替换完成
              resolve(xml)
            }
          )
        })
      }
    

    替换 svg blob: 链接

    批量 fetch svg blob: 链接,获得 xml 内容:

      // 替换 svg blob: 链接
      parseSvgImage(urls: string[]): Promise<string[]> {
        return new Promise((resolve) => {
          if (urls.length > 0) {
            Promise.all(urls.map((o) => fetch(o))).then((rs: Response[]) => {
              // fetch
    
              // 替换为 svg 嵌套
              Promise.all(rs.map((o) => o.text())).then((xmls: string[]) => {
                // svg xml
                resolve(xmls)
              })
            })
          } else {
            resolve([])
          }
        })
      }
    

    替换其他 image 链接

    批量 fetch 图片链接,获得 base64 链接:

      // blob to base64 url
      blobToBase64(blob: Blob, type: string): Promise<string> {
        return new Promise((resolve) => {
          const file = new File([blob], 'image', { type })
          const fileReader = new FileReader()
          fileReader.readAsDataURL(file)
          fileReader.onload = function () {
            resolve((this.result as string) ?? '')
          }
        })
      }
    
      // 替换其他 image 链接
      parseOtherImage(urls: string[]): Promise<string[]> {
        return new Promise((resolve) => {
          if (urls.length > 0) {
            Promise.all(urls.map((o) => fetch(o))).then((rs: Response[]) => {
              // fetch
    
              // 替换为 base64 url image
              Promise.all(rs.map((o) => o.blob())).then((bs: Blob[]) => {
                // blob
                Promise.all(bs.map((o) => this.blobToBase64(o, 'image/*'))).then((urls: string[]) => {
                  // base64
                  resolve(urls)
                })
              })
            })
          } else {
            resolve([])
          }
        })
      }
    

    过程示例

    通过 canvas2svg 获得原始的 rawSvg xml 内容:

    image

    
    
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="428" height="448">
      <defs/>
      <g>
        <rect fill="#FFFFFF" stroke="none" x="0" y="0" width="428" height="448"/>
        <g transform="matrix(1,0,0,1,69,80)">
          
          <image width="200" height="200" preserveAspectRatio="none" xlink:href="data:image/png;base64,略..."/>
          <g transform="translate(0,0)"/>
        g>
        <g transform="matrix(1,0,0,1,17,22)">
          
          <image width="64" height="64" preserveAspectRatio="none" xlink:href="/src/assets/img/png/2.png"/>
          <g transform="translate(0,0)"/>
        g>
        <g transform="matrix(1,0,0,1,228,232)">
          
          <image width="200" height="200" preserveAspectRatio="none" xlink:href="blob:http://localhost:5173/da9ddae7-2ac7-47fb-99c0-e7171aa41655"/>
          <g transform="translate(0,0)"/>
        g>
      g>
    svg>
    
    

    替换之后:

    
    
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="428" height="448">
      <defs/>
      <g>
        <rect fill="#FFFFFF" stroke="none" x="0" y="0" width="428" height="448"/>
        <g transform="matrix(1,0,0,1,69,80)">
          
          <image width="200" height="200" preserveAspectRatio="none" xlink:href="data:image/*;base64,略..."/>
          <g transform="translate(0,0)"/>
        g>
        <g transform="matrix(1,0,0,1,17,22)">
          
          <image width="64" height="64" preserveAspectRatio="none" xlink:href="data:image/*;base64,略..."/>
          <g transform="translate(0,0)"/>
        g>
        <g transform="matrix(1,0,0,1,228,232)">
          
          <svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1">
            <path d="M512 0c282.763636 0 512 229.236364 512 512S794.763636 1024 512 1024 0 794.763636 0 512 229.236364 0 512 0z m0 11.636364C235.659636 11.636364 11.636364 235.659636 11.636364 512s224.023273 500.363636 500.363636 500.363636 500.363636-224.023273 500.363636-500.363636S788.340364 11.636364 512 11.636364z m-114.781091 683.927272c38.388364 6.632727 63.767273 22.853818 103.133091 61.556364l7.563636 7.528727 19.502546 19.921455c4.736 4.770909 9.262545 9.216 13.637818 13.370182l6.434909 6.004363c1.047273 0.965818 2.094545 1.908364 3.141818 2.839273l6.132364 5.352727c30.196364 25.728 53.946182 35.735273 87.226182 36.398546 69.992727 1.361455 119.936-22.027636 150.621091-70.272l2.094545-3.397818 9.972364 6.004363c-32.756364 54.318545-87.354182 80.779636-162.909091 79.290182-41.262545-0.814545-68.817455-14.650182-107.333818-50.583273l-6.714182-6.376727-6.946909-6.818909-7.226182-7.272727-15.709091-16.069819-7.284364-7.26109c-37.922909-37.329455-61.777455-52.596364-97.314909-58.740364-67.397818-11.659636-122.705455 10.24-166.725818 66.106182l-2.792727 3.607272-9.262546-7.028363c47.045818-61.940364 107.578182-86.807273 180.759273-74.158546z"/>
          svg>
          <g transform="translate(0,0)"/>
        g>
      g>
    svg>
    

    关于 gif,实测内嵌于 svg 中是无法显示的,现在除了 svg 图片素材节点,其它图片素材统一按静态图片处理。

    image

    磁贴

    增加了对 stage 逻辑边界的磁贴:
    image

    其它调整

    staget 逻辑区域

    原来 stage 的逻辑区域和比例尺的区域是重叠一致的(大小一致,默认根据比例尺大小对齐 0 点而已),实在有点变扭,可能会让人产生疑惑。
    现已经调整 stage 的逻辑区域即为默认可视区域(区别可以观察红色虚线框的改变)。
    顺便使得预览框的交互优化的更符合直觉。

    官方的 API 的 Bug

    Bug: 恢复 JSON 时候,如果存在已经被放大缩小点元素,点击选择无效
    原因不详,Hack 了一下,暂时可以消除影响。

    接下来,计划实现下面这些功能:

    • 对齐效果
    • 连接线
    • 等等。。。

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

    源码

    gitee源码

    示例地址

  • 相关阅读:
    什么是泛型
    梳理思绪的过程
    在IDEA中如何使用tomcat部署项目
    记一次dump文件分析历程
    PyTorch 中的【高级索引】 或 【花式索引】
    Qt使用QSettings类来读写ini
    RT-Thread 中断管理(学习)
    程序分析与优化 - 5 指针分析
    如何安全驾驭物联网视频革命
    Hbase TimeStamp的妙用
  • 原文地址:https://www.cnblogs.com/xachary/p/18178115