LinearGradient
线性渐变对象, 可以用于填充与描边。
关键属性
type: string
填充类型为 linear。
from?: IPointData
渐变的起始控制点, 相对图形的宽高比例， 默认为：
ts
from: {x: 0.5, y: 0} // 顶部居中to?: IPointData
渐变的末端控制点, 相对图形的宽高比例， 默认为：
ts
to: {x: 0.5, y: 1} // 底部居中stops: ColorStop[]
渐变色标数组。
基础属性
blendMode?: BlendMode
混合模式，默认为 normal。
visible?: boolean
是否可见，默认为 true。
opacity?: number
不透明度，默认为 1，暂时仅针对渐变色标中 color 为 颜色对象 有效。
归属
UI
示例
默认方向
从顶部居中 -> 底部居中垂直绘制的渐变
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)控制方向
从左上角 -> 右下角呈 45 度绘制的渐变。
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({
width: 100,
height: 100,
fill: {
type: 'linear',
from: { x: 0, y: 0 },
to: { x: 1, y: 1 },
stops: [{ offset: 0, color: '#FEB027' }, { offset: 1, color: '#79CB4D' }]
},
})
leafer.add(rect)设置透明度
一般用于多个填充做叠加效果。
opacity 暂时只对 color 为 颜色对象 有效， 或直接使用 rgba(255,75,75,0,5) 字符串颜色。
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({
width: 100,
height: 100,
fill: {
type: 'linear',
opacity: 0.5,
stops: [
{ offset: 0, color: { r: 255, g: 75, b: 75 } },
{ offset: 1, color: { r: 254, g: 176, b: 39 } }
]
},
})
leafer.add(rect)