Feat:新增处理导出前的svg对象的实例化选项

This commit is contained in:
街角小林 2024-06-13 09:32:32 +08:00
parent b7d906d1ea
commit 4f5746680d
3 changed files with 13 additions and 5 deletions

View File

@ -518,7 +518,6 @@ class MindMap {
// 恢复原先的大小和变换信息 // 恢复原先的大小和变换信息
svg.size(origWidth, origHeight) svg.size(origWidth, origHeight)
draw.transform(origTransform) draw.transform(origTransform)
return { return {
svg: clone, // 思维导图图形的整体svg元素包括svg画布容器、g实际的思维导图组 svg: clone, // 思维导图图形的整体svg元素包括svg画布容器、g实际的思维导图组
svgHTML: clone.svg(), // svg字符串 svgHTML: clone.svg(), // svg字符串

View File

@ -293,6 +293,9 @@ export const defaultOpt = {
*/ */
addContentToHeader: null, addContentToHeader: null,
addContentToFooter: null, addContentToFooter: null,
// 导出png、svg、pdf时会获取画布上的svg数据进行克隆然后通过该克隆的元素进行导出如果你想对该克隆元素做一些处理比如新增、替换、修改其中的一些元素那么可以通过该参数传递一个处理函数接收svg元素对象处理后需要返回原svg元素对象。
// 需要注意的是svg对象指的是@svgdotjs/svg.js库的元素对象所以你需要阅读该库的文档来操作该对象
handleBeingExportSvg: null,
// 【AssociativeLine插件】 // 【AssociativeLine插件】
// 关联线默认文字 // 关联线默认文字

View File

@ -54,7 +54,8 @@ class Export {
errorHandler, errorHandler,
resetCss, resetCss,
addContentToHeader, addContentToHeader,
addContentToFooter addContentToFooter,
handleBeingExportSvg
} = this.mindMap.opt } = this.mindMap.opt
let { svg, svgHTML, clipData } = this.mindMap.getSvgData({ let { svg, svgHTML, clipData } = this.mindMap.getSvgData({
paddingX: exportPaddingX, paddingX: exportPaddingX,
@ -67,6 +68,7 @@ class Export {
clipData.paddingX = exportPaddingX clipData.paddingX = exportPaddingX
clipData.paddingY = exportPaddingY clipData.paddingY = exportPaddingY
} }
let svgIsChange = false
// svg的image标签把图片的url转换成data:url类型否则导出会丢失图片 // svg的image标签把图片的url转换成data:url类型否则导出会丢失图片
const task1 = this.createTransformImgTaskList( const task1 = this.createTransformImgTaskList(
svg, svg,
@ -87,16 +89,20 @@ class Export {
errorHandler(ERROR_TYPES.EXPORT_LOAD_IMAGE_ERROR, error) errorHandler(ERROR_TYPES.EXPORT_LOAD_IMAGE_ERROR, error)
} }
// 开启了节点富文本编辑,需要增加一些样式 // 开启了节点富文本编辑,需要增加一些样式
let isAddResetCss
if (this.mindMap.richText) { if (this.mindMap.richText) {
const foreignObjectList = svg.find('foreignObject') const foreignObjectList = svg.find('foreignObject')
if (foreignObjectList.length > 0) { if (foreignObjectList.length > 0) {
foreignObjectList[0].add(SVG(`<style>${resetCss}</style>`)) foreignObjectList[0].add(SVG(`<style>${resetCss}</style>`))
isAddResetCss = true svgIsChange = true
} }
} }
// 自定义处理svg的方法
if (typeof handleBeingExportSvg === 'function') {
svgIsChange = true
svg = handleBeingExportSvg(svg)
}
// svg节点内容有变需要重新获取html字符串 // svg节点内容有变需要重新获取html字符串
if (taskList.length > 0 || isAddResetCss) { if (taskList.length > 0 || svgIsChange) {
svgHTML = svg.svg() svgHTML = svg.svg()
} }
return { return {