fill
填充，类似于 HTML5 中的 background-color，或文字的 color。
关键属性
fill: string | Paint ｜ Paint[]
填充颜色、图像，用于填充背景或文字。
支持纯色、 线性渐变、径向渐变、角度渐变、图案填充 等类型， 支持多个填充同时叠加。
归属
UI
示例
纯色填充
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({
width: 100,
height: 100,
fill: {
type: 'solid',
color: '#32cd79'
},
})
leafer.add(rect)渐变填充
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({
width: 100,
height: 100,
fill: {
type: 'linear',
stops: [{ offset: 0, color: '#FF4B4B' }, { offset: 1, color: '#FEB027' }]
},
})
leafer.add(rect)图案填充
图案填充 支持 覆盖、适应、裁剪、平铺等模式。
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({
width: 100,
height: 100,
fill: {
type: 'image',
url: '/image/leafer.jpg'
}
})
leafer.add(rect)多个填充叠加
填充的 opacity 暂时仅针对 颜色对象 和图片有效。
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({
width: 100,
height: 100,
fill: [
{
type: 'linear',
stops: [{ offset: 0, color: '#FF4B4B' }, { offset: 1, color: '#FEB027' }]
},
{
type: 'image',
url: '/image/leafer.jpg',
mode: 'cover',
opacity: 0.2
}]
})
leafer.add(rect)