X6流程图携带自定义样式导出
时间: 2023-06-10 15:06:54 浏览: 78
要携带自定义样式导出X6流程图,需要遵循以下步骤:
1. 创建一个新的X6 Graph实例,并在其中添加自定义节点和边的样式。可以使用X6的Shape和Connector API来创建自定义样式。
```js
const graph = new X6.Graph({
container: document.getElementById('graph-container'),
// 添加自定义节点样式
nodeStyles: {
customNode: {
shape: 'rect',
width: 100,
height: 50,
attrs: {
body: {
fill: '#ff9c6e',
stroke: '#333',
strokeWidth: 1,
rx: 10,
ry: 10,
},
},
},
},
// 添加自定义边样式
edgeStyles: {
customEdge: {
shape: 'edge',
attrs: {
line: {
stroke: '#333',
strokeWidth: 2,
targetMarker: {
name: 'classic',
size: 8,
},
},
},
},
},
});
```
2. 创建一个新的X6 Graph的模板,并将自定义节点和边加入其中。
```js
const template = new X6.Graph({
// 添加自定义节点样式
nodeStyles: {
customNode: {
shape: 'rect',
width: 100,
height: 50,
attrs: {
body: {
fill: '#ff9c6e',
stroke: '#333',
strokeWidth: 1,
rx: 10,
ry: 10,
},
},
},
},
// 添加自定义边样式
edgeStyles: {
customEdge: {
shape: 'edge',
attrs: {
line: {
stroke: '#333',
strokeWidth: 2,
targetMarker: {
name: 'classic',
size: 8,
},
},
},
},
},
});
// 添加自定义节点
const customNode = template.createNode({
x: 100,
y: 100,
width: 100,
height: 50,
shape: 'customNode',
label: 'Custom Node',
attrs: {
label: {
fill: '#fff',
},
},
});
// 添加自定义边
const sourceNode = template.createNode({
x: 200,
y: 200,
width: 100,
height: 50,
label: 'Source Node',
attrs: {
body: {
fill: '#9b9b9b',
},
label: {
fill: '#fff',
},
},
});
const targetNode = template.createNode({
x: 400,
y: 200,
width: 100,
height: 50,
label: 'Target Node',
attrs: {
body: {
fill: '#9b9b9b',
},
label: {
fill: '#fff',
},
},
});
const customEdge = template.createEdge({
source: sourceNode,
target: targetNode,
shape: 'customEdge',
});
// 将模板隐藏,避免在导出时显示
template.hide();
```
3. 将要导出的X6 Graph的节点和边添加到模板中,并使用X6的Exporter API导出为PNG或SVG格式的图片。
```js
// 添加要导出的节点和边
graph.addNode(customNode);
graph.addNode(sourceNode);
graph.addNode(targetNode);
graph.addEdge(customEdge);
// 导出PNG格式图片
X6.Exporter.exportPng(graph, {
width: graph.getContentSize().width,
height: graph.getContentSize().height,
}).then((dataUri) => {
// 在新窗口中打开图片
const newWindow = window.open();
newWindow.document.write(`<img src="${dataUri}" />`);
});
// 导出SVG格式图片
X6.Exporter.exportSvg(graph, {
width: graph.getContentSize().width,
height: graph.getContentSize().height,
}).then((svg) => {
// 在新窗口中打开SVG
const newWindow = window.open();
newWindow.document.write(svg);
});
```
4. 如果要在导出的图片中包含自定义样式,需要将自定义样式的CSS代码添加到导出的图片中。
```js
// 导出SVG格式图片,并添加自定义样式的CSS代码
X6.Exporter.exportSvg(graph, {
width: graph.getContentSize().width,
height: graph.getContentSize().height,
}).then((svg) => {
// 在新窗口中打开SVG,并添加自定义样式的CSS代码
const newWindow = window.open();
newWindow.document.write(`
<style>
.customNode rect {
fill: #ff9c6e;
stroke: #333;
stroke-width: 1;
rx: 10;
ry: 10;
}
.customEdge path {
stroke: #333;
stroke-width: 2;
marker-end: url(#classic);
}
</style>
${svg}
`);
});
```