LinearGradient 对象

线性渐变对象, 可设置给 fill 或 stroke 属性。

关键属性

type: string

填充类型为 linear。

from?: IAlign | IUnitPointData

渐变的起始控制点, 相对元素的实际内容定位， 默认为 top。

// 方位
type IAlign =
  | 'top-left'
  | 'top'
  | 'top-right'
  | 'right'
  | 'bottom-right'
  | 'bottom'
  | 'bottom-left'
  | 'left'
  | 'center'

from: 'top'

// 坐标点
interface IUnitPointData {
  type?: 'percent' | 'px'
  x: number
  y: number
}

from: {
  type: 'percent',
  x: 0.5, // 50% width  百分比坐标点
  y: 0, // 0% height
}

from: {
  x: 50, // 50px 像素值坐标点
  y: 0, //  0px
}

to?: IAlign | IUnitPointData

渐变的末端控制点, 相对元素的实际内容定位， 默认为 bottom。

stops: ColorStop[] ｜ StringColor[]

渐变色标数组。

如果设置纯字符串颜色的数组，将会自动计算 offset。

基础属性

blendMode?: BlendMode

混合模式，默认为 normal。

visible?: boolean

是否可见，默认为 true。

opacity?: number

不透明度，默认为 1，暂时仅针对渐变色标中 color 为 颜色对象 有效。

子描边属性

子描边属性

style?: IStrokeStyle

当为元素设置多个描边时，可设置子描边样式 style ，用于覆盖 主描边样式。

可形成蚂蚁线、模拟内中外三层描边等各种效果。

纯色、 线性渐变、径向渐变、角度渐变、图案 等类型均支持子描边样式。

interface IStrokeStyle {
    strokeWidth?: number // 描边的宽度
    strokeWidthFixed?: boolean // 是否固定线宽，不随画布视图放大
    strokeCap?: 'none' | 'round' | 'square' // 无 | 圆形 | 方形 (描边的端点形状)
    strokeJoin?: 'miter' ｜ 'bevel' | 'round' //  直角 ｜ 平角 ｜ 圆角 (描边的拐角处理)
    dashPattern?: number[] // 虚线描边的数值
    dashOffset?: number // 虚线描边的起点偏移值
}

// 蚂蚁线效果
rect.stroke = [
    {type: 'solid', color: 'white'}, // 第二个描边为虚线
    {type: 'solid', color: 'black', style: {  dashPattern: [3, 3] }}
]

// 模拟内中外三层描边效果
rect.stroke = [
    {type: 'solid', color: 'white'}, // 多个描边宽度
    {type: 'solid', color: 'black', style: {  strokeWidth: 5 }},
    {type: 'solid', color: 'blue', style: {  strokeWidth: 10 }}
]

归属

UI 元素

示例

默认方向

从顶部居中 -> 底部居中垂直绘制的渐变

// #线性渐变填充 [默认方向]
import { Leafer, Rect } from 'leafer-ui'

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

const rect = new Rect({
    width: 100,
    height: 100,
    fill: {
        type: 'linear', // 从顶部居中 -> 底部居中垂直绘制的渐变
        stops: ['#FF4B4B', '#FEB027']
    },
})

leafer.add(rect)

控制方向

从左上角 -> 右下角呈 45 度绘制的渐变。

// #线性渐变填充 [控制方向]
import { Leafer, Rect } from 'leafer-ui'

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

const rect = new Rect({
    width: 100,
    height: 100,
    fill: {
        type: 'linear', // 从左上角 -> 右下角呈 45 度绘制的渐变
        from: 'top-left',
        to: 'bottom-right',
        stops: [{ offset: 0, color: '#FEB027' }, { offset: 1, color: '#79CB4D' }]
    },
})

leafer.add(rect)

设置透明度

一般用于多个填充做叠加效果。

opacity 暂时只对 color 为 颜色对象 有效， 或直接使用 rgba(255,75,75,0,5) 字符串颜色。

// #线性渐变填充 [设置不透明度]
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)