创建 Leafer

Leafer 实例是一个树状结构（提供了布局、渲染等管理功能），能够独立运行。作为根节点，可以往里面添加子元素，并且子元素可以通过 Group / Box 层层嵌套，组成一颗复杂的渲染树。

创建固定宽高的 Leafer

view 参数支持 window 、div、canvas 标签对象，注意 view 为 id 字符串时不用加 # 号。

import { Leafer } from 'leafer-ui'

new Leafer({
    view: 'id', // 支持 window 、div、canvas 标签对象， 可使用id字符串(不用加 # 号)
    width: 600, // 不能设置为 0， 否则会变成自动布局
    height: 600
})

创建自适应布局的 Leafer

当画布的父节点尺寸改变后会自动 resize， 了解详情。

import { Leafer } from 'leafer-ui'

new Leafer({ view: window })

// 等同于 { view: window, top:0, right: 0, bottom: 0, left: 0 }

创建自动生长的 Leafer

画布大小会生长，自动贴合实际内容，用于快速在 HTML 中嵌入 Leafer 元素，了解详情。

注意 App 结构 暂不支持此功能。

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

const leafer = new Leafer({
    view: window,
    grow: true, // 自动生长
    // growWidth: true, // 进一步细化宽度是否生长， 默认同 grow
    // growHeight: true  // 进一步细化高度是否生长， 默认同 grow
    fill: 'gray'
})

const rect = Rect.one({ fill: '#32cd79', draggable: true }, 100, 100, 200, 200)

leafer.add(rect) // 拖拽矩形可以看到画布在生长，自动贴合内容

详细了解

Leafer

配置 Leafer

基础     视口类型     画布     点按    触屏     滚轮

下一步

创建元素