AntV X6/Xflow 导出 svg/png/jpeg 问题解决
导出 svg/png/jpeg 时，处于画布边缘的节点的连接桩或 label 标签显示不完整
问题截图：
界面
导出的图片
解决办法：
- 导出 png/jpeg 格式可以通过设置Export.ToImageOptions的
padding解决 - 导出 svg 格式，Export.ToSVGOptions暂无直接可用的
padding配置，所以我的方式是使用getContentBBox获取画布内容的矩形区域，并进行一定的数值增减，将其作为导出时的viewbox
import React, { useEffect, useRef } from 'react'
import { Graph, Rectangle, useExport, useGraphInstance } from '@antv/xflow'
const handleExportPng = () => {
exportPNG('png-chart', { padding: 20 })
}
const handleExportJpeg = () => {
exportJPEG('jpeg-chart', { padding: 20 })
}
const handleExportSvg = () => {
const box = graph.current?.getContentBBox()
const { x, y, width, height } = box as Rectangle
const viewBox = {
x: x - 20,
y: y - 20,
width: width + 40,
height: height + 40
}
exportSVG('svg-chart', { viewBox })
}
如有更好的解决办法，欢迎在评论区交流讨论
