应用与引擎配置

基础     视口类型     画布     点按     多点     触屏     滚轮     平移视图     缩放视图

App 与 Leafer 的初始化基础配置。

关键属性

start: boolean

是否自动启动引擎，默认为 true。

启动后，可以通过 app.stop()、 app.start() 手动控制渲染。

渲染属性

引擎运行中修改 leafer.config 立即生效。

usePartRender: boolean

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

注意事项

App 结构 下需设置在 子层 Leafer 的 config 上，如 ground、tree、sky 层。

交互属性

引擎运行中修改 app.config 立即生效。

注意事项

App 结构 下只能设置在 App 的 config 上。

mobile: boolean

是否在手机端使用，自动优化体验（如停用 hover 事件），图形编辑器可配置 手势控制元素。

cursor: boolean

是否启用光标功能，默认为 true。

keyEvent: boolean

是否接收键盘事件， 默认为 true。

对齐像素

pointSnap: boolean

对齐逻辑像素：拖拽元素时对坐标进行 round 取整，避免产生小数。

引擎运行中修改 app.config 立即生效。

pixelSnap: boolean

对齐物理像素：避免居中线条/图片等元素存在小数坐标导致模糊。

不会修改元素数据，只在渲染的时候对乘以 pixelRatio 后计算的小数像素坐标取整，对居中对齐的 1 像素线条，坐标取整后偏移 0.5 像素。

想要图片不模糊，还可以继续配置 config.smooth 属性。

引擎运行中修改 leafer.confg / app.tree.config 立即生效。

示例

手动启动

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

Leafer

// #应用与引擎配置 - 手动启动应用 [Leafer]
import { Leafer } from 'leafer-ui'

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

// async create leafs ...

leafer.start()

App

// #应用与引擎配置 - 手动启动应用 [App]
import { App } from 'leafer-ui'

const app = new App({
    view: window,
    tree: {},
    start: false
})

// async create leafs ...

app.start()

关闭局部渲染

Leafer

// #应用与引擎配置 - 关闭局部渲染 [Leafer]
import { Leafer, Rect, Debug } from 'leafer-ui'

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

Debug.showRepaint = true

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

App

// #应用与引擎配置 - 关闭局部渲染 [App]
import { App, Rect, Debug } from 'leafer-ui'

const app = new App({
    view: window,
    tree: { usePartRender: false }
})

Debug.showRepaint = true

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