@jtopo/core / Stage

Class: Stage

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

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

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

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

Hierarchy

• EventTarget

  ↳ Stage

Table of contents

Constructors

• constructor

Properties

• animationSystem
• camera
• config
• debugPanel
• destroyed
• domElement
• effectSystem
• enableContextmenu
• exportSystem
• graphSystem
• halfHeight
• halfWidth
• height
• inputSystem
• keyboard
• layersContainer
• layoutSystem
• mode
• overview
• renderSystem
• resourceSystem
• selectedGroup
• serializerSystem
• styleSystem
• version
• viewLayers
• visible
• width

Methods

• addEventListener
• addLayer
• destroy
• dispatchEvent
• download
• fromJSON
• fullScreen
• fullWindow
• getAllVisibleLayers
• getCenter
• getCurrentLayer
• getCursor
• getRect
• hasListener
• hide
• hideAxis
• hideDebugPanel
• hideOverview
• removeChild
• removeEventListener
• removeLayer
• saveAsLocalImage
• saveImageInfo
• setCamera
• setCursor
• setMode
• show
• showAxis
• showDebugPanel
• showOverview
• toDataURL
• toJSON
• toJSONWithBase64
• update

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

---

debugPanel

debugPanel: DebugPanel

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

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

---

destroyed

destroyed: boolean = false

是否已经销毁

---

domElement

domElement: HTMLElement

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

---

effectSystem

effectSystem: EffectSystem

动效系统

---

enableContextmenu

enableContextmenu: boolean = false

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

---

exportSystem

exportSystem: ExportSystem

导出系统

---

graphSystem

graphSystem: GraphSystem

图系统(图论相关)

---

halfHeight

halfHeight: number

---

halfWidth

halfWidth: number

---

height

height: number

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

---

inputSystem

inputSystem: InputSystem

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

// 鼠标指针在画布上的位置 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

键盘抽象

---

layersContainer

layersContainer: HTMLElement

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

---

layoutSystem

layoutSystem: LayoutSystem

布局控制系统

---

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

样式系统

---

version

version: string = VERSION

版本号

---

viewLayers

viewLayers: Layer[] = []

加入Stage的Layer集合

---

visible

visible: boolean = false

是否可见

---

width

width: number

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

Methods

addEventListener

addEventListener(type, callback): void

增加事件监听

Parameters

Name	Type	Description
type	StageEventType	事件类型
callback	(e: StageEvent) => void

Returns

void

Overrides

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	Event | EventBase

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(type): boolean

是否有该类型的监听

Parameters

Name	Type
type	StageEventType

Returns

boolean

Overrides

EventTarget.hasListener

---

hide

hide(): void

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

Returns

void

---

hideAxis

hideAxis(): Stage

隐藏坐标轴

Returns

Stage

---

hideDebugPanel

hideDebugPanel(): void

隐藏左上角的调试信息

Returns

void

---

hideOverview

hideOverview(): void

隐藏缩略图

Returns

void

---

removeChild

removeChild(layer): Stage

移除一个Layer

Deprecated

已过时 removeLayer 代替

Parameters

Name	Type
layer	Layer

Returns

Stage

---

removeEventListener

removeEventListener(type, callback): any

移除一个事件监听

Parameters

Name	Type
type	StageEventType
callback	(e: StageEvent) => void

Returns

any

Overrides

EventTarget.removeEventListener

---

removeLayer

removeLayer(layer): Stage

移除一个Layer

Parameters

Name	Type
layer	Layer

Returns

Stage

---

saveAsLocalImage

saveAsLocalImage(): void

导出图片并下载到本地

Returns

void

---

saveImageInfo

saveImageInfo(): void

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

Returns

void

---

setCamera

setCamera(camera): void

设置当前相机

Parameters

Name	Type
camera	Camera

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

---

show

show(): Promise<HTMLImageElement | HTMLCanvasElement>

显示

Returns

Promise<HTMLImageElement | HTMLCanvasElement>

---

showAxis

showAxis(): Stage

显示坐标轴

Returns

Stage

---

showDebugPanel

showDebugPanel(): void

显示左上角的调试信息

Returns

void

---

showOverview

showOverview(styles?): void

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

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

Parameters

Name	Type
styles?	Object

Returns

void

---

toDataURL

toDataURL(): string

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

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

Returns

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