Stage

Stage

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

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

构造器

new Stage(domOrId)

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

参数:
Name Type Description
domOrId string

or id

属性

height :Number

高度

toolbar :Toolbar

工具条

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