AntV X6/Xflow 导出 svg/png/jpeg 问题解决

AntV X6/Xflow 导出 svg/png/jpeg 问题解决

导出 svg/png/jpeg 时，处于画布边缘的节点的连接桩或 label 标签显示不完整

问题截图：

界面

导出的图片

解决办法：

1. 导出 png/jpeg 格式可以通过设置Export.ToImageOptions的 padding 解决
2. 导出 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 })
}

如有更好的解决办法，欢迎在评论区交流讨论

效果展示：

更多问题可查阅以下链接

• X6 导出问题汇总
• X6 开发实践
• X6 github issues