构造器
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