设置样式

初始化样式

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

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',
    stroke: 'black',
    strokeWidth: 2
})
leafer.add(rect)

修改样式

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

ts

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

简洁修改

ts

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

重置样式

ts

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

使用 JSON

ts

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)