feat: add applyPageNumbers attribute to background option #729

docs/en/guide/option.md

@@ -68,7 +68,7 @@ interface IEditorOption {
   group?: IGroup // Group option. {opacity?:number; backgroundColor?:string; activeOpacity?:number; activeBackgroundColor?:string; disabled?:boolean}
   pageBreak?: IPageBreak // PageBreak option。{font?:string; fontSize?:number; lineDash?:number[];}
   zone?: IZoneOption // Zone option。{tipDisabled?:boolean;}
-  background?: IBackgroundOption // Background option. {color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat;}。default: {color: '#FFFFFF'}
+  background?: IBackgroundOption // Background option. {color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat; applyPageNumbers?:number[]}。default: {color: '#FFFFFF'}
   lineBreak?: ILineBreakOption // LineBreak option. {disabled?:boolean; color?:string; lineWidth?:number;}
   separator?: ISeparatorOption // Separator option. {lineWidth?:number; strokeStyle?:string;}
 }

docs/guide/option.md

@@ -68,7 +68,7 @@ interface IEditorOption {
   group?: IGroup // 成组配置。{opacity?:number; backgroundColor?:string; activeOpacity?:number; activeBackgroundColor?:string; disabled?:boolean}
   pageBreak?: IPageBreak // 分页符配置。{font?:string; fontSize?:number; lineDash?:number[];}
   zone?: IZoneOption // 编辑器区域配置。{tipDisabled?:boolean;}
-  background?: IBackgroundOption // 背景配置。{color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat;}。默认：{color: '#FFFFFF'}
+  background?: IBackgroundOption // 背景配置。{color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat; applyPageNumbers?:number[]}。默认：{color: '#FFFFFF'}
   lineBreak?: ILineBreakOption // 换行符配置。{disabled?:boolean; color?:string; lineWidth?:number;}
   separator?: ISeparatorOption // 分隔符配置。{lineWidth?:number; strokeStyle?:string;}
 }

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

@@ -99,14 +99,19 @@ export class Background {
   }
 
   public render(ctx: CanvasRenderingContext2D, pageNo: number) {
-    const { background } = this.options
-    if (background.image) {
+    const {
+      background: { image, color, applyPageNumbers }
+    } = this.options
+    if (
+      image &&
+      (!applyPageNumbers?.length || applyPageNumbers.includes(pageNo))
+    ) {
       const { width, height } = this.options
       this._renderBackgroundImage(ctx, width, height)
     } else {
       const width = this.draw.getCanvasWidth(pageNo)
       const height = this.draw.getCanvasHeight(pageNo)
-      this._renderBackgroundColor(ctx, background.color, width, height)
+      this._renderBackgroundColor(ctx, color, width, height)
     }
   }
 }

src/editor/dataset/constant/Background.ts

@@ -5,5 +5,6 @@ export const defaultBackground: Readonly<Required<IBackgroundOption>> = {
   color: '#FFFFFF',
   image: '',
   size: BackgroundSize.COVER,
-  repeat: BackgroundRepeat.NO_REPEAT
+  repeat: BackgroundRepeat.NO_REPEAT,
+  applyPageNumbers: []
 }

src/editor/interface/Background.ts

@@ -5,4 +5,5 @@ export interface IBackgroundOption {
   image?: string
   size?: BackgroundSize
   repeat?: BackgroundRepeat
+  applyPageNumbers?: number[]
 }