Class: Stage

顶层场景对象，下面可以有多个Layer, 一个Layer可以充当一个场景创建时需要一个dom对象，通常是一个div，来作为渲染目标

const stage = new Stage(document.getElementById('divId'));

// 常用的一些方法:
// 全屏（浏览器内)
stage.fullWindow();

// 全屏（铺满物理显示器)
stage.fullScreen();

Hierarchy

EventTarget<StageEventsMap, StageEvent>
↳ Stage

Constructors

constructor

Properties

Accessors

enableContextmenu

Methods

Constructors

constructor

new Stage(rendererDom, config?)

渲染目标Dom对象（或dom对象的id）

Parameters

Name	Type
`rendererDom`	`string` \| `HTMLElement`
`config?`	`StageConfig`

Overrides

EventTarget.constructor

Properties

animationSystem

animationSystem: AnimationSystem

动画系统

camera

camera: Camera

当前相机

config

config: StageConfig

参数配置

contextmenuEnabled

contextmenuEnabled: boolean = false

是否启用浏览器默认的右键菜单, 默认隐藏浏览器的右键菜单

debugPanel

debugPanel: DebugPanel

调试信息面板，打开后会在左上角显示鼠标坐标信息、选中对象的定位信息等

// 可以通过以下方法打开，方便调试
stage.showDebugPanel();

destroyed

destroyed: boolean = false

是否已经销毁

domElement

domElement: HTMLElement

顶层dom元素, new Stage(...)时指定的Dom对象

effectSystem

effectSystem: EffectSystem

动效系统

exportSystem

exportSystem: ExportSystem

导出系统

graphSystem

graphSystem: GraphSystem

图系统(图论相关)

halfHeight

halfHeight: number

halfWidth

halfWidth: number

height

height: number

高度，随最顶层的dom元素变化

inputSystem

inputSystem: InputSystem<NE>

输入系统对象，存储鼠标相关信息, 例如：

// 鼠标指针在画布上的位置 x
let xInCanvas = stage.inputSystem.x;

// 鼠标指针在世界坐标系的位置 x
let xInWorld = stage.inputSystem.xInWorld;

// 鼠标最后一次按下时的坐标
let downX = stage.inputSystem.pointerDownX;

// 当前鼠标是否在拖拽中
let isDraging = stage.inputSystem.isDraging;

keyboard

keyboard: Keyboard

键盘抽象

layoutSystem

layoutSystem: LayoutSystem<LayoutNode>

布局控制系统

mode

mode: StageModeType = 'normal'

显示和操作模式，不同模式下的操作行为会有一些差别。

默认模式(normal)下, 鼠标左键选择对象，右键是拖拽画布;

框选模式（select）下，鼠标左键可以一次性框选多个对象

拖拽模式(drag)下，鼠标只能拖拽画布，不能选中对象;

查看模式（view）下，只能看，不能进行任何操作。

overview

overview: Overview

缩略图对象

renderSystem

renderSystem: RenderSystem

渲染

resourceSystem

resourceSystem: ResourceSystemBase

资源加载系统

selectedGroup

selectedGroup: SelectedGroup

当前选中的对象组(由鼠标点击或者框选)

serializerSystem

serializerSystem: SerializerSystem

序列化系统

styleSystem

styleSystem: StyleSystem

样式系统

uiContainer

uiContainer: HTMLElement

UI/DOM对象的容器对象，不要改动

version

version: string = VERSION

版本号

viewLayers

viewLayers: Layer[] = []

加入Stage的Layer集合

width

width: number

宽度，随顶层的dom元素变化

Accessors

enableContextmenu

get enableContextmenu(): boolean

Deprecated

请使用 contextmenuEnabled 代替

Returns

boolean

Methods

addEventListener

addEventListener<K>(type, callback): () => void

增加事件监听

Type parameters

Name	Type
`K`	extends keyof `StageEventsMap`

Parameters

Name	Type	Description
`type`	`K`	事件类型
`callback`	`EventCallback_2`<`StageEventsMap`[`K`]>

Returns

fn

(): void

增加事件监听

Param

事件类型

Param

Returns

void

Inherited from

EventTarget.addEventListener

addLayer

addLayer(layer): void

加入一个Layer

Layer如果设置了背景，可能会遮挡住下面的Layer。

一个Stage下，最多可以添加8个Layer

Parameters

Name	Type
`layer`	`Layer`

Returns

void

destroy

destroy(cleanCache?): void

销毁

Parameters

Name	Type
`cleanCache?`	`boolean`

Returns

