Class: Stage

顶层场景对象，下面可以有多个Layer, 一个Layer可以充当一个场景

创建时需要一个dom对象，通常是一个div，来作为渲染目标。

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

常用的一些方法:

// 显示工具栏
stage.showToolbar();

// 隐藏工具栏
stage.hideToolbar(); 

// 放大
stage.zoomIn();

// 缩小
stage.zoomOut();

// 取消所有缩放
stage.cancelZoom();

// 画面大小自动铺满
stage.zoomFullStage();

// 自动居中画面到Stage的中心
stage.translateToCenter();

// 全屏（浏览器内)
stage.fullWindow();

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

// 导出图片
stage.saveImageInfo();

Hierarchy

• EventTarget

  ↳ Stage

Table of contents

Constructors

• constructor

Properties

• Debug
• animationSystem
• behaviourSystem
• camera
• children
• config
• debugPanel
• destoryed
• domElement
• editor
• effectSystem
• exportSystem
• exporterSystem
• graphSystem
• handlerLayer
• height
• inputSystem
• keyboard
• layersContainer
• layoutSystem
• mode
• overview
• renderSystem
• resourceSystem
• selectedGroup
• serializerSystem
• styleSystem
• toolbar
• version
• visible
• width

Methods

• addChild
• addEventListener
• cancelZoom
• createLayer
• destory
• dispatchEvent
• download
• forceUpdate
• fullScreen
• fullWindow
• getChildren
• getCurrentLayer
• getCursor
• getToolbarHeight
• hasListener
• hide
• hideDebugPanel
• hideOverview
• hideToolbar
• on
• removeChild
• removeEventListener
• saveAsLocalImage
• saveImageInfo
• select
• setCursor
• setMode
• setToolbar
• show
• showDebugPanel
• showOverview
• showToolbar
• toDataURL
• translateToCenter
• update
• zoom
• zoomFullStage
• zoomIn
• zoomOut

Constructors

constructor

new Stage(rendererDom, config?)

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

Parameters

Name	Type
rendererDom	string | HTMLElement
config?	StageConfig

Overrides

EventTarget.constructor

Properties

Debug

Debug: Object = Debug

Type declaration

Name	Type
debugInfo	any
debugMode	() => void
isDebug	boolean
paintAABB	boolean
showFPS	boolean

---

animationSystem

animationSystem: AnimationSystem

动画系统

---

behaviourSystem

behaviourSystem: BehaviourSystem

行为控制系统

---

camera

camera: Camera

当前相机

---

children

children: Layer[] = []

加入Stage的Layer集合

---

config

config: StageConfig

---

debugPanel

debugPanel: DebugPanel

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

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

---

destoryed

destoryed: boolean = false

是否已经销毁

---

domElement

domElement: HTMLElement

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

---

editor

Optional editor: any

编辑模式- @jtopo/editor 模块存在时才有意义

---

effectSystem

effectSystem: EffectSystem

特效系统

---

exportSystem

exportSystem: ExportSystem

导出系统

---

exporterSystem

exporterSystem: ExportSystem

已过时，请使用 exportSystem 来替代

Deprecated

---

graphSystem

graphSystem: GraphSystem

图系统(图论相关)

---

handlerLayer

handlerLayer: HandlerLayer

仅系统内部控制用，开发人员无需关注，也不要修改任何属性

---

height

height: number

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

---

inputSystem

inputSystem: InputSystem

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

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

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

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

---

keyboard

keyboard: Keyboard

键盘抽象

---

layersContainer

layersContainer: HTMLElement

存放Layer的Dom对象，不要改动

---

layoutSystem

layoutSystem: LayoutSystem

布局控制系统

---

mode

mode: StageModeType = 'normal'

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

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

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

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

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

---

overview

overview: Overview

缩略图对象

---

renderSystem

renderSystem: RenderSystem

渲染

---

resourceSystem

resourceSystem: any

资源加载系统

---

selectedGroup

selectedGroup: SelectedGroup

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

---

serializerSystem

serializerSystem: SerializerSystem

序列化系统

---

styleSystem

styleSystem: StyleSystem

样式系统

---

toolbar

toolbar: Toolbar

工具条

---

version

version: string = VERSION

版本号

---

visible

visible: boolean = false

是否可见

---

width

width: number

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

Methods

addChild

addChild(layer): void

加入一个Layer

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

Parameters

Name	Type
layer	Layer

Returns

void

---

addEventListener

addEventListener(type, callback): void

增加事件监听

Parameters

