完成水印功能、新增水印文档

2026-02-17 22:08:25 +08:00 · 2023-01-17 09:20:37 +08:00
parent 5bd6adb488
commit 63eccede7f
21 changed files with 666 additions and 11 deletions
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -11,6 +11,7 @@ import Export from './src/Export'
 import Select from './src/Select'
 import Drag from './src/Drag'
 import MiniMap from './src/MiniMap'
+import Watermark from './src/Watermark'
 import { layoutValueList } from './src/utils/constant'
 import { SVG } from '@svgdotjs/svg.js'
 import xmind from './src/parse/xmind'
@@ -53,7 +54,19 @@ const defaultOpt = {
        }
    */
  // 是否开启节点自由拖拽
-  enableFreeDrag: false
+  enableFreeDrag: false,
+  // 水印配置
+  watermarkConfig: {
+    text: '',
+    lineSpacing: 100,
+    textSpacing: 100,
+    angle: 30,
+    textStyle: {
+      color: '#999',
+      opacity: 0.5,
+      fontSize: 14
+    }
+  }
 }

 //  思维导图
@@ -132,6 +145,11 @@ class MindMap {
      mindMap: this
    })

+    // 水印类
+    this.watermark = new Watermark({
+      mindMap: this
+    })
+
    // 批量执行类
    this.batchExecution = new BatchExecution()

--- a/simple-mind-map/scripts/changeComments.js
+++ b/simple-mind-map/scripts/changeComments.js
@@ -1,4 +1,4 @@
-// 将/** */类型的注释转换为//类型
+// 遍历所有js文件
 const path = require('path')
 const fs = require('fs')

@@ -11,13 +11,26 @@ const transform = dir => {
    if (fs.statSync(file).isDirectory()) {
      transform(file)
    } else if (/\.js$/.test(file)) {
-      rewriteComments(file)
+      transformFile(file)
    }
  })
 }