void

dispatchEvent

dispatchEvent(event): void

分发事件

Parameters

Name	Type
`event`	`StageEvent`<keyof `StageEventsMap`>

Returns

void

Inherited from

EventTarget.dispatchEvent

download

download(fileName, content): void

下载为json文件

Parameters

Name	Type
`fileName`	`string`
`content`	`string`

Returns

void

fromJSON

fromJSON(json, existObjectMap?): Promise<boolean>

清空当前画面并加载json内容

// 情形1
stage.fromJSON(json).then(()=>{
   console.log('已经打开');
});

// 情形2, 同上，使用js的新语法 await
await layer.fromJSON(json);
console.log('已经打开');
//... 继续其他操作

Parameters

Name	Type
`json`	`SerializedJsonType`
`existObjectMap?`	`Map`<`Object`, `NE`>

Returns

Promise<boolean>

Promise

fullScreen

fullScreen(): void

整个浏览器全屏

Returns

void

fullWindow

fullWindow(): void

在浏览器窗口内全屏

Returns

void

getAllVisibleLayers

getAllVisibleLayers(): Layer[]

获取所有可见的Layer

Returns

Layer[]

getCenter

getCenter(): Object

Returns

Object

Name	Type
`x`	`number`
`y`	`number`

getCurrentLayer

getCurrentLayer(): Layer

获取当前最上层的第一个可见Layer

Returns

Layer

getCursor

getCursor(): string

获取当前光标, 相当于读取: cavnas.style.cursor;

Returns

string

getRect

getRect(): Rectangle

Returns

Rectangle

hasListener

hasListener<K>(type): boolean

是否有该类型的监听

Type parameters

Name	Type
`K`	extends keyof `StageEventsMap`

Parameters

Name	Type
`type`	`K`

Returns

boolean

Inherited from

EventTarget.hasListener

hide

hide(): void

所有Layer不可见（脚本和动画仍然在执行）

Returns

void

hideAxis

hideAxis(): Stage

隐藏坐标轴

Returns

Stage

hideDebugPanel

hideDebugPanel(): void

隐藏左上角的调试信息

Returns

void

hideGrid

hideGrid(): void

隐藏网格辅助

Returns

void

hideOverview

hideOverview(): void

隐藏缩略图

Returns

void

hideRuler

hideRuler(): void

Returns

void

on

on<K>(type, callback): () => void

addEventLister的别名

Type parameters

Name	Type
`K`	extends keyof `StageEventsMap`

Parameters

Name	Type
`type`	`K`
`callback`	`EventCallback_2`<`StageEventsMap`[`K`]>

Returns

fn

(): void

addEventLister的别名

Returns

void

Inherited from

EventTarget.on

removeChild

removeChild(layer): Stage

移除一个Layer

Deprecated

已过时 removeLayer 代替

Parameters

Name	Type
`layer`	`Layer`

Returns

Stage

removeEventListener

removeEventListener<K>(type, callback): any

移除一个事件监听

Type parameters

Name	Type
`K`	extends keyof `StageEventsMap`

Parameters

Name	Type
`type`	`K`
`callback`	`EventCallback_2`<`StageEventsMap`[`K`]>

Returns

any

Inherited from

EventTarget.removeEventListener

removeLayer

removeLayer(layer): Stage

移除一个Layer

Parameters

Name	Type
`layer`	`Layer`

Returns

Stage

resize

resize(newWidth, newHeight): void

指定尺寸（仅在 stage.config.autoResize为false的时候有效)

Parameters

Name	Type
`newWidth`	`number`
`newHeight`	`number`

Returns

void

saveAsLocalImage

saveAsLocalImage(): void

导出图片并下载到本地

Returns

void

saveImageInfo

saveImageInfo(): Promise<string>

导出成图片并在浏览器新标签页打开

Returns

Promise<string>

setBackground

setBackground(styleOption): void

设置背景

Parameters

Name	Type
`styleOption`	`Object`
`styleOption.background?`	`string`
`styleOption.backgroundImage?`	`string`
`styleOption.backgroundRepeat?`	`string`
`styleOption.backgroundPosition?`	`string`
`styleOption.backgroundSize?`	`string`

Returns

void

setCamera

setCamera(camera): void

设置当前相机

Parameters

Name	Type
`camera`	`Camera`

Returns

void

setCursor

setCursor(cursor): string

设置光标, 相当于: cavnas.style.cursor = cursor;

Parameters

Name	Type
`cursor`	`string`

Returns

string

setMode

setMode(mode): void

