Skip to content

[Bug Report]: 使用插件 Snapshot 导出svg格式的图片时,配置了 partial: false,但只导出了可见区域的流程图 #2294

@wei-X7

Description

@wei-X7

发生了什么?

使用插件 Snapshot 导出图片时,选择导出 png 格式的图片可以导出完整的流程图,选择导出 svg 格式只导出了可见区域的流程图。参数 partial 对 svg 无效。

操作步骤:放大至只显示部分区域后,分别保存 png 和 svg 格式的图片。

放大后的效果:
Image

PNG 格式:
Image

SVG 格式:
Image

<template>
  <div>
    <div class="container" ref="container"></div>
    <button @click="handleClick('png')">保存PNG</button>
    <button @click="handleClick('svg')">保存SVG</button>
  </div>
</template>

<script>
import LogicFlow from "@logicflow/core";
import "@logicflow/core/lib/style/index.css";
import { Snapshot } from "@logicflow/extension";

export default {
  name: 'lf-Demo',
  data() {
    return {
      renderData: {
        // 节点数据
        nodes: [
          {
            id: '21', // 节点ID,需要全局唯一,不传入内部会自动生成一个ID
            type: 'rect', // 节点类型,可以传入LogicFlow内置的7种节点类型,也可以注册自定义节点后传入自定义类型
            x: 100, // 节点形状中心在x轴位置
            y: 100, // 节点形状中心在y轴的位置
            text: 'Origin Usage-rect', // 节点文本
            properties: { // 自定义属性,用于存储需要这个节点携带的信息,可以传入宽高以重设节点的宽高
              width: 160,
              height: 80,
            }
          },
          {
            id: '50',
            type: 'circle',
            x: 300,
            y: 300,
            text: 'Origin Usage-circle',
            properties: {
              r: 60,
            }
          },
        ],
        // 边数据
        edges: [
          {
            id: 'rect-2-circle', // 边ID,性质与节点ID一样
            type: 'polyline', // 边类型
            sourceNodeId: '50', // 起始节点Id
            targetNodeId: '21', // 目标节点Id
          },
        ],
      }
    }
  },
  mounted() {
    this.lf = new LogicFlow({
      container: this.$refs.container,
      grid: true,
      plugins: [Snapshot]
    });
    this.lf.render(this.renderData);
  },
  methods: {
    handleClick(fileType) {
      this.lf.getSnapshot("test", {
        fileType,
        partial: false
      })
    }
  }
};
</script>

<style scoped>
.container {
  width: 800px;
  height: 500px;
}
</style>

logicflow/core版本

2.1.2

logicflow/extension版本

2.1.4

logicflow/engine版本

No response

浏览器&环境

Chrome

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions