feat:page number set row flex

src/editor/core/draw/Draw.ts

@@ -260,7 +260,8 @@ export class Draw {
   }
 
   public getPageNumberBottom(): number {
-    return this.options.pageNumberBottom * this.options.scale
+    const { pageNumber: { bottom }, scale } = this.options
+    return bottom * scale
   }
 
   public getHeaderTop(): number {

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

@@ -1,11 +1,13 @@
 import { PageMode } from '../../../dataset/enum/Editor'
+import { RowFlex } from '../../../dataset/enum/Row'
+import { DeepRequired } from '../../../interface/Common'
 import { IEditorOption } from '../../../interface/Editor'
 import { Draw } from '../Draw'
 
 export class PageNumber {
 
   private draw: Draw
-  private options: Required<IEditorOption>
+  private options: DeepRequired<IEditorOption>
 
   constructor(draw: Draw) {
     this.draw = draw
@@ -13,16 +15,30 @@ export class PageNumber {
   }
 
   public render(ctx: CanvasRenderingContext2D, pageNo: number) {
-    const { pageNumberSize, pageNumberFont, scale, pageMode } = this.options
+    const { pageNumber: { size, font, color, rowFlex }, scale, pageMode } = this.options
+    const text = `${pageNo + 1}`
     const width = this.draw.getWidth()
+    // 计算y位置
     const height = pageMode === PageMode.CONTINUITY
       ? this.draw.getCanvasHeight(pageNo)
       : this.draw.getHeight()
     const pageNumberBottom = this.draw.getPageNumberBottom()
+    const y = height - pageNumberBottom
     ctx.save()
-    ctx.fillStyle = '#00000'
+    ctx.fillStyle = color
-    ctx.font = `${pageNumberSize * scale}px ${pageNumberFont}`
+    ctx.font = `${size * scale}px ${font}`
-    ctx.fillText(`${pageNo + 1}`, width / 2, height - pageNumberBottom)
+    // 计算x位置-居左、居中、居右
+    let x = 0
+    const margins = this.draw.getMargins()
+    const { width: textWidth } = ctx.measureText(text)
+    if (rowFlex === RowFlex.CENTER) {
+      x = (width + textWidth) / 2
+    } else if (rowFlex === RowFlex.RIGHT) {
+      x = width - textWidth - margins[1]
+    } else {
+      x = margins[3]
+    }
+    ctx.fillText(text, x, y)
     ctx.restore()
   }
 

src/editor/dataset/constant/PageNumber.ts

@@ -0,0 +1,10 @@
+import { IPageNumber } from '../../interface/PageNumber'
+import { RowFlex } from '../enum/Row'
+
+export const defaultPageNumberOption: Readonly<Required<IPageNumber>> = {
+  bottom: 60,
+  size: 12,
+  font: 'Yahei',
+  color: '#000000',
+  rowFlex: RowFlex.CENTER
+}

src/editor/index.ts

@@ -31,6 +31,8 @@ import { IBlock } from './interface/Block'
 import { ILang } from './interface/i18n/I18n'
 import { ICursorOption } from './interface/Cursor'
 import { defaultCursorOption } from './dataset/constant/Cursor'
+import { IPageNumber } from './interface/PageNumber'
+import { defaultPageNumberOption } from './dataset/constant/PageNumber'
 
 export default class Editor {
 
@@ -44,6 +46,10 @@ export default class Editor {
       ...defaultHeaderOption,
       ...options.header
     }
+    const pageNumberOptions: Required<IPageNumber> = {
+      ...defaultPageNumberOption,
+      ...options.pageNumber
+    }
     const waterMarkOptions: Required<IWatermark> = {
       ...defaultWatermarkOption,
       ...options.watermark
@@ -73,9 +79,6 @@ export default class Editor {
       height: 1123,
       scale: 1,
       pageGap: 20,
-      pageNumberBottom: 60,
-      pageNumberSize: 12,
-      pageNumberFont: 'Yahei',
       underlineColor: '#000000',
       strikeoutColor: '#FF0000',
       rangeAlpha: 0.6,
@@ -99,6 +102,7 @@ export default class Editor {
       inactiveAlpha: 0.6,
       ...options,
       header: headerOptions,
+      pageNumber: pageNumberOptions,
       watermark: waterMarkOptions,
       control: controlOptions,
       checkbox: checkboxOptions,

src/editor/interface/Editor.ts

@@ -5,6 +5,7 @@ import { IControlOption } from './Control'
 import { ICursorOption } from './Cursor'
 import { IHeader } from './Header'
 import { IMargin } from './Margin'
+import { IPageNumber } from './PageNumber'
 import { IWatermark } from './Watermark'
 
 export interface IEditorData {
@@ -25,9 +26,6 @@ export interface IEditorOption {
   height?: number;
   scale?: number;
   pageGap?: number;
-  pageNumberBottom?: number;
-  pageNumberSize?: number;
-  pageNumberFont?: string;
   underlineColor?: string;
   strikeoutColor?: string;
   rangeColor?: string;
@@ -50,6 +48,7 @@ export interface IEditorOption {
   paperDirection?: PaperDirection;
   inactiveAlpha?: number;
   header?: IHeader;
+  pageNumber?: IPageNumber;
   watermark?: IWatermark;
   control?: IControlOption;
   checkbox?: ICheckboxOption;

src/editor/interface/PageNumber.ts

@@ -0,0 +1,9 @@
+import { RowFlex } from '../dataset/enum/Row'
+
+export interface IPageNumber {
+  bottom?: number;
+  size?: number;
+  font?: string;
+  color?: string;
+  rowFlex?: RowFlex;
+}