应用配置 ​

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

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

应用属性 ​

start: boolean ​

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

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

type: string ​

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

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

draw：不添加视窗交互功能

design： 自动添加视窗交互功能，可以无限滚动、缩放页面。

document：自动添加视窗交互功能，限制在有内容的区域滚动页面，页面最小缩放比例为 1。

画布属性 ​

view: object | string ​

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

width: number ​

设置画布高度。

height: number ​

设置画布宽度。

pixelRatio: number ​

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

fill: string ​

设置背景颜色。

hittable: boolean ​

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

smooth: boolean ​

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

contextSettings: ICanvasRenderingContext2DSettings ​

原生画布的 context 设置， 了解更多。

canvas.getContext('2d', settings)

interface ICanvasRenderingContext2DSettings {
  alpha?: boolean // 画布是否包含alpha通道， 默认为false
  colorSpace?: 'display-p3' | 'srgb' // 颜色空间， 默认为srgb
  desynchronized?: boolean // 低延时渲染，默认为false
  willReadFrequently?: boolean // 用于 getImageData() 加速， 默认为false
}

自适应布局属性 ​

当 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。

pointer.through: boolean ​

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

pointer.tapMore: boolean ​

tap、double_tap、long_tap 事件是否多个同时触发， 默认为 false (只触发其中之一)。

pointer.tapTime: number ​

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

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

pointer.longPressTime: number ​

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

pointer.transformTime: number ​

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

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

pointer.hover: boolean ​

是否派发pointer.over、pointer.out、pointer.enter、pointer.leave事件, 默认为 true

手机端可设为 false。

pointer.dragHover: boolean ​

拖动过程中是否派发 pointer.over、pointer.out、pointer.enter、pointer.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。

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

鼠标滚动直接缩放示例

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.disabled: boolean ​

是否禁用缩放视图交互，默认为 false。

zoom.min: number ​

视图最小缩放比例， 默认为 0.01。

zoom.max: number ​

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

move ​

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

move.disabled: boolean ​

是否禁用平移视图交互，默认为 false。

move.scroll: boolean ｜ 'limit' ​

限制横向或竖向滚动， 默认为 false。

设置 'limit' 会限制在有内容的区域滚动，否则可以无限滚动。

一般用于适配 document、手机端上下滑动页面

move.drag: boolean ​

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

move.dragAnimate: boolean ​

拖拽视图结束时是否有惯性动画， 默认为 false。

move.holdSpaceKey: boolean ​

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

move.holdMiddleKey: boolean ​

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

move.holdRightKey: boolean ​

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

move.dragEmpty: boolean ​

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

move.dragOut: boolean ​

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

move.autoDistance: number ​

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

示例 ​

手动启动应用 ​

当图形数量很多，异步创建完后，通过手动 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,
    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)

获取穿透路径 ​

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

拖拽时直接平移视图（预览模式） ​

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  // 预览模式，可在应用运行中实时修改。

下一步 ​

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

坐标体系 ​