From 0a9f44eed8fd72ff3318a34222ff91d4f140de9b Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Mon, 20 Mar 2023 20:12:10 +0800 Subject: [PATCH] feat:page number set row flex --- src/editor/core/draw/Draw.ts | 3 ++- src/editor/core/draw/frame/PageNumber.ts | 26 ++++++++++++++++++----- src/editor/dataset/constant/PageNumber.ts | 10 +++++++++ src/editor/index.ts | 10 ++++++--- src/editor/interface/Editor.ts | 5 ++--- src/editor/interface/PageNumber.ts | 9 ++++++++ 6 files changed, 51 insertions(+), 12 deletions(-) create mode 100644 src/editor/dataset/constant/PageNumber.ts create mode 100644 src/editor/interface/PageNumber.ts diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 6b1adb5..2d6a624 100644 --- a/src/editor/core/draw/Draw.ts +++ b/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 { diff --git a/src/editor/core/draw/frame/PageNumber.ts b/src/editor/core/draw/frame/PageNumber.ts index 26eb927..62384b0 100644 --- a/src/editor/core/draw/frame/PageNumber.ts +++ b/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 + private options: DeepRequired 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.font = `${pageNumberSize * scale}px ${pageNumberFont}` - ctx.fillText(`${pageNo + 1}`, width / 2, height - pageNumberBottom) + ctx.fillStyle = color + ctx.font = `${size * scale}px ${font}` + // 计算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() } diff --git a/src/editor/dataset/constant/PageNumber.ts b/src/editor/dataset/constant/PageNumber.ts new file mode 100644 index 0000000..42b7ce0 --- /dev/null +++ b/src/editor/dataset/constant/PageNumber.ts @@ -0,0 +1,10 @@ +import { IPageNumber } from '../../interface/PageNumber' +import { RowFlex } from '../enum/Row' + +export const defaultPageNumberOption: Readonly> = { + bottom: 60, + size: 12, + font: 'Yahei', + color: '#000000', + rowFlex: RowFlex.CENTER +} \ No newline at end of file diff --git a/src/editor/index.ts b/src/editor/index.ts index 8b901f5..81c3586 100644 --- a/src/editor/index.ts +++ b/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 = { + ...defaultPageNumberOption, + ...options.pageNumber + } const waterMarkOptions: Required = { ...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, diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index d5c1bb6..6eafd6b 100644 --- a/src/editor/interface/Editor.ts +++ b/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; diff --git a/src/editor/interface/PageNumber.ts b/src/editor/interface/PageNumber.ts new file mode 100644 index 0000000..7a7f973 --- /dev/null +++ b/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; +} \ No newline at end of file