jtopo

Stage

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

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

构造器

new Stage(domOrId)

一个Dom节点对象或者一个dom的ID

参数:

Name	Type	Description
`domOrId`	string	or id

属性

height :Number

高度

工具条

width :Number

宽度

方法

addChild(layer)

加入一个Layer

参数:

Name	Type	Description
`layer`	Layer

cancelZoom()

取消缩放和layer的偏移量

destory()

销毁（移除Dom元素、停止渲染循环）

download(fileName)

下载为json文件

参数:

Name	Type	Description
`fileName`	String

fullScreen()

整个显示器全屏, 抛出fullScreen事件

fullWindow()

在浏览器内全屏

getChildren() → {Array}

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

调用返回:

Type: Array

getCurrentLayer()

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

getCursor()

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

getMouseDownPoint()

获取鼠标在场景中按下时的坐标{x,y}

getMousePoint()

获取鼠标在场景中的坐标{x,y}

hide()

全部不可见

hideOverview()

隐藏缩略图

hideToolbar()

隐藏工具条

on(type, callback)

增加事件监听, 例如： stage.on('mouseup', (event)=> {})

参数:

Name	Type	Description
`type`	string
`callback`	function

removeChild(layer)

移除一个Layer

参数:

Name	Type	Description
`layer`	Layer

saveAsLocalImage()

导出图片

setCursor(cursor)

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

参数:

Name	Type	Description
`cursor`	string

setMode(mode)

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

触发 'modeChange'事件，可捕获

参数:

Name	Type	Description
`mode`	string	场景模式

show()

显示

showOverview(styles)

显示缩略图（所在div的css属性position为 absolute）

可通过css样式来定位，例如：
    stage.showOverview({
        left: 0,
        bottom: -1
    });

参数:

Name	Type	Description
`styles`	Object

showToolbar()

显示工具条

translateToCenter()

居中显示

update()

更新，重绘一次

zoom(x, y, cx, cy)

指定坐标为中心，进行缩放

会抛出zoom事件, 可捕获,如：

stage.on('zoom', (event)=>{
     event.preventDefault(); // 阻止缩放
})

参数:

Name	Type	Description
`x`	number	缩放中心的x坐标
`y`	number	缩放中心的y坐标
`cx`	number	水平方向的缩放系数
`cy`	number	垂直方向的缩放系数

zoomFullStage()

缩放到画布1：1并居中

zoomIn()

放大到1.25

zoomOut()

缩小到0.8