-const rewriteComments = file => {
+const transformFile = file => {
+  console.log(file);
  let content = fs.readFileSync(file, 'utf-8')
+  countCodeLines(content)
+  // transformComments(file, content)
+}
+
+// 统计代码行数
+let totalLines = 0
+const countCodeLines = (content) => {
+  totalLines += content.split(/\n/).length
+}
+
+// 转换注释类型
+const transformComments = (file, content) => {
  console.log('当前转换文件：', file)
  content = content.replace(/\/\*\*[^/]+\*\//g, str => {
    let res = /@Desc:([^\n]+)\n/g.exec(str)
@@ -29,4 +42,5 @@ const rewriteComments = file => {
 }

 transform(entryPath)
-rewriteComments(path.join(__dirname, '../index.js'))
+transformFile(path.join(__dirname, '../index.js'))
+console.log(totalLines);
--- a/simple-mind-map/src/Watermark.js
+++ b/simple-mind-map/src/Watermark.js
@@ -0,0 +1,111 @@
+import { Text, G } from '@svgdotjs/svg.js'
+import { degToRad, camelCaseToHyphen } from './utils'
+import merge from 'deepmerge'
+
+// 水印类
+export default class Watermark {
+  constructor(opt = {}) {
+    this.mindMap = opt.mindMap
+    this.lineSpacing = 0 // 水印行间距
+    this.textSpacing = 0 // 行内水印间距
+    this.angle = 0 // 旋转角度
+    this.text = '' // 水印文字
+    this.textStyle = {} // 水印文字样式
+    this.watermarkDraw = this.mindMap.svg
+      .group()
+      .css({ 'pointer-events': 'none', 'user-select': 'none' })
+    this.maxLong = Math.sqrt(
+      Math.pow(this.mindMap.width, 2) + Math.pow(this.mindMap.height, 2)
+    )
+    this.updateWatermark(this.mindMap.opt.watermarkConfig || {})
+  }
+
+  // 处理水印配置
+  handleConfig({ text, lineSpacing, textSpacing, angle, textStyle }) {
+    this.text = text === undefined ? '' : String(text).trim()
+    this.lineSpacing =
+      typeof lineSpacing === 'number' && lineSpacing > 0 ? lineSpacing : 100
+    this.textSpacing =
+      typeof textSpacing === 'number' && textSpacing > 0 ? textSpacing : 100
+    this.angle =
+      typeof angle === 'number' && angle >= 0 && angle <= 90 ? angle : 30
+    this.textStyle = Object.assign(this.textStyle, textStyle || {})
+  }
+
+  // 绘制水印
+  // 非精确绘制，会绘制一些超出可视区域的水印
+  draw() {
+    this.watermarkDraw.clear()
+    if (!this.text.trim()) {
+      return
+    }
+    let x = 0
+    while (x < this.mindMap.width) {
+      this.drawText(x)
+      x += this.lineSpacing / Math.sin(degToRad(this.angle))
+    }
+
+    let yOffset =
+      this.lineSpacing / Math.cos(degToRad(this.angle)) || this.lineSpacing
+    let y = yOffset
+    while (y < this.mindMap.height) {
+      this.drawText(0, y)
+      y += yOffset
+    }
+  }
+
+  // 绘制文字
+  drawText(x, y) {
+    let long = Math.min(
+      this.maxLong,
+      (this.mindMap.width - x) / Math.cos(degToRad(this.angle))
+    )
+    let g = new G()
+    let bbox = null
+    let bboxWidth = 0
+    let textHeight = -1
+    while (bboxWidth < long) {
+      let text = new Text().text(this.text)
+      g.add(text)
+      text.transform({
+        translateX: bboxWidth
+      })
+      this.setTextStyle(text)
+      bbox = g.bbox()
+      if (textHeight === -1) {
+        textHeight = bbox.height
+      }
+      bboxWidth = bbox.width + this.textSpacing
+    }
+    let params = {
+      rotate: this.angle,
+      origin: 'top left',
+      translateX: x,
+      translateY: textHeight
+    }
+    if (y !== undefined) {
+      params.translateY = y + textHeight
+    }
+    g.transform(params)
+    this.watermarkDraw.add(g)
+  }
+
+  // 给文字设置样式
+  setTextStyle(text) {
+    Object.keys(this.textStyle).forEach(item => {
+      let value = this.textStyle[item]
+      if (item === 'color') {
+        text.fill(value)
+      } else {
+        text.css(camelCaseToHyphen(item), value)
+      }
+    })
+  }
+
+  // 更新水印
+  updateWatermark(config) {
+    this.mindMap.opt.watermarkConfig = merge(this.mindMap.opt.watermarkConfig, config)
+    this.handleConfig(config)
+    this.draw()
+  }
+}
--- a/simple-mind-map/src/utils/index.js
+++ b/simple-mind-map/src/utils/index.js
@@ -224,3 +224,15 @@ export const asyncRun = (taskList, callback = () => {}) => {
  }
  loop()
 }
+
+// 角度转弧度
+export const degToRad = deg => {
+  return deg * (Math.PI / 180)
+}
+
+// 驼峰转连字符 
+export const camelCaseToHyphen = (str) => {
+  return str.replace(/([a-z])([A-Z])/g, (...args) => {
+    return args[1] + '-' + args[2].toLowerCase()
+  })
+}
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -22,7 +22,17 @@ export default {
    nodeBorderType: 'Node border style',
    nodeUseLineStyle: 'Use only has bottom border style',
    otherConfig: 'Other config',
-    enableFreeDrag: 'Enable node free drag'
+    enableFreeDrag: 'Enable node free drag',
+    watermark: 'Watermark',
+    showWatermark: 'Is show watermark',
+    watermarkDefaultText: 'Watermark text',
+    watermarkText: 'Watermark text',
+    watermarkTextColor: 'Text color',
+    watermarkLineSpacing: 'Line spacing',
+    watermarkTextSpacing: 'Text spacing',
+    watermarkAngle: 'Angle',
+    watermarkTextOpacity: 'Text opacity',
+    watermarkTextFontSize: 'Font size'
  },
  color: {
    moreColor: 'More color'
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -22,7 +22,17 @@ export default {
    nodeBorderType: '节点边框风格',
    nodeUseLineStyle: '是否使用只有底边框的风格',
    otherConfig: '其他配置',
-    enableFreeDrag: '是否开启节点自由拖拽'
+    enableFreeDrag: '是否开启节点自由拖拽',
+    watermark: '水印',
+    showWatermark: '是否显示水印',
+    watermarkDefaultText: '水印文字',
+    watermarkText: '水印文字',
+    watermarkTextColor: '文字颜色',
+    watermarkLineSpacing: '水印行间距',
+    watermarkTextSpacing: '水印文字间距',
+    watermarkAngle: '旋转角度',
+    watermarkTextOpacity: '文字透明度',
+    watermarkTextFontSize: '文字字号'
  },
  color: {
    moreColor: '更多颜色'
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -18,6 +18,7 @@ let APIList = [
  'view',
  'miniMap',
  'doExport',
+  'watermark',
  'keyCommand',
  'keyboardNavigation',
  'command',
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -83,6 +83,17 @@ package
 | customNoteContentShow（v0.1.6+） | Object  | null             | Custom node note content display, object type, structure: {show: (noteContent, left, top) => {// your display node note logic }, hide: () => {// your hide node note logic }} |          |
 | readonly（v0.1.7+）              | Boolean | false            | Whether it is read-only mode                                 |          |
 | enableFreeDrag（v0.2.4+）        | Boolean | false            | Enable node free drag                                        |          |
+| watermarkConfig（v0.2.4+）       | Object  |                  | Watermark config, Please refer to the table 【Watermark config】 below for detailed configuration |          |
+
+### Watermark config
+
+| Field Name  | Type   | Default Value                               | Description                                                  |
+| ----------- | ------ | ------------------------------------------- | ------------------------------------------------------------ |
+| text        | String | ''                                          | Watermark text. If it is an empty string, the watermark will not be displayed |
+| lineSpacing | Number | 100                                         | Spacing between watermark lines                              |
+| textSpacing | Number | 100                                         | Spacing between watermarks in the same row                   |
+| angle       | Number | 30                                          | Tilt angle of watermark, range: [0, 90]                      |
+| textStyle   | Object | {color: '#999', opacity: 0.5, fontSize: 14} | Watermark text style                                         |

 ## Static methods

--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -158,6 +158,63 @@ package</p>
 <td>Whether it is read-only mode</td>
 <td></td>
 </tr>
+<tr>
+<td>enableFreeDrag（v0.2.4+）</td>
+<td>Boolean</td>
+<td>false</td>
+<td>Enable node free drag</td>
+<td></td>
+</tr>
+<tr>
+<td>watermarkConfig（v0.2.4+）</td>
+<td>Object</td>
+<td></td>
+<td>Watermark config, Please refer to the table 【Watermark config】 below for detailed configuration</td>
+<td></td>
+</tr>
+</tbody>
+</table>
+<h3>Watermark config</h3>
+<table>
+<thead>
+<tr>
+<th>Field Name</th>
+<th>Type</th>
+<th>Default Value</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>text</td>
+<td>String</td>
+<td>''</td>
+<td>Watermark text. If it is an empty string, the watermark will not be displayed</td>
+</tr>
+<tr>
+<td>lineSpacing</td>
+<td>Number</td>
+<td>100</td>
+<td>Spacing between watermark lines</td>
+</tr>
+<tr>
+<td>textSpacing</td>
+<td>Number</td>
+<td>100</td>
+<td>Spacing between watermarks in the same row</td>
+</tr>
+<tr>
+<td>angle</td>
+<td>Number</td>
+<td>30</td>
+<td>Tilt angle of watermark, range: [0, 90]</td>
+</tr>
+<tr>
+<td>textStyle</td>
+<td>Object</td>
+<td>{color: '#999', opacity: 0.5, fontSize: 14}</td>
+<td>Watermark text style</td>
+</tr>
 </tbody>
 </table>
 <h2>Static methods</h2>
@@ -350,6 +407,23 @@ in the options table above.</p>
 <p>Gets the custom theme configuration.</p>
 <h3>getThemeConfig(prop)</h3>
 <p>Gets the value of a specific theme configuration property.</p>
+<h3>getConfig(<em>prop</em>)</h3>
+<blockquote>
+<p>0.2.24+</p>
+</blockquote>
+<p><code>prop</code>：Get the value of the specified configuration, and return the entire configuration if not passed</p>
+<p>Get config, That is,  <code>opt</code> of <code>new MindMap (opt)</code></p>
+<h3>updateConfig(<em>opt</em> = {})</h3>
+<blockquote>
+<p>0.2.24+</p>
+</blockquote>
+<p><code>opt</code>：Configuration to update</p>
+<p>Update config，That is update <code>opt</code> of <code>new MindMap(opt)</code>，You can only update some data, such as:</p>
+<pre class="hljs"><code>mindMap.updateConfig({
+    <span class="hljs-attr">enableFreeDrag</span>: <span class="hljs-literal">true</span><span class="hljs-comment">// 开启节点自由拖拽</span>
+})
+</code></pre>
+<p>This method only updates the configuration and has no other side effects, such as triggering canvas re-rendering</p>
 <h3>getLayout()</h3>
 <p>Gets the current layout structure.</p>
 <h3>setLayout(layout)</h3>
--- a/web/src/pages/Doc/en/utils/index.md
+++ b/web/src/pages/Doc/en/utils/index.md
@@ -93,4 +93,16 @@ Throttle function

 ### asyncRun(taskList, callback = () => {})

-Run tasks in task list asynchronously, tasks are run synchronously without order
+Run tasks in task list asynchronously, tasks are run synchronously without order
+
+### degToRad(deg)
+
+> v0.2.24+
+
+Angle to radian
+
+### camelCaseToHyphen(str)
+
+> v0.2.24+
+
+CamelCase to hyphen
--- a/web/src/pages/Doc/en/utils/index.vue
+++ b/web/src/pages/Doc/en/utils/index.vue
@@ -51,6 +51,16 @@ and copying the <code>data</code> of the data object, example:</p>
 <p>Throttle function</p>
 <h3>asyncRun(taskList, callback = () =&gt; {})</h3>
 <p>Run tasks in task list asynchronously, tasks are run synchronously without order</p>
+<h3>degToRad(deg)</h3>
+<blockquote>
+<p>v0.2.24+</p>
+</blockquote>
+<p>Angle to radian</p>
+<h3>camelCaseToHyphen(str)</h3>
+<blockquote>
+<p>v0.2.24+</p>
+</blockquote>
+<p>CamelCase to hyphen</p>

  </div>
 </template>
--- a/web/src/pages/Doc/en/watermark/index.md
+++ b/web/src/pages/Doc/en/watermark/index.md
@@ -0,0 +1,32 @@
+# Watermark instance
+
+> 0.2.24+
+
+`Watermark` instance is responsible for displaying the watermark, and can be obtained
+through `mindMap.watermark`.
+
+## Methods
+
+### draw()
+
+Redraw the watermark.
+
+Note: For imprecise rendering, some watermarks beyond the visible area will be drawn. If you have extreme performance requirements, it is recommended to develop the watermark function yourself.
+
+### updateWatermark(config)
+
+Update watermark config. Example:
+
+```js
+mindMap.watermark.updateWatermark({
+    text: 'Watermark text',
+    lineSpacing: 100,
+    textSpacing: 100,
+    angle: 50,
+    textStyle: {
+      color: '#000',
+      opacity: 1,
+      fontSize: 20
+    }
+})
+```
--- a/web/src/pages/Doc/en/watermark/index.vue
+++ b/web/src/pages/Doc/en/watermark/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <h1>Watermark instance</h1>
+<blockquote>
+<p>0.2.24+</p>
+</blockquote>
+<p><code>Watermark</code> instance is responsible for displaying the watermark, and can be obtained
+through <code>mindMap.watermark</code>.</p>
+<h2>Methods</h2>
+<h3>draw()</h3>
+<p>Redraw the watermark.</p>
+<p>Note: For imprecise rendering, some watermarks beyond the visible area will be drawn. If you have extreme performance requirements, it is recommended to develop the watermark function yourself.</p>
+<h3>updateWatermark(config)</h3>
+<p>Update watermark config. Example:</p>
+<pre class="hljs"><code>mindMap.watermark.updateWatermark({
+    <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;Watermark text&#x27;</span>,
+    <span class="hljs-attr">lineSpacing</span>: <span class="hljs-number">100</span>,
+    <span class="hljs-attr">textSpacing</span>: <span class="hljs-number">100</span>,
+    <span class="hljs-attr">angle</span>: <span class="hljs-number">50</span>,
+    <span class="hljs-attr">textStyle</span>: {
+      <span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;#000&#x27;</span>,
+      <span class="hljs-attr">opacity</span>: <span class="hljs-number">1</span>,
+      <span class="hljs-attr">fontSize</span>: <span class="hljs-number">20</span>
+    }
+})
+</code></pre>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -1,3 +1,3 @@

-        export default [{"lang":"zh","children":[{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"doExport","title":"DoExport实例"},{"path":"introduction","title":"简介"},{"path":"keyboardNavigation","title":"KeyboardNavigation实例"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"miniMap","title":"MiniMap实例"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"select","title":"Select实例"},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"}]},{"lang":"en","children":[{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"DoExport instance"},{"path":"introduction","title":"Introduction"},{"path":"keyboardNavigation","title":"KeyboardNavigation instance"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"miniMap","title":"MiniMap instance"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"select","title":"Select instance"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"}]}]
+        export default [{"lang":"zh","children":[{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"doExport","title":"DoExport实例"},{"path":"introduction","title":"简介"},{"path":"keyboardNavigation","title":"KeyboardNavigation实例"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"miniMap","title":"MiniMap实例"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"select","title":"Select实例"},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"},{"path":"watermark","title":"Watermark实例"}]},{"lang":"en","children":[{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"DoExport instance"},{"path":"introduction","title":"Introduction"},{"path":"keyboardNavigation","title":"KeyboardNavigation instance"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"miniMap","title":"MiniMap instance"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"select","title":"Select instance"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"},{"path":"watermark","title":"Watermark instance"}]}]
    
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -73,6 +73,19 @@ console.log(MindMap.xmind)
 | customNoteContentShow（v0.1.6+） | Object  | null             | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }} |          |
 | readonly（v0.1.7+）              | Boolean | false            | 是否是只读模式                                               |          |
 | enableFreeDrag（v0.2.4+）        | Boolean | false            | 是否开启节点自由拖拽                                         |          |
+| watermarkConfig（v0.2.4+）       | Object  |                  | 水印配置，详细配置请参考下方表格【水印配置】                 |          |
+
+### 水印配置
+
+| 字段名称    | 类型   | 默认值                                      | 描述                                 |
+| ----------- | ------ | ------------------------------------------- | ------------------------------------ |
+| text        | String | ''                                          | 水印文字，如果为空字符串则不显示水印 |
+| lineSpacing | Number | 100                                         | 水印每行之间的间距                   |
+| textSpacing | Number | 100                                         | 同一行水印之间的间距                 |
+| angle       | Number | 30                                          | 水印的倾斜角度，范围：[0, 90]        |
+| textStyle   | Object | {color: '#999', opacity: 0.5, fontSize: 14} | 水印文字样式                         |
+
+

 ## 静态方法

--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -148,6 +148,63 @@
 <td>是否是只读模式</td>
 <td></td>
 </tr>
+<tr>
+<td>enableFreeDrag（v0.2.4+）</td>
+<td>Boolean</td>
+<td>false</td>
+<td>是否开启节点自由拖拽</td>
+<td></td>
+</tr>
+<tr>
+<td>watermarkConfig（v0.2.4+）</td>
+<td>Object</td>
+<td></td>
+<td>水印配置，详细配置请参考下方表格【水印配置】</td>
+<td></td>
+</tr>
+</tbody>
+</table>
+<h3>水印配置</h3>
+<table>
+<thead>
+<tr>
+<th>字段名称</th>
+<th>类型</th>
+<th>默认值</th>
+<th>描述</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>text</td>
+<td>String</td>
+<td>''</td>
+<td>水印文字，如果为空字符串则不显示水印</td>
+</tr>
+<tr>
+<td>lineSpacing</td>
+<td>Number</td>
+<td>100</td>
+<td>水印每行之间的间距</td>
+</tr>
+<tr>
+<td>textSpacing</td>
+<td>Number</td>
+<td>100</td>
+<td>同一行水印之间的间距</td>
+</tr>
+<tr>
+<td>angle</td>
+<td>Number</td>
+<td>30</td>
+<td>水印的倾斜角度，范围：[0, 90]</td>
+</tr>
+<tr>
+<td>textStyle</td>
+<td>Object</td>
+<td>{color: '#999', opacity: 0.5, fontSize: 14}</td>
+<td>水印文字样式</td>
+</tr>
 </tbody>
 </table>
 <h2>静态方法</h2>
@@ -332,6 +389,23 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <p>获取自定义主题配置</p>
 <h3>getThemeConfig(prop)</h3>
 <p>获取某个主题配置属性值</p>
+<h3>getConfig(<em>prop</em>)</h3>
+<blockquote>
+<p>0.2.24+</p>
+</blockquote>
+<p><code>prop</code>：获取指定配置的值，不传则返回整个配置</p>
+<p>获取配置，即<code>new MindMap(opt)</code>的<code>opt</code></p>
+<h3>updateConfig(<em>opt</em> = {})</h3>
+<blockquote>
+<p>0.2.24+</p>
+</blockquote>
+<p><code>opt</code>：要更新的配置</p>
+<p>更新配置，即更新<code>new MindMap(opt)</code>的<code>opt</code>，可以只更新部分数据，比如：</p>
+<pre class="hljs"><code>mindMap.updateConfig({
+    <span class="hljs-attr">enableFreeDrag</span>: <span class="hljs-literal">true</span><span class="hljs-comment">// 开启节点自由拖拽</span>
+})
+</code></pre>
+<p>该方法只做更新配置的事情，没有其他副作用，比如触发画布重新渲染之类的</p>
 <h3>getLayout()</h3>
 <p>获取当前的布局结构</p>
 <h3>setLayout(layout)</h3>
--- a/web/src/pages/Doc/zh/utils/index.md
+++ b/web/src/pages/Doc/zh/utils/index.md
@@ -88,4 +88,16 @@ copyNodeTree({}, node)

 ### asyncRun(taskList, callback = () => {})

-异步执行任务队列，多个任务是同步执行的，没有先后顺序
+异步执行任务队列，多个任务是同步执行的，没有先后顺序
+
+### degToRad(deg)
+
+> v0.2.24+
+
+角度转弧度
+
+### camelCaseToHyphen(str)
+
+> v0.2.24+
+
+驼峰转连字符
--- a/web/src/pages/Doc/zh/utils/index.vue
+++ b/web/src/pages/Doc/zh/utils/index.vue
@@ -46,6 +46,16 @@
 <p>节流函数</p>
 <h3>asyncRun(taskList, callback = () =&gt; {})</h3>
 <p>异步执行任务队列，多个任务是同步执行的，没有先后顺序</p>
+<h3>degToRad(deg)</h3>
+<blockquote>
+<p>v0.2.24+</p>
+</blockquote>
+<p>角度转弧度</p>
+<h3>camelCaseToHyphen(str)</h3>
+<blockquote>
+<p>v0.2.24+</p>
+</blockquote>
+<p>驼峰转连字符</p>

  </div>
 </template>
--- a/web/src/pages/Doc/zh/watermark/index.md
+++ b/web/src/pages/Doc/zh/watermark/index.md
@@ -0,0 +1,31 @@
+# Watermark实例
+
+> 0.2.24+
+
+`Watermark`实例负责显示水印，可通过`mindMap.watermark`获取到该实例。
+
+## 方法
+
+### draw()
+
+重新绘制水印。
+
+注意：非精确绘制，会绘制一些超出可视区域的水印，如果对性能有极致要求，推荐自行开发水印功能。
+
+### updateWatermark(config)
+
+更新水印配置。示例：
+
+```js
+mindMap.watermark.updateWatermark({
+    text: '水印文字',
+    lineSpacing: 100,
+    textSpacing: 100,
+    angle: 50,
+    textStyle: {
+      color: '#000',
+      opacity: 1,
+      fontSize: 20
+    }
+})
+```
--- a/web/src/pages/Doc/zh/watermark/index.vue
+++ b/web/src/pages/Doc/zh/watermark/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <h1>Watermark实例</h1>
+<blockquote>
+<p>0.2.24+</p>
+</blockquote>
+<p><code>Watermark</code>实例负责显示水印，可通过<code>mindMap.watermark</code>获取到该实例。</p>
+<h2>方法</h2>
+<h3>draw()</h3>
+<p>重新绘制水印。</p>
+<p>注意：非精确绘制，会绘制一些超出可视区域的水印，如果对性能有极致要求，推荐自行开发水印功能。</p>
+<h3>updateWatermark(config)</h3>
+<p>更新水印配置。示例：</p>
+<pre class="hljs"><code>mindMap.watermark.updateWatermark({
+    <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;水印文字&#x27;</span>,
+    <span class="hljs-attr">lineSpacing</span>: <span class="hljs-number">100</span>,
+    <span class="hljs-attr">textSpacing</span>: <span class="hljs-number">100</span>,
+    <span class="hljs-attr">angle</span>: <span class="hljs-number">50</span>,
+    <span class="hljs-attr">textStyle</span>: {
+      <span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;#000&#x27;</span>,
+      <span class="hljs-attr">opacity</span>: <span class="hljs-number">1</span>,
+      <span class="hljs-attr">fontSize</span>: <span class="hljs-number">20</span>
+    }
+})
+</code></pre>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@@ -299,6 +299,78 @@
          ></el-slider>
        </div>
      </div>
+      <!-- 水印 -->
+      <div class="title noTop">{{ $t('baseStyle.watermark') }}</div>
+      <div class="row">
+        <!-- 是否显示水印 -->
+        <div class="rowItem">
+          <el-checkbox v-model="watermarkConfig.show" @change="watermarkShowChange">{{ $t('baseStyle.showWatermark') }}</el-checkbox>
+        </div>
+      </div>
+      <template v-if="watermarkConfig.show">
+        <!-- 水印文字 -->
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">{{ $t('baseStyle.watermarkText') }}</span>
+            <el-input v-model="watermarkConfig.text" size="small" @change="updateWatermarkConfig"></el-input>
+          </div>
+        </div>
+        <!-- 水印文字颜色 -->
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">{{ $t('baseStyle.watermarkTextColor') }}</span>
+            <span
+              class="block"
+              v-popover:popover3
+              :style="{ backgroundColor: watermarkConfig.textStyle.color }"
+            ></span>
+            <el-popover ref="popover3" placement="bottom" trigger="click">
+              <Color
+                :color="watermarkConfig.textStyle.color"
+                @change="(value) => {
+                  watermarkConfig.textStyle.color = value
+                  updateWatermarkConfig()
+                }"
+              ></Color>
+            </el-popover>
+          </div>
+        </div>
+        <!-- 水印文字透明度 -->
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">{{ $t('baseStyle.watermarkTextOpacity') }}</span>
+            <el-slider v-model="watermarkConfig.textStyle.opacity" style="width: 170px" :min="0" :max="1" :step="0.1" @change="updateWatermarkConfig"></el-slider>
+          </div>
+        </div>
+        <!-- 水印文字字号 -->
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">{{ $t('baseStyle.watermarkTextFontSize') }}</span>
+            <el-input-number v-model="watermarkConfig.textStyle.fontSize" size="small" :min="0" :max="50" :step="1" @change="updateWatermarkConfig"></el-input-number>
+          </div>
+        </div>
+        <!-- 旋转角度 -->
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">{{ $t('baseStyle.watermarkAngle') }}</span>
+            <el-input-number v-model="watermarkConfig.angle" size="small" :min="0" :max="90" :step="10" @change="updateWatermarkConfig"></el-input-number>
+          </div>
+        </div>
+        <!-- 水印行间距 -->
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">{{ $t('baseStyle.watermarkLineSpacing') }}</span>
+            <el-input-number v-model="watermarkConfig.lineSpacing" size="small" :step="10" @change="updateWatermarkConfig"></el-input-number>
+          </div>
+        </div>
+        <!-- 水印文字间距 -->
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">{{ $t('baseStyle.watermarkTextSpacing') }}</span>
+            <el-input-number v-model="watermarkConfig.textSpacing" size="small" :step="10" @change="updateWatermarkConfig"></el-input-number>
+          </div>
+        </div>
+      </template>
      <!-- 其他配置 -->
      <div class="title noTop">{{ $t('baseStyle.otherConfig') }}</div>
      <div class="row">
@@ -368,7 +440,20 @@ export default {
      },
      config: {
        enableFreeDrag: false
-      }
+      },
+      watermarkConfig: {
+        show: false,
+        text: '',
+        lineSpacing: 100,
+        textSpacing: 100,
+        angle: 30,
+        textStyle: {
+          color: '',
+          opacity: 0,
+          fontSize: 1
+        }
+      },
+      updateWatermarkTimer: null
    }
  },
  computed: {
@@ -387,6 +472,7 @@ export default {
        this.$refs.sidebar.show = true
        this.initStyle()
        this.initConfig()
+        this.initWatermark()
      } else {
        this.$refs.sidebar.show = false
      }
@@ -430,6 +516,16 @@ export default {
      })
    },

