Feat:支持仅在导出时显示水印的配置选项

This commit is contained in:
街角小林 2023-12-25 10:12:43 +08:00
parent 9ea36a852f
commit 2bcf763ea2
3 changed files with 39 additions and 16 deletions

View File

@ -407,20 +407,34 @@ class MindMap {
draw.translate(-rect.x + elRect.left, -rect.y + elRect.top) draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
// 克隆一份数据 // 克隆一份数据
let clone = svg.clone() let clone = svg.clone()
// 如果实际图形宽高超出了屏幕宽高,且存在水印的话需要重新绘制水印,否则会出现超出部分没有水印的问题 // 是否存在水印
if ( const hasWatermark = this.watermark && this.watermark.hasWatermark()
!ignoreWatermark && if (!ignoreWatermark && hasWatermark) {
(rect.width > origWidth || rect.height > origHeight) && this.watermark.isInExport = true
this.watermark && // 是否是仅导出时需要水印
this.watermark.hasWatermark() const { onlyExport } = this.opt.watermarkConfig
) { // 是否需要重新绘制水印
this.width = rect.width const needReDrawWatermark =
this.height = rect.height rect.width > origWidth || rect.height > origHeight
this.watermark.onResize() // 如果实际图形宽高超出了屏幕宽高,且存在水印的话需要重新绘制水印,否则会出现超出部分没有水印的问题
clone = svg.clone() if (needReDrawWatermark) {
this.width = origWidth this.width = rect.width
this.height = origHeight this.height = rect.height
this.watermark.onResize() this.watermark.onResize()
clone = svg.clone()
this.width = origWidth
this.height = origHeight
this.watermark.onResize()
} else if (onlyExport) {
// 如果是仅导出时需要水印,那么需要进行绘制
this.watermark.onResize()
clone = svg.clone()
}
// 如果是仅导出时需要水印,需要清除
if (onlyExport) {
this.watermark.clear()
}
this.watermark.isInExport = false
} }
// 添加必要的样式 // 添加必要的样式
clone.add(SVG(`<style>${cssContent}</style>`)) clone.add(SVG(`<style>${cssContent}</style>`))

View File

@ -40,6 +40,7 @@ export const defaultOpt = {
enableFreeDrag: false, enableFreeDrag: false,
// 水印配置 // 水印配置
watermarkConfig: { watermarkConfig: {
onlyExport: false,// 是否仅在导出时添加水印
text: '', text: '',
lineSpacing: 100, lineSpacing: 100,
textSpacing: 100, textSpacing: 100,

View File

@ -12,6 +12,7 @@ class Watermark {
this.text = '' // 水印文字 this.text = '' // 水印文字
this.textStyle = {} // 水印文字样式 this.textStyle = {} // 水印文字样式
this.watermarkDraw = null // 容器 this.watermarkDraw = null // 容器
this.isInExport = false // 是否是在导出过程中
this.maxLong = this.getMaxLong() this.maxLong = this.getMaxLong()
this.updateWatermark(this.mindMap.opt.watermarkConfig || {}) this.updateWatermark(this.mindMap.opt.watermarkConfig || {})
this.bindEvent() this.bindEvent()
@ -72,11 +73,18 @@ class Watermark {
this.textStyle = Object.assign(this.textStyle, textStyle || {}) this.textStyle = Object.assign(this.textStyle, textStyle || {})
} }
// 清除水印
clear() {
if (this.watermarkDraw) this.watermarkDraw.clear()
}
// 绘制水印 // 绘制水印
// 非精确绘制,会绘制一些超出可视区域的水印 // 非精确绘制,会绘制一些超出可视区域的水印
draw() { draw() {
// 清空之前的水印 this.clear()
if (this.watermarkDraw) this.watermarkDraw.clear() // 如果是仅导出需要水印,那么非导出中不渲染
const { onlyExport } = this.mindMap.opt.watermarkConfig
if (onlyExport && !this.isInExport) return
// 如果没有水印数据,那么水印容器也删除掉 // 如果没有水印数据,那么水印容器也删除掉
if (!this.hasWatermark()) { if (!this.hasWatermark()) {
this.removeContainer() this.removeContainer()