Name	Type	Description
type	string	事件类型
callback	Function

Returns

void

Inherited from

EventTarget.addEventListener

---

cancelZoom

cancelZoom(): void

取消stage下所有Layer的缩放和偏移量

Deprecated

请使用 stage.camera.cancelZoom()

Returns

void

---

createLayer

createLayer(name?): Layer

创建一个Layer并加入到Stage

Since

2.4.0

Parameters

Name	Type
name?	string

Returns

Layer

---

destory

destory(cleanCache?): void

销毁

Parameters

Name	Type
cleanCache?	boolean

Returns

void

---

dispatchEvent

dispatchEvent(event): void

分发事件

Parameters

Name	Type
event	any

Returns

void

Inherited from

EventTarget.dispatchEvent

---

download

download(fileName, content): void

下载为json文件

Parameters

Name	Type
fileName	string
content	string

Returns

void

---

forceUpdate

forceUpdate(): void

Returns

void

---

fullScreen

fullScreen(): void

整个浏览器全屏

Returns

void

---

fullWindow

fullWindow(): void

在浏览器窗口内全屏

Returns

void

---

getChildren

getChildren(): Layer[]

获取所有子节点(所有Layer构成的数组)

Returns

Layer[]

---

getCurrentLayer

getCurrentLayer(): Layer

获取当前可见的第一个Layer，默认是第一个

Returns

Layer

---

getCursor

getCursor(): string

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

Returns

string

---

getToolbarHeight

getToolbarHeight(): number

获取工具栏高度

Returns

number

---

hasListener

hasListener(type): boolean

是否有该类型的监听

Parameters

Name	Type
type	string

Returns

boolean

Inherited from

EventTarget.hasListener

---

hide

hide(): void

图像不可见（脚本和动画仍然在执行）

Returns

void

---

hideDebugPanel

hideDebugPanel(): void

隐藏左上角的调试信息

Returns

void

---

hideOverview

hideOverview(): void

隐藏缩略图

Returns

void

---

hideToolbar

hideToolbar(): void

隐藏工具条

Returns

void

---

on

on(type, callback): void

增加事件监听

Parameters

Name	Type
type	string
callback	Function

Returns

void

Overrides

EventTarget.on

---

removeChild

removeChild(layer): Stage

移除一个Layer

Parameters

Name	Type
layer	Layer

Returns

Stage

---

removeEventListener

removeEventListener(type, callback): any

移除一个事件监听

Parameters

Name	Type
type	string
callback	Function

Returns

any

Inherited from

EventTarget.removeEventListener

---

saveAsLocalImage

saveAsLocalImage(): void

导出图片（png）, 并下载到本地

Returns

void

---

saveImageInfo

saveImageInfo(): void

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

Returns

void

---

select

select(objects): void

选中指定的对象

Parameters

Name	Type
objects	DisplayObject[]

Returns

void

---

setCursor

setCursor(cursor): void

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

Parameters

Name	Type
cursor	string

Returns

void

---

setMode

setMode(mode): void

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

触发 'modeChange'事件，可捕获

Parameters

Name	Type	Description
mode	StageModeType	场景模式

Returns

void

---

setToolbar

setToolbar(toolbar): void

Parameters

Name	Type
toolbar	any

Returns

void

---

show

show(): void

显示

Returns

void

---

showDebugPanel

showDebugPanel(): void

显示左上角的调试信息

Returns

void

---

showOverview

showOverview(styles): void

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

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

Parameters

Name	Type
styles	any

Returns

void

---

showToolbar

showToolbar(): void

显示工具条

Returns

void

---

toDataURL

toDataURL(): string

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

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

Returns

string

---

translateToCenter

translateToCenter(): void

居中显示

Returns

void

---

update

update(): void

更新，重绘一次

Returns

void

---

zoom

zoom(sx): void

放大到原来尺寸的125%

Deprecated

请使用 stage.camera.zoomBy()

Parameters

Name	Type
sx	number

Returns

void

---

zoomFullStage

zoomFullStage(): void

缩放到画布1：1并居中

Returns

void

---

zoomIn

zoomIn(s?): Stage

放大到原来尺寸的125%

Deprecated

请使用 stage.camera.zoomIn()

Parameters

Name	Type	Default value
s	number	1.25

Returns

Stage

---

zoomOut

zoomOut(s?): Stage

缩小到原来尺寸的80%

Deprecated

请使用 stage.camera.zoomOut()

Parameters

Name	Type	Default value
s	number	0.8

Returns

Stage