Skip to content

创建图形

标准创建

创建一个有背景色的矩形。

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

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

const rect = new Rect({ 
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    fill: '#32cd79' // 背景色
})

leafer.add(rect)

简洁创建

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

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

// one( style, x?, y?, width?, height?)
const rect = Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200)

leafer.add(rect)

使用 tag

ts
import { Leafer, UI } from 'leafer-ui'

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

const rect = UI.one({ 
    tag: 'Rect',
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    fill: '#32cd79'
})

leafer.add(rect)

使用 JSON

ts
import { Group, Leafer } from 'leafer-ui'

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

const json = { "x": 20, "y": 20, "children": [{ "tag": "Rect", "x": 100, "y": 100, "width": 200, "height": 200, "fill": "#32cd79", "draggable": true }] }

const group = new Group(json)

leafer.add(group)

了解 JSON 数据 导入导出

下一步

设置样式

Released under the MIT License.