Class: Graphics ​

图形绘制

const node = app.stage.addChild(new Transform(Graphics));
node.size.set(1280, 720);
const g = node.getComponent(Graphics)!;
// 绘制多边形
g.begin();
g.drawPolygon([0, 0,  100, 0,  100, 100, 50, 50, 0, 100]);
g.fill('#00ffff');
g.stroke('#00ff00');
// 绘制线条
g.begin();
g.moveTo(120, 20)
g.lineTo(220, 20);
g.lineTo(220, 100);
// 闭合路径
g.closePath();
g.stroke('#00ff00', 5);
// 绘制线条
g.begin();
g.moveTo(120, 20)
g.lineTo(220, 20);
g.stroke('#00ff00', 5);
// 绘制圆弧
g.begin();
g.arc(340, 60, 50, 0, Math.PI);
g.stroke('#0000FF', 5);
// 绘制圆
g.begin();
g.drawCircle(460, 60, 50);
g.stroke('#0000FF', 5);
// 绘制圆角矩形
g.begin();
g.drawRect(560, 10, 100, 100, 8);
g.fill('#FF00FF');
g.stroke('#0000FF', 5);
// 绘制椭圆路径
g.begin();
g.ellipse(120, 200, 100, 80, 0, 0, Math.PI);
g.fill('#FF0000');
g.stroke('#00FF00', 5);

g.begin();
g.drawCircle(50, 210, 5);
g.fill('#000000');

g.begin();
g.drawCircle(80, 210, 5);
g.fill('#000000');

g.begin();
g.drawCircle(110, 210, 5);
g.fill('#000000');
// 绘制椭圆
g.begin();
g.drawEllipse(140, 210, 10, 5);
g.fill('#000000');

Hierarchy ​

• DisplayObjects

  ↳ Graphics

Table of contents ​

Constructors ​

• constructor

Properties ​

• emitter
• id
• name
• node
• redraw
• tasks
• texture

Methods ​

• arc
• begin
• clear
• closePath
• destroy
• drawCircle
• drawEllipse
• drawPolygon
• drawRect
• ellipse
• fill
• lineTo
• moveTo
• onDestroy
• pushTask
• start
• stroke
• update

Constructors ​

constructor ​

• new Graphics()

组件不能单独实例化，必须通过Transform.addComponent创建

const node = new Transform();
const componet = node.addComponent(Component);

Inherited from ​

DisplayObjects.constructor

Defined in ​

src/core/component/Component.ts:37

Properties ​

emitter ​

• emitter: EventEmitter<string | symbol, any>

事件处理器

Inherited from ​

DisplayObjects.emitter

Defined in ​

src/core/component/Component.ts:27

id ​

• id: number

用于表示组件的唯一标识

Inherited from ​

DisplayObjects.id

Defined in ​

src/core/component/Component.ts:12

name ​

• name: string = ''

组件名

Inherited from ​

DisplayObjects.name

Defined in ​

src/core/component/Component.ts:17

node ​

• node: Transform<Container>

组件挂载节点

Inherited from ​

DisplayObjects.node

Defined in ​

src/core/component/Component.ts:22

redraw ​

• redraw: boolean = true

是否需要重绘

Defined in ​

src/core/component/Graphics.ts:78

tasks ​

• tasks: any[] = []

记录要执行的操作记录

Defined in ​

src/core/component/Graphics.ts:73

texture ​

• Optional texture: Texture<TextureResource>

图片纹理，储存图片的相关信息

Defined in ​

src/core/component/Graphics.ts:69

Methods ​

arc ​

▸ arc(x, y, radians, startAngle, endAngle): void

绘制圆弧

Parameters ​

Returns ​

void

Defined in ​

src/core/component/Graphics.ts:193

begin ​

▸ begin(): void

开启新的绘制

Returns ​

void

Defined in ​

src/core/component/Graphics.ts:111

clear ​

▸ clear(): void

清空画布（清空操作指令历史）

Returns ​

void

Defined in ​

src/core/component/Graphics.ts:105

closePath ​

▸ closePath(): void

闭合路径，会将起始点与结束点用直线连接

Returns ​

void

Defined in ​

src/core/component/Graphics.ts:118

destroy ​

▸ destroy(): void

消毁

Returns ​

void

Inherited from ​

DisplayObjects.destroy

Defined in ​

src/core/component/Component.ts:55

drawCircle ​

▸ drawCircle(x, y, radians): void

绘制一个圆

Parameters ​

Returns ​

void

Defined in ​

src/core/component/Graphics.ts:203

drawEllipse ​

▸ drawEllipse(x, y, radiusX, radiusY): void

绘制一个椭圆

Parameters ​

Returns ​

void

Defined in ​

src/core/component/Graphics.ts:229

drawPolygon ​

▸ drawPolygon(points): void

绘制一个多边形

Parameters ​

Returns ​

void

Defined in ​

src/core/component/Graphics.ts:237

drawRect ​

▸ drawRect(x, y, width, height, radius?): void

绘制一个矩形，可带圆角

Parameters ​

Returns ​

void

Defined in ​

src/core/component/Graphics.ts:162

ellipse ​

▸ ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise?): void

绘制一个椭圆

Parameters ​

Returns ​

void

Defined in ​

src/core/component/Graphics.ts:218

fill ​

▸ fill(color): void

填充颜色

Parameters ​

Returns ​

void

Defined in ​

src/core/component/Graphics.ts:126

lineTo ​

▸ lineTo(x, y): void

绘制一条直线到某点

Parameters ​

Returns ​

void

Defined in ​

src/core/component/Graphics.ts:150

moveTo ​

▸ moveTo(x, y): void

移动起始点

Parameters ​

Returns ​

void

Defined in ​

src/core/component/Graphics.ts:141

onDestroy ​

▸ onDestroy(): void

组件被销毁时触发

Returns ​

void

Overrides ​

DisplayObjects.onDestroy

Defined in ​

src/core/component/Graphics.ts:260

pushTask ​

▸ pushTask(name, ...args): void

新增一条绘制指令

Parameters ​

Returns ​

void

Defined in ​

src/core/component/Graphics.ts:94

start ​

▸ start(): void

组件被挂载到节点时触发

Returns ​

void

Overrides ​

DisplayObjects.start

Defined in ​

src/core/component/Graphics.ts:80

stroke ​

▸ stroke(color, width?): void

设置边框或线条

Parameters ​

Returns ​

void

Defined in ​

src/core/component/Graphics.ts:133

update ​

▸ Optional update(time): void

每帧调用

Parameters ​

Returns ​

void

Inherited from ​

DisplayObjects.update

Defined in ​

src/core/component/Component.ts:50