+    // 初始化水印配置
+    initWatermark() {
+      let config = this.mindMap.getConfig('watermarkConfig')
+      ;['text', 'lineSpacing', 'textSpacing', 'angle'].forEach((key) => {
+        this.watermarkConfig[key] = config[key]
+      })
+      this.watermarkConfig.show = !!config.text
+      this.watermarkConfig.textStyle = { ...config.textStyle }
+    },
+
    /**
     * @Author: 王林
     * @Date: 2021-07-03 22:27:32
@@ -476,6 +572,21 @@ export default {
      })
    },

+    // 更新水印配置
+    updateWatermarkConfig() {
+      clearTimeout(this.updateWatermarkTimer)
+      this.updateWatermarkTimer = setTimeout(() => {
+        let {show, ...config} = this.watermarkConfig
+        this.mindMap.watermark.updateWatermark({
+          ...config
+        })
+        this.data.config.watermarkConfig = this.mindMap.getConfig('watermarkConfig')
+        storeConfig({
+          config: this.data.config
+        })
+      }, 300);
+    },
+
    /**
     * @Author: 王林
     * @Date: 2021-07-03 22:08:12
@@ -488,6 +599,17 @@ export default {
      }
      this.data.theme.config[this.marginActiveTab][type] = value
      this.mindMap.setThemeConfig(this.data.theme.config)
+    },
+
+    // 切换显示水印与否
+    watermarkShowChange(value) {
+      if (value) {
+        let text = this.watermarkConfig.text || this.$t('baseStyle.watermarkDefaultText')
+        this.watermarkConfig.text = text
+      } else {
+        this.watermarkConfig.text = ''
+      }
+      this.updateWatermarkConfig()
    }
  }
 }
@@ -542,6 +664,7 @@ export default {
      .name {
        font-size: 12px;
        margin-right: 10px;
+        white-space: nowrap;
      }

      .block {