-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Open
Labels
bugSomething isn't workingSomething isn't working
Description
发生了什么?
使用插件 Snapshot 导出图片时,选择导出 png 格式的图片可以导出完整的流程图,选择导出 svg 格式只导出了可见区域的流程图。参数 partial 对 svg 无效。
操作步骤:放大至只显示部分区域后,分别保存 png 和 svg 格式的图片。
<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
Labels
bugSomething isn't workingSomething isn't working


