joylink/graphic-pixi
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

增加网格背景

Browse Source
This commit is contained in:
ZhaoErWei 2024-02-07 11:51:44 +08:00
parent 73aebfa4d3
commit 36f3f0257e
6 changed files with 105 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
lib/app/JlGraphicApp.d.ts vendored
View File

@ -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;

4
lib/app/index.d.ts vendored
View File

@ -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 };

42
lib/index.js
View File

@ -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;

2
package.json
View File

@ -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>",

50
src/app/JlGraphicApp.ts
View File

@ -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 {

2
src/app/index.ts
View File

@ -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
};