LeaferJS

配置应用

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

import { Leafer } from 'leafer-ui'

const config = {
  view: 'id',
  start: true,
}

const leafer = new Leafer(config)

// 部分配置可在运行中实时修改生效， 如：

leafer.config.usePartRender = false
leafer.config.pointer.autoMoveDistance = 5

应用

autoStart: boolean

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

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

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

// create leafs ...

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

画布

view

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

width: number

设置画布高度。

height: number

设置画布宽度。

pixelRatio: number

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

fill: string

设置背景颜色。

hittable: boolean

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

import { Leafer } from "leafer-ui"

const leafer = new Leafer({
  view: document,
  width: 800,
  height: 600
  pixelRatio: 2,
  fill: '#F6F6F6',
  hittable: false
})

渲染

usePartRender: boolean

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

自动布局

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

top: number

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

left: number

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

right: number

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

bottom: number

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

import { Leafer } from 'leafer-ui'

const leafer = new Leafer({
  view: window,
  top: 50,
  right: 0,
  bottom: 30,
  width: 200,
})

监听 Resize 事件

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

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

leafer.on(ResizeEvent.RESIZE, (e: ResizeEvent) => {
  console.log(e.width, e.height, e.pixelRatio, e.old)
})

视窗交互

useZoom: boolean

是否使用视窗缩放交互功能， 默认为 true。

停用后，只能滚动页面，适用于文档类应用。

useMove: boolean

是否使用视窗滚动交互功能， 默认为 true。

停用后，缩放交互功能也会停用，之后可以进行自定义视窗交互。

自定义视窗交互

设备交互

pointer

pointer.hitRadius: number

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

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

pointer.through: boolean

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

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

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

const data = {
  x: 100,
  y: 100,
  width: 200,
  height: 200,
  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) // throughPath: ILeafList = { list: [bottomRect, rect, leafer] }
})

pointer.clickTime: number

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

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

pointer.longPressTime: number

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

pointer.transformTime: number

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

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

pointer.dragDistance: number

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

pointer.swipeDistance: number

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

pointer.autoMoveDistance: number

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

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

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

const leafer = new Leafer({
  view: window,
  pointer: {
    autoMoveDistance: 10, // 加快平移速度
  },
})

const data = {
  x: 100,
  y: 100,
  width: 200,
  height: 200,
  fill: '#32cd79',
  draggable: true,
}

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

data.y = 400
leafer.add(new Rect(data))

wheel

wheel.zoomMode: boolean

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

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

鼠标滚轮缩放模式

wheel.zoomSpeed: number

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

wheel.moveSpeed: number

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

wheel.rotateSpeed: number

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