feat:add watermark

src/editor/core/draw/Draw.ts

@@ -31,6 +31,7 @@ import { Header } from "./frame/Header"
 import { SuperscriptParticle } from "./particle/Superscript"
 import { SubscriptParticle } from "./particle/Subscript"
 import { SeparatorParticle } from "./particle/Separator"
+import { Watermark } from "./frame/Watermark"
 
 export class Draw {
 
@@ -59,6 +60,7 @@ export class Draw {
   private tableParticle: TableParticle
   private tableTool: TableTool
   private pageNumber: PageNumber
+  private waterMark: Watermark
   private header: Header
   private hyperlinkParticle: HyperlinkParticle
   private separatorParticle: SeparatorParticle
@@ -102,6 +104,7 @@ export class Draw {
     this.tableParticle = new TableParticle(this)
     this.tableTool = new TableTool(this)
     this.pageNumber = new PageNumber(this)
+    this.waterMark = new Watermark(this)
     this.header = new Header(this)
     this.hyperlinkParticle = new HyperlinkParticle(this)
     this.separatorParticle = new SeparatorParticle()
@@ -697,6 +700,10 @@ export class Draw {
     if (this.searchMatchList) {
       this.search.render(ctx, pageNo)
     }
+    // 绘制水印
+    if (this.options.watermark.data) {
+      this.waterMark.render(ctx)
+    }
   }
 
   public render(payload?: IDrawOption) {

src/editor/core/draw/frame/Watermark.ts

@@ -0,0 +1,33 @@
+import { IEditorOption } from "../../.."
+import { DeepRequired } from "../../../interface/Common"
+import { Draw } from "../Draw"
+
+export class Watermark {
+
+  private draw: Draw
+  private options: DeepRequired<IEditorOption>
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.options = <DeepRequired<IEditorOption>>draw.getOptions()
+  }
+
+  public render(ctx: CanvasRenderingContext2D) {
+    const { watermark: { data, opacity, font, size, color }, scale } = this.options
+    const width = this.draw.getWidth()
+    const height = this.draw.getHeight()
+    const x = width / 2
+    const y = height / 2
+    ctx.save()
+    ctx.globalAlpha = opacity
+    ctx.font = `${size * scale}px ${font}`
+    ctx.fillStyle = color
+    // 移动到中心位置再旋转
+    const measureText = ctx.measureText(data)
+    ctx.translate(x, y)
+    ctx.rotate(-45 * Math.PI / 180)
+    ctx.fillText(data, - measureText.width / 2, measureText.actualBoundingBoxAscent - size / 2)
+    ctx.restore()
+  }
+
+}

src/editor/index.ts

@@ -16,6 +16,7 @@ import { IContextMenuContext, IRegisterContextMenu } from './interface/contextme
 import { EditorComponent } from './dataset/enum/Editor'
 import { EDITOR_COMPONENT } from './dataset/constant/Editor'
 import { IHeader } from './interface/Header'
+import { IWatermark } from './interface/Watermark'
 
 export default class Editor {
 
@@ -31,6 +32,14 @@ export default class Editor {
       font: 'Yahei',
       ...options.header
     }
+    const waterMarkOptions: Required<IWatermark> = {
+      data: '',
+      color: '#AEB5C0',
+      opacity: 0.3,
+      size: 200,
+      font: 'Yahei',
+      ...options.watermark
+    }
     const editorOptions: Required<IEditorOption> = {
       defaultType: 'TEXT',
       defaultFont: 'Yahei',
@@ -62,7 +71,8 @@ export default class Editor {
       defaultHyperlinkColor: '#0000FF',
       headerTop: 50,
       ...options,
-      header: headerOptions
+      header: headerOptions,
+      watermark: waterMarkOptions
     }
     formatElementList(elementList)
     // 监听

src/editor/interface/Editor.ts

@@ -1,5 +1,6 @@
 import { IElement } from ".."
 import { IHeader } from "./Header"
+import { IWatermark } from "./Watermark"
 
 export interface IEditorOption {
   defaultType?: string;
@@ -32,6 +33,7 @@ export interface IEditorOption {
   defaultHyperlinkColor?: string;
   headerTop?: number;
   header?: IHeader;
+  watermark?: IWatermark;
 }
 
 export interface IEditorResult {

src/editor/interface/Watermark.ts

@@ -0,0 +1,7 @@
+export interface IWatermark {
+  data: string;
+  color?: string;
+  opacity?: number;
+  size?: number;
+  font?: string;
+}

src/main.ts

@@ -211,6 +211,9 @@ window.onload = function () {
     margins: [100, 120, 100, 120],
     header: {
       data: '人民医院门诊'
+    },
+    watermark: {
+      data: '严禁复制'
     }
   })
   console.log('实例: ', instance)