增加网格背景

lib/app/JlGraphicApp.d.ts

@@ -27,12 +27,19 @@ export interface ICanvasProperties {
     height: number;
     backgroundColor: string;
     viewportTransform: GraphicTransform;
+    gridBackground?: IGridBackground;
+}
+export interface IGridBackground {
+    hasGrid: boolean;
+    lineColor: string;
+    space: number;
 }
 export declare class CanvasData implements ICanvasProperties {
     width: number;
     height: number;
     backgroundColor: string;
     viewportTransform: GraphicTransform;
+    gridBackground: IGridBackground | undefined;
     constructor(properties?: ICanvasProperties);
     copyFrom(properties: ICanvasProperties): boolean;
     clone(): CanvasData;
@@ -72,6 +79,7 @@ export declare class JlCanvas extends Container implements IJlCanvas {
     scene: IGraphicScene;
     _properties: CanvasData;
     bg: Graphics;
+    gridBackgroundLine: Container<DisplayObject>;
     nonInteractiveContainer: Container;
     assistantAppendContainer: Container;
     constructor(scene: IGraphicScene, properties?: CanvasData);
@@ -82,6 +90,7 @@ export declare class JlCanvas extends Container implements IJlCanvas {
     get width(): number;
     get height(): number;
     get backgroundColor(): string;
+    get gridBackground(): IGridBackground | undefined;
     doRepaint(): void;
     get properties(): CanvasData;
     saveData(): CanvasData;

lib/app/index.d.ts

@@ -1,5 +1,5 @@
 import { DrawAppOptions, DrawAssistant, GraphicDrawAssistant, IDrawApp } from './JlDrawApp';
-import { AppConsts, GraphicAppOptions, ICanvasProperties, IGraphicApp, IGraphicScene, IGraphicStorage, IJlCanvas } from './JlGraphicApp';
+import { AppConsts, GraphicAppOptions, ICanvasProperties, IGraphicApp, IGraphicScene, IGraphicStorage, IJlCanvas, IGridBackground } from './JlGraphicApp';
 import { GraphicDataUpdateOperation } from './BasicOperation';
 /**
  * 实例化图形app
@@ -14,4 +14,4 @@ export declare function newGraphicApp(options: GraphicAppOptions): IGraphicApp;
  */
 export declare function newDrawApp(options: DrawAppOptions): IDrawApp;
 export { AppConsts, GraphicDrawAssistant, GraphicDataUpdateOperation };
-export type { DrawAssistant, ICanvasProperties, IDrawApp, IGraphicApp, IGraphicScene, IGraphicStorage, IJlCanvas, };
+export type { DrawAssistant, ICanvasProperties, IDrawApp, IGraphicApp, IGraphicScene, IGraphicStorage, IJlCanvas, IGridBackground };

lib/index.js

@@ -2523,7 +2523,7 @@ function debounce(fn, waitMs = 250) {
             fn.apply(context, args);
         };
         if (timeoutId !== undefined) {
-            console.debug('debounce clear timeout', fn);
+            // console.debug('debounce clear timeout', fn);
             clearTimeout(timeoutId);
         }
         timeoutId = setTimeout(invokeFunction, waitMs);
@@ -6429,16 +6429,19 @@ class CanvasData {
     height;
     backgroundColor;
     viewportTransform;
+    gridBackground;
     constructor(properties = {
         width: 1920,
         height: 1080,
         backgroundColor: '#ffffff',
         viewportTransform: GraphicTransform.default(),
+        gridBackground: undefined,
     }) {
         this.width = properties.width;
         this.height = properties.height;
         this.backgroundColor = properties.backgroundColor;
         this.viewportTransform = properties.viewportTransform;
+        this.gridBackground = properties.gridBackground;
     }
     copyFrom(properties) {
         let sizeChange = false;
@@ -6459,6 +6462,9 @@ class CanvasData {
         }
         this.backgroundColor = properties.backgroundColor;
         this.viewportTransform = properties.viewportTransform;
+        if (properties.gridBackground) {
+            this.gridBackground = properties.gridBackground;
+        }
         return sizeChange;
     }
     clone() {
@@ -6472,6 +6478,7 @@ class JlCanvas extends Container {
     scene;
     _properties;
     bg = new Graphics(); // 背景
+    gridBackgroundLine = new Container(); //网格背景
     nonInteractiveContainer; // 无交互对象容器
     assistantAppendContainer; // 辅助附加容器
     constructor(scene, properties = new CanvasData()) {
@@ -6483,6 +6490,7 @@ class JlCanvas extends Container {
         this.nonInteractiveContainer.name = 'non-interactives';
         this.nonInteractiveContainer.eventMode = 'none';
         this.addChild(this.bg);
+        this.addChild(this.gridBackgroundLine);
         this.addChild(this.nonInteractiveContainer);
         this.sortableChildren = true;
         this.assistantAppendContainer = new Container();
@@ -6508,12 +6516,44 @@ class JlCanvas extends Container {
     get backgroundColor() {
         return this._properties.backgroundColor;
     }
+    get gridBackground() {
+        return this._properties.gridBackground;
+    }
     doRepaint() {
         this.bg.clear();
         this.bg
             .beginFill(new Color(this.backgroundColor))
             .drawRect(0, 0, this._properties.width, this._properties.height)
             .endFill();
+        this.gridBackgroundLine.children.forEach((g) => {
+            g.clear();
+        });
+        if (this.gridBackground &&
+            this.gridBackground.hasGrid &&
+            this.gridBackground.space > 0) {
+            const horizontalAmount = this.height / this.gridBackground.space;
+            for (let i = 1; i < horizontalAmount; i++) {
+                const lineGraphic = new Graphics();
+                const posY = i * this.gridBackground.space;
+                lineGraphic
+                    .clear()
+                    .lineStyle(1, new Color(this.gridBackground.lineColor))
+                    .moveTo(0, posY)
+                    .lineTo(this.width, posY);
+                this.gridBackgroundLine.addChild(lineGraphic);
+            }
+            const verticalAmount = this.width / this.gridBackground.space;
+            for (let i = 1; i < verticalAmount; i++) {
+                const lineGraphic = new Graphics();
+                const posX = i * this.gridBackground.space;
+                lineGraphic
+                    .clear()
+                    .lineStyle(1, new Color(this.gridBackground.lineColor))
+                    .moveTo(posX, 0)
+                    .lineTo(posX, this.height);
+                this.gridBackgroundLine.addChild(lineGraphic);
+            }
+        }
     }
     get properties() {
         return this._properties;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphic-pixi",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "基于pixijs的图形应用、绘制应用框架",
   "productName": "Graphic-pixi",
   "author": "walker <shengxuqiang@joylink.club>",

src/app/JlGraphicApp.ts

@@ -71,6 +71,13 @@ export interface ICanvasProperties {
   height: number;
   backgroundColor: string;
   viewportTransform: GraphicTransform;
+  gridBackground?: IGridBackground; //网格背景
+}
+
+export interface IGridBackground {
+  hasGrid: boolean;
+  lineColor: string;
+  space: number;
 }
 
 export class CanvasData implements ICanvasProperties {
@@ -78,18 +85,21 @@ export class CanvasData implements ICanvasProperties {
   height: number;
   backgroundColor: string;
   viewportTransform: GraphicTransform;
+  gridBackground: IGridBackground | undefined;
   constructor(
     properties: ICanvasProperties = {
       width: 1920,
       height: 1080,
       backgroundColor: '#ffffff',
       viewportTransform: GraphicTransform.default(),
+      gridBackground: undefined,
     }
   ) {
     this.width = properties.width;
     this.height = properties.height;
     this.backgroundColor = properties.backgroundColor;
     this.viewportTransform = properties.viewportTransform;
+    this.gridBackground = properties.gridBackground;
   }
 
   copyFrom(properties: ICanvasProperties): boolean {
@@ -110,6 +120,9 @@ export class CanvasData implements ICanvasProperties {
     }
     this.backgroundColor = properties.backgroundColor;
     this.viewportTransform = properties.viewportTransform;
+    if (properties.gridBackground) {
+      this.gridBackground = properties.gridBackground;
+    }
     return sizeChange;
   }
 
@@ -155,6 +168,7 @@ export class JlCanvas extends Container implements IJlCanvas {
   scene: IGraphicScene;
   _properties: CanvasData;
   bg: Graphics = new Graphics(); // 背景
+  gridBackgroundLine = new Container(); //网格背景
   nonInteractiveContainer: Container; // 无交互对象容器
   assistantAppendContainer: Container; // 辅助附加容器
 
@@ -167,6 +181,7 @@ export class JlCanvas extends Container implements IJlCanvas {
     this.nonInteractiveContainer.name = 'non-interactives';
     this.nonInteractiveContainer.eventMode = 'none';
     this.addChild(this.bg);
+    this.addChild(this.gridBackgroundLine);
     this.addChild(this.nonInteractiveContainer);
 
     this.sortableChildren = true;
@@ -199,12 +214,47 @@ export class JlCanvas extends Container implements IJlCanvas {
     return this._properties.backgroundColor;
   }
 
+  public get gridBackground(): IGridBackground | undefined {
+    return this._properties.gridBackground;
+  }
+
   doRepaint() {
     this.bg.clear();
     this.bg
       .beginFill(new Color(this.backgroundColor))
       .drawRect(0, 0, this._properties.width, this._properties.height)
       .endFill();
+      this.gridBackgroundLine.children.forEach((g) => {
+        (g as Graphics).clear();
+      });
+      if (
+        this.gridBackground &&
+        this.gridBackground.hasGrid &&
+        this.gridBackground.space > 0
+      ) {
+        const horizontalAmount = this.height / this.gridBackground.space;
+        for (let i = 1; i < horizontalAmount; i++) {
+          const lineGraphic: Graphics = new Graphics();
+          const posY = i * this.gridBackground.space;
+          lineGraphic
+            .clear()
+            .lineStyle(1, new Color(this.gridBackground.lineColor))
+            .moveTo(0, posY)
+            .lineTo(this.width, posY);
+          this.gridBackgroundLine.addChild(lineGraphic);
+        }
+        const verticalAmount = this.width / this.gridBackground.space;
+        for (let i = 1; i < verticalAmount; i++) {
+          const lineGraphic: Graphics = new Graphics();
+          const posX = i * this.gridBackground.space;
+          lineGraphic
+            .clear()
+            .lineStyle(1, new Color(this.gridBackground.lineColor))
+            .moveTo(posX, 0)
+            .lineTo(posX, this.height);
+          this.gridBackgroundLine.addChild(lineGraphic);
+        }
+      }
   }
 
   public get properties(): CanvasData {

src/app/index.ts

@@ -14,6 +14,7 @@ import {
   IGraphicScene,
   IGraphicStorage,
   IJlCanvas,
+  IGridBackground
 } from './JlGraphicApp';
 import { GraphicDataUpdateOperation } from './BasicOperation';
 
@@ -44,4 +45,5 @@ export type {
   IGraphicScene,
   IGraphicStorage,
   IJlCanvas,
+  IGridBackground
 };