窗口类型
初始化窗口类型,应用运行中不可再更改。
关键属性
type: string
窗口类型,会附带场景逻辑,默认为 design, 自定义为 custom。
目前有 draw、block、design、document、custom, 后续会添加其他场景包(通过插件扩充场景)。
ts
type ILeaferType =
| 'draw' // 绘图场景
| 'block' // 块状融入场景
| 'editor' // 图形编辑场景
| 'design' // 设计场景
| 'board' // 白板场景
| 'document' // 文档场景
| 'app' // 应用场景
| 'website' // 网站场景
| 'game' // 游戏场景
| 'player' // 动画播放场景
| 'chart' // 图表场景
| 'custom' // 自定义
draw 类型
绘图场景: 不添加窗口功能。
ts
import { Leafer } from 'leafer-ui'
new Leafer({
view: window,
type: 'draw'
})
block 类型
块状融入场景:不添加窗口功能,且像 HTML 的普通块状元素一样融入到浏览器页面中。
移动端在 draggable / editable 为 false
,及没有监听 DragEvent.DRAG 的空间上拖拽可直接滑动页面。
ts
import { Leafer, Rect } from 'leafer-ui'
const div = document.body.appendChild(document.createElement('div'))
const canvas = document.body.appendChild(document.createElement('canvas'))
div.style.height = '600px'
div.innerText = '请往下滑,会出现一个矩形'
const leafer = new Leafer({ view: canvas, type: 'block', height: 800 })
const rect = new Rect({
x: 100,
y: 100,
width: 200,
height: 200,
fill: '#32cd79',
cornerRadius: [50, 80, 0, 80],
draggable: true
})
leafer.add(rect)
design 类型
设计场景: 可以无限滚动、缩放窗口。
ts
import { Leafer } from 'leafer-ui'
new Leafer({
view: window,
type: 'design' // 默认为design, 可不设置
})
document 类型
文档场景: 限制在内容区域滚动,页面最小缩放值为 1。
ts
import { Leafer } from 'leafer-ui'
new Leafer({
view: window,
type: 'document'
})
custom 类型
自定义场景: 不添加窗口,并可自定义窗口交互方式。
ts
import { Leafer } from 'leafer-ui'
new Leafer({
view: window,
type: 'custom'
})
可以通过监听 leafer 实例的 ZoomEvent 与 MoveEvent 事件进行视窗交互逻辑的自定义。
如需支持同时滚动画布外的页面请看 app.config.wheel.preventDefault。
ts
import { Leafer, Group, Rect, MoveEvent, ZoomEvent } from 'leafer-ui'
const leafer = new Leafer({
view: window,
type: 'custom'
})
const zoomLayer = new Group()
const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })
leafer.add(zoomLayer)
zoomLayer.add(rect)
leafer.on(MoveEvent.BEFORE_MOVE, function (e: MoveEvent) {
// custom ...
zoomLayer.moveWorld(e.moveX, e.moveY)
})
leafer.on(ZoomEvent.BEFORE_ZOOM, function (e: ZoomEvent) {
// custom ...
const center = { x: e.x, y: e.y }
zoomLayer.scaleOfWorld(center, e.scale)
})