feat: add page number format option to watermark #981

docs/en/guide/option.md

@@ -58,7 +58,7 @@ interface IEditorOption {
   contextMenuDisableKeys?: string[] // Disable context menu keys. default: []
   scrollContainerSelector?: string // scroll container selector. default: document
   wordBreak?: WordBreak // Word and punctuation breaks: No punctuation in the first line of the BREAK_WORD &The word is not split, and the line is folded after BREAK_ALL full according to the width of the character. default: BREAK_WORD
-  watermark?: IWatermark // Watermark{data:string; color?:string; opacity?:number; size?:number; font?:string;}
+  watermark?: IWatermark // Watermark{data:string; color?:string; opacity?:number; size?:number; font?:string; numberType:NumberType;}
   control?: IControlOption // Control {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string; borderWidth?: number; borderColor?: string; activeBackgroundColor?: string;}
   checkbox?: ICheckboxOption // Checkbox {width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string; verticalAlign?: VerticalAlign;}
   radio?: IRadioOption // Radio {width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string; verticalAlign?: VerticalAlign;}
@@ -138,6 +138,7 @@ interface IWatermark {
   font?: string // font. default: Microsoft YaHei
   repeat?: boolean // repeat watermark. default: false
   gap?: [horizontal: number, vertical: number] // watermark spacing. default: [10,10]
+  numberType?: NumberType // The numeric type. default: ARABIC
 }
 ```
 

docs/guide/option.md

@@ -58,7 +58,7 @@ interface IEditorOption {
   contextMenuDisableKeys?: string[] // 禁用的右键菜单。默认：[]
   scrollContainerSelector?: string // 滚动区域选择器。默认：document
   wordBreak?: WordBreak // 单词与标点断行：BREAK_WORD首行不出现标点&单词不拆分、BREAK_ALL按字符宽度撑满后折行。默认：BREAK_WORD
-  watermark?: IWatermark // 水印信息。{data:string; color?:string; opacity?:number; size?:number; font?:string;}
+  watermark?: IWatermark // 水印信息。{data:string; color?:string; opacity?:number; size?:number; font?:string; numberType:NumberType;}
   control?: IControlOption // 控件信息。 {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string; borderWidth?: number; borderColor?: string; activeBackgroundColor?: string;}
   checkbox?: ICheckboxOption // 复选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string; verticalAlign?: VerticalAlign;}
   radio?: IRadioOption // 单选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string; verticalAlign?: VerticalAlign;}
@@ -138,6 +138,7 @@ interface IWatermark {
   font?: string // 字体。默认：Microsoft YaHei
   repeat?: boolean // 重复水印。默认：false
   gap?: [horizontal: number, vertical: number] // 水印间距。默认：[10,10]
+  numberType: NumberType.ARABIC // 页码格式。默认：{pageNo}。示例：第{pageNo}页/共{pageCount}页
 }
 ```
 

src/editor/core/draw/Draw.ts

@@ -2437,7 +2437,7 @@ export class Draw {
     }
     // 绘制水印
     if (pageMode !== PageMode.CONTINUITY && this.options.watermark.data) {
-      this.waterMark.render(ctx)
+      this.waterMark.render(ctx, pageNo)
     }
     // 绘制页边距
     if (!isPrintMode) {

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

@@ -15,6 +15,19 @@ export class PageNumber {
     this.options = draw.getOptions()
   }
 
+  static formatNumberPlaceholder(
+    text: string,
+    pageNo: number,
+    replaceReg: RegExp,
+    numberType: NumberType
+  ) {
+    const pageNoText =
+      numberType === NumberType.CHINESE
+        ? convertNumberToChinese(pageNo)
+        : `${pageNo}`
+    return text.replace(replaceReg, pageNoText)
+  }
+
   public render(ctx: CanvasRenderingContext2D, pageNo: number) {
     const {
       scale,
@@ -34,21 +47,21 @@ export class PageNumber {
     let text = format
     const pageNoReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_NO)
     if (pageNoReg.test(text)) {
-      const realPageNo = pageNo + startPageNo - fromPageNo
-      const pageNoText =
-        numberType === NumberType.CHINESE
-          ? convertNumberToChinese(realPageNo)
-          : `${realPageNo}`
-      text = text.replace(pageNoReg, pageNoText)
+      text = PageNumber.formatNumberPlaceholder(
+        text,
+        pageNo + startPageNo - fromPageNo,
+        pageNoReg,
+        numberType
+      )
     }
     const pageCountReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_COUNT)
     if (pageCountReg.test(text)) {
-      const pageCount = this.draw.getPageCount() - fromPageNo
-      const pageCountText =
-        numberType === NumberType.CHINESE
-          ? convertNumberToChinese(pageCount)
-          : `${pageCount}`
-      text = text.replace(pageCountReg, pageCountText)
+      text = PageNumber.formatNumberPlaceholder(
+        text,
+        this.draw.getPageCount() - fromPageNo,
+        pageCountReg,
+        numberType
+      )
     }
     const width = this.draw.getWidth()
     // 计算y位置

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

@@ -1,6 +1,8 @@
 import { IEditorOption } from '../../..'
+import { FORMAT_PLACEHOLDER } from '../../../dataset/constant/PageNumber'
 import { DeepRequired } from '../../../interface/Common'
 import { Draw } from '../Draw'
+import { PageNumber } from './PageNumber'
 
 export class Watermark {
   private draw: Draw
@@ -11,9 +13,9 @@ export class Watermark {
     this.options = <DeepRequired<IEditorOption>>draw.getOptions()
   }
 
-  public render(ctx: CanvasRenderingContext2D) {
+  public render(ctx: CanvasRenderingContext2D, pageNo: number) {
     const {
-      watermark: { data, opacity, font, size, color, repeat, gap },
+      watermark: { data, opacity, font, size, color, repeat, gap, numberType },
       scale
     } = this.options
     const width = this.draw.getWidth()
@@ -22,7 +24,28 @@ export class Watermark {
     ctx.save()
     ctx.globalAlpha = opacity
     ctx.font = `${size * scale}px ${font}`
-    const measureText = ctx.measureText(data)
+    // 格式化文本
+    let text = data
+    const pageNoReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_NO)
+    if (pageNoReg.test(text)) {
+      text = PageNumber.formatNumberPlaceholder(
+        text,
+        pageNo + 1,
+        pageNoReg,
+        numberType
+      )
+    }
+    const pageCountReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_COUNT)
+    if (pageCountReg.test(text)) {
+      text = PageNumber.formatNumberPlaceholder(
+        text,
+        this.draw.getPageCount(),
+        pageCountReg,
+        numberType
+      )
+    }
+    // 测量长度并绘制
+    const measureText = ctx.measureText(text)
     if (repeat) {
       const dpr = this.draw.getPagePixelRatio()
       const temporaryCanvas = document.createElement('canvas')
@@ -51,7 +74,7 @@ export class Watermark {
       temporaryCtx.font = `${size * scale}px ${font}`
       temporaryCtx.fillStyle = color
       temporaryCtx.fillText(
-        data,
+        text,
         (patternWidth - textWidth) / 2,
         (patternHeight - textHeight) / 2 + measureText.actualBoundingBoxAscent
       )
@@ -68,7 +91,7 @@ export class Watermark {
       ctx.translate(x, y)
       ctx.rotate((-45 * Math.PI) / 180)
       ctx.fillText(
-        data,
+        text,
         -measureText.width / 2,
         measureText.actualBoundingBoxAscent - size / 2
       )

src/editor/dataset/constant/Watermark.ts

@@ -1,4 +1,5 @@
 import { IWatermark } from '../../interface/Watermark'
+import { NumberType } from '../enum/Common'
 
 export const defaultWatermarkOption: Readonly<Required<IWatermark>> = {
   data: '',
@@ -7,5 +8,6 @@ export const defaultWatermarkOption: Readonly<Required<IWatermark>> = {
   size: 200,
   font: 'Microsoft YaHei',
   repeat: false,
-  gap: [10, 10]
+  gap: [10, 10],
+  numberType: NumberType.ARABIC
 }

src/editor/interface/Watermark.ts

@@ -1,9 +1,12 @@
+import { NumberType } from '../dataset/enum/Common'
+
 export interface IWatermark {
   data: string
   color?: string
   opacity?: number
   size?: number
   font?: string
   repeat?: boolean
+  numberType?: NumberType
   gap?: [horizontal: number, vertical: number]
 }