Skip to content

应用配置

通过配置满足您的个性化需求。

初始化完成后,部分属性可以实时修改 leafer.config

应用属性

start: boolean

是否自动启动应用,默认为 true。

应用启动后,可以通过 leafer.stop(), leafer.start() 手动控制渲染。

type: string

应用类型,默认 design, 自定义为 draw

比如绘图是 draw、设计工具是 design、文档是 document、游戏是 game,不同的应用类型窗口交互方式会不一样, 目前只实现了 draw、design, 后续会添加其他场景。

画布属性

view: object | string

放置应用的的视图容器, 支持 window 、document、div、canvas 标签, 可使用 id 字符串。

width: number

设置画布高度。

height: number

设置画布宽度。

pixelRatio: number

设置画布像素比, 默认使用当前设备像素比(普通屏为 1,高清屏为 2,超高清屏为 3)。

fill: string

设置背景颜色。

hittable: boolean

设置是否响应碰撞事件(交互事件)。

smooth: boolean

设置是否平滑的绘制图片、画布元素。

自适应布局属性

当 width 或 height 不存在值时,画布会进行自动布局。

top: number

距离顶部的距离, 默认为 0。

left: number

距离左侧的距离, 默认为 0。

right: number

距离右侧的距离, 默认为 0。

bottom: number

距离底部的距离, 默认为 0。

渲染属性

应用运行中修改 leafer.config 立即生效。

usePartRender: boolean

是否使用局部渲染, 默认为 true

设备交互属性

cursor

cursor 对象,应用运行中修改 leafer.config 立即生效。

cursor.stop: boolean

是否停用光标功能,默认为 false

pointer

pointer 对象,应用运行中修改 leafer.config 立即生效。

pointer.hitRadius: number

光标的碰撞半径, 默认为 5。

TIP

当光标距离元素在 hitRadius 范围内时,应用可以拾取到元素,并进行了穿透检测,从多个碰撞到的元素中,优先拾取最符合碰撞条件的元素,防止误拾取。

pointer.through: boolean

点击事件是否获取穿透路径,通过穿透路径可以找到被当前元素遮挡的底部元素。

pointer.tapMore: boolean

tapdouble_taplong_tap 事件是否多个同时触发, 默认为 false (只触发其中之一)。

pointer.tapTime: number

双击事件中,每次单击和间隔的最大时长, 默认为 120ms。

必须在 120ms + 120ms 间隔 + 120ms 内 完成双击, 超过时长将不触发双击事件。

pointer.longPressTime: number

产生长按事件的最小时长,默认为 800ms。

pointer.transformTime: number

当缩放、滚动、旋转事件未继续触发,一段时间后,自动触发结束事件, 默认为 500ms。

由于鼠标滚轮、触摸板无法直接检测到结束事件,因此采用模拟方式触发。

pointer.dragHover: boolean

拖动过程中是否派发 pointer.overpointer.outpointer.enterpointer.leave事件,默认为 true。

pointer.dragDistance: number

超过一定的距离后,才能触发拖拽事件,防止误触,默认为 2。

pointer.swipeDistance: number

超过一定的距离后,才能触发滑动事件,默认为 20。

pointer.preventDefault: boolean

是否阻止浏览器默认事件, 默认为 false。

pointer.preventDefaultMenu: boolean

是否阻止浏览器默认菜单事件, 默认为 true.

wheel

wheel 对象, 应用运行中修改 leafer.config 立即生效。

wheel.zoomMode: boolean'mouse'

是否开启鼠标滚动直接缩放视图, 默认为 false。

当使用缩放模式时,可按下鼠标中键进行平移视图操作。

'mouse'

程序为了同时兼容触摸板的操作,可能会出现某些鼠标设备判断不精准的情况,设置为 'mouse' 可以实现准确的缩放(需要确认用户使用的是鼠标,而不是触摸板)。

鼠标滚动直接缩放示例

wheel.zoomSpeed: number

缩放的速度, 用于自定义适配不同浏览器的速度。

取值范围 0 ~ 1, 默认 0.5。

wheel.moveSpeed: number

滚动的速度, 用于自定义适配不同浏览器的速度。

取值范围 0 ~ 1, 默认 0.5。

wheel.rotateSpeed: number

旋转的速度, 用于自定义适配不同浏览器的速度。

取值范围 0 ~ 1, 默认 0.5。

wheel.preventDefault: boolean

是否阻止浏览器默认滚动页面事件,默认为 true。

如需支持同时滚动画布外的页面,设置为 false 即可。

zoom

缩放视图,应用运行中修改 leafer.config 立即生效。

zoom.min: number

视图最小缩放比例, 默认为 0.02。

zoom.max: number

视图最大缩放比例, 默认为 256。

move

平移视图,应用运行中修改 leafer.config 立即生效。

move.drag: boolean

拖拽时是否平移视图(将无法选取任何元素,一般用于预览模式),默认为 false。

move.holdSpaceKey: boolean

按住空白键拖拽是否平移视图,默认为 true。

move.holdMiddleKey: boolean

按住滚轮中键拖拽是否平移视图,默认为 true。

move.holdRightKey: boolean

按住右键拖拽是否平移视图,默认为 false。

move.dragEmpty: boolean

空白处拖拽是否平移视图,默认为 false。

move.dragOut: boolean

当拖拽元素到达界面边界时,是否自动平移视图,默认为 true。

move.autoDistance: number

设置 dragOut 每帧自动平移视图的距离,默认为 2。

示例

手动启动应用

当图形数量很多,异步创建完后,通过手动 start(),可以加快创建速度。

ts
import { Leafer } from 'leafer-ui'

const leafer = new Leafer({ 
    view: window,
    start: false
})

// async create leafs ...

leafer.start()

关闭局部渲染

ts
import { Leafer, Rect, Debug } from 'leafer-ui'

const leafer = new Leafer({ 
    view: window,
    usePartRender: false
})

Debug.showRepaint = true

const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })

leafer.add(rect)

关闭交互事件

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ 
    view: window,
    hittable: false
})

const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })

leafer.add(rect)

取消光标碰撞半径

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ 
    view: window,
    pointer: { hitRadius: 0 }
})

const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })

leafer.add(rect)

取消拖拽至边界时自动移动

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ 
    view: window,
    move: { dragOut: false }
})

const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true, })
const rect2 = new Rect({ x: 100, y: 300, fill: '#32cd79', draggable: true, })

leafer.add(rect)
leafer.add(rect2)

获取穿透路径

ts
import { Leafer, Rect, PointerEvent } from 'leafer-ui'

const leafer = new Leafer({ 
    view: window,
    pointer: { through: true }
})

const data = { x: 100, y: 100, fill: '#32cd00' }

const bottomRect = new Rect(data)
leafer.add(bottomRect)

const rect = new Rect(data)
leafer.add(rect)

rect.on(PointerEvent.DOWN, (e: PointerEvent) => {
    console.log(e.throughPath) //{ list: [bottomRect, rect, leafer] }
})

拖拽时直接平移视图(预览模式)

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))
leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 300, 100))


leafer.config.move.drag = true  // 预览模式,可在应用运行中实时修改。

下一步

恭喜 🎉,你已完成进阶知识的学习,接下来将带你了解几个十分重要的概念:

坐标体系

Released under the MIT License.