配置应用 ​

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

手动启动应用 ​

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

import { Leafer } from 'leafer-ui'

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

// async create leafs ...

leafer.start()

关闭局部渲染 ​

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)

关闭交互事件 ​

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)

取消光标碰撞半径 ​

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)

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

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

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

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)

获取穿透路径 ​

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] }
})

应用属性 ​

start: boolean ​

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

type: string ​

应用类型

画布属性 ​

view: object | string ​

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

width: number ​

设置画布高度。

height: number ​

设置画布宽度。

pixelRatio: number ​

设置画布分辨率， 默认使用当前设备分辨率。

fill: string ​

设置背景颜色。

hittable: boolean ​

设置是否响应碰撞事件（交互事件）。

自适应布局属性 ​

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

top: number ​

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

left: number ​

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

right: number ​

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

bottom: number ​

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

渲染属性 ​

应用运行中可以修改，立即生效。

usePartRender: boolean ​

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

设备交互属性 ​

应用运行中可以修改，立即生效。

pointer ​

pointer 对象

pointer.hitRadius: number ​

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

当光标距离元素在 hitRadius 范围内时，应用可以拾取到元素。

pointer.through: boolean ​

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

pointer.tapMulti: boolean ​

tap、double_tap、long_tap 事件会是否同时触发， 默认只触发其中之一。

pointer.tapTime: number ​

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

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

pointer.longPressTime: number ​

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

pointer.transformTime: number ​

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

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

pointer.dragHover: boolean ​

拖动过程中是否派发 pointer.over、pointer.out、pointer.enter、pointer.leave事件，默认为 true。

pointer.dragDistance: number ​

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

pointer.swipeDistance: number ​

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

pointer.autoMoveDistance: number ​

设置每次自动平移视图的距离，默认为 2。

当拖拽元素到达界面边界时，会自动进行平移视图。

pointer.preventDefault: boolean ​

是否阻止浏览器默认事件

wheel ​

wheel 对象

wheel.zoomMode: boolean ​

是否开启鼠标滚动进行缩放视图的模式， 默认为 false。

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

鼠标滚轮缩放模式

wheel.zoomSpeed: number ​

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

wheel.moveSpeed: number ​

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

wheel.rotateSpeed: number ​

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

wheel.preventDefault: boolean ​

是否阻止浏览器默认事件