设置场景模式,模式有：normal（默认值)、select(框选)、edit(编辑)、drag(拖拽)

触发 'modeChange'事件，可捕获

Parameters

Name	Type	Description
`mode`	`StageModeType`	场景模式

Returns

void

show

show(): Promise<HTMLImageElement | HTMLCanvasElement>

显示

所有Layer可见, 既:调用所有Layer的show方法

Returns

Promise<HTMLImageElement | HTMLCanvasElement>

showAxis

showAxis(): Stage

显示坐标轴

Returns

Stage

showDebugPanel

showDebugPanel(): void

显示左上角的调试信息

Returns

void

showGrid

showGrid(options?): void

显示网格辅助

Parameters

Name	Type	Description
`options?`	`ShowGridOptions`

Returns

void

showOverview

showOverview(styles?): void

显示缩略图（所在div的css属性position为 absolute）可通过css样式来定位，例如：

stage.showOverview({
   left: 0,
   bottom: -1
});

Parameters

Name	Type
`styles?`	`Object`

Returns

void

showRuler

showRuler(options?): void

显示标尺可以设置：主颜色，是否显示贴边的轴线（默认不显示）

Parameters

Name	Type	Description
`options?`	`Object`
`options.majorColor?`	`string`	-
`options.showBorderLines?`	`boolean`	-

Returns

void

toDataURL

toDataURL(): Promise<string>

获取整个Stage的图像数据，Base64编码

例如： data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby...

Returns

Promise<string>

toJSON

toJSON(): SerializedJsonType

Returns

SerializedJsonType

toJSONWithBase64

toJSONWithBase64(): Promise<SerializedJsonType>

将所有图片资源转换为Base64打包内嵌进JSON中, 该方法是异步的

// 情形1
stage.toJSONWithBase64().then(json => {
   console.log(json);
});

// 情形2, 同上，使用js的新语法 await
let json = await stage.toJSONWithBase64();

Returns

Promise<SerializedJsonType>

update

update(): void

请求重绘一次（不立即绘制，而是在下一帧的时间窗口重绘）

极短时间内的多次请求会合并成一次绘制，不用担心性能问题

Returns

void

Class: Stage ​

Hierarchy ​

Table of contents ​

Constructors ​

Properties ​

Accessors ​

Methods ​

Constructors ​

constructor ​

Parameters ​

Overrides ​

Properties ​

animationSystem ​

camera ​

config ​

contextmenuEnabled ​

debugPanel ​

destroyed ​

domElement ​

effectSystem ​

exportSystem ​

graphSystem ​

halfHeight ​

halfWidth ​

height ​

inputSystem ​

keyboard ​

layoutSystem ​

mode ​

overview ​

renderSystem ​

resourceSystem ​

selectedGroup ​

serializerSystem ​

styleSystem ​

uiContainer ​

version ​

viewLayers ​

width ​

Accessors ​

enableContextmenu ​

Returns ​

Methods ​

addEventListener ​

Type parameters ​

Parameters ​

Returns ​

Returns ​

Inherited from ​

addLayer ​

Parameters ​

Returns ​

destroy ​

Parameters ​

Returns ​

dispatchEvent ​

Parameters ​

Returns ​

Inherited from ​

download ​

Parameters ​

Returns ​

fromJSON ​

Parameters ​

Returns ​

fullScreen ​

Returns ​

fullWindow ​

Returns ​

getAllVisibleLayers ​

Returns ​

getCenter ​

Returns ​

getCurrentLayer ​

Returns ​

getCursor ​

Returns ​

getRect ​

Returns ​

hasListener ​

Class: Stage

Hierarchy

Table of contents

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Overrides

Properties

animationSystem

camera

config

contextmenuEnabled

debugPanel

destroyed

domElement

effectSystem

exportSystem

graphSystem

halfHeight

halfWidth

height

inputSystem

keyboard

layoutSystem

mode

overview

renderSystem

resourceSystem

selectedGroup

serializerSystem

styleSystem

uiContainer

version

viewLayers

width

Accessors

enableContextmenu

Returns

Methods

addEventListener

Type parameters

Parameters

Returns

Returns

Inherited from

addLayer

Parameters

Returns

destroy

Parameters

Returns

dispatchEvent

Parameters

Returns

Inherited from

download

Parameters

Returns

fromJSON

Parameters

Returns

fullScreen

Returns

fullWindow

Returns

getAllVisibleLayers

Returns

getCenter

Returns

getCurrentLayer

Returns

getCursor

Returns

getRect

Returns

hasListener