设置样式

初始化样式

创建一个带边框样式的矩形。

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',
    stroke: 'black',
    strokeWidth: 2
})

leafer.add(rect)

修改样式

注意事项

元素只能检测到 第一层级属性 的变化，如：修改 rect.fill.url = url 是不会渲染更新的。

rect.stroke = 'blue'
rect.strokeWidth = 4

简洁修改

rect.set({
    stroke: 'blue',
    strokeWidth: 4
})

重置样式

rect.reset() // 完全重置

rect.reset({ // 重置为新样式
    stroke: 'blue',
    strokeWidth: 4
})

使用 JSON

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

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

const group = new Group()

leafer.add(group)

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

group.set(json)

下一步

事件处理