AngularGradient
角度渐变对象, 可以用于填充与描边。暂时需要浏览器支持createConicGradient()方法。
关键属性
type: string
填充类型为 radial。
from?: IAlign | IUnitPointData
渐变的起始控制点, 相对元素的实际内容定位， 默认为 center。
ts
// 方位
type IAlign =
| 'top-left'
| 'top'
| 'top-right'
| 'right'
| 'bottom-right'
| 'bottom'
| 'bottom-left'
| 'left'
| 'center'
from: 'center'
// 坐标点
interface IUnitPointData {
type?: 'percent' | 'px'
x: number
y: number
}
from: {
type: 'percent',
x: 0.5, // 50% width 百分比坐标点
y: 0.5, // 50% height
}
from: {
x: 50, // 50px 像素值坐标点
y: 50, // 50px
}to?: IAlign | IUnitPointData
渐变的末端控制点，相对元素的实际内容定位， 默认为 bottom。
stretch?: number
垂直于 from -> to 拉伸，相对图形的宽度比例， 使渐变形成椭圆形， 默认为 1。
stops: ColorStop[] ｜ StringColor[]
渐变色标数组。
如果设置纯字符串颜色的数组，将会自动计算 offset。
基础属性
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: 'angular',
stops: ['#FF4B4B', '#FEB027', '#79CB4D', '#FF4B4B']
}
})
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: 'angular',
from: { type: 'percent', x: 0.3, y: 0.3 },
to: 'center',
stops: [{ offset: 0, color: '#FF4B4B' }, { offset: 0.5, color: '#FEB027' }, { offset: 1, color: '#FF4B4B' }]
},
})
leafer.add(rect)拉伸渐变
从中心 -> 右上角 呈 45 度, 且拉伸比例为 0.1 绘制的渐变。
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({
width: 100,
height: 100,
fill: {
type: "angular",
stretch: 0.1,
to: 'bottom-right',
stops: [{ offset: 0, color: '#FF4B4B' }, { offset: 0.3, color: '#FEB027' }, { offset: 0.7, color: '#79CB4D' }, { offset: 1, color: '#FF4B4B' }]
}
})
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: 'angular',
opacity: 0.5,
stops: [
{ offset: 0, color: { r: 255, g: 75, b: 75 } },
{ offset: 0.3, color: { r: 254, g: 176, b: 39 } },
{ offset: 0.7, color: { r: 121, g: 203, b: 77 } },
{ offset: 1, color: { r: 255, g: 75, b: 75 } }
]
}
})
leafer.add(rect)