Paint

SolidPaint | GradientPaint | ImagePaint

填充, 可使用 PaintString 字符串代替

用于填充背景、描边等

type Paint = SolidPaint | GradientPaint | ImagePaint

公共属性

type： PaintType

填充类型

blendMode?： BlendMode

混合模式，默认为 normal

visible?： boolean

是否可见，默认为 true

opacity?: number

不透明度，默认为 1

interface PaintBase {
  type: PaintType
  blendMode?: BlendMode
  visible?: boolean
  opacity?: number
}

type PaintType =
  | 'image' // 图片
  | 'solid' // 纯色
  | GradientType // 渐变

SolidPaint

纯色填充， 可使用 SolidPaintString 字符串代替

type：'solid'

纯色类型

color： Color

颜色

interface SolidPaint extends PaintBase {
  type: 'solid'
  color: Color
}

GradientPaint

渐变填充 可使用 GradientPaintString 字符串代替

type：GradientType

渐变类型

from：IPointData

渐变的起始控制点, 相对当前对象的宽高比例， 中心点为 {x: 0.5, y: 0.5}

to：IPointData

渐变的末端控制点

stretch：number

垂直于 from - to 的拉伸比例， 使 radial ｜ angular 渐变产生椭圆形状

stops: ColorStop[]

颜色数组及其在渐变中的位置。

interface IGradientPaint extends PaintBase {
  type: IGradientType
  from: IPointData
  to: IPointData
  stretch: number
  stops: IColorStop[]
}

type IGradientType =
  | 'gradient-linear' // 线性渐变， 默认 from: {x: 0.5, y: 0}, to: {x:0.5, y: 1}
  | 'gradient-radial' // 径向渐变，默认 from: {x: 0.5, y: 0.5}, to: {x:0.5, y: 1}
  | 'gradient-angular' // 角度渐变，同上
  | 'gradient-diamond' // 菱形渐变，同上

interface ColorStop {
  offset: number
  color: Color
}

ImagePaint

图片填充, 可使用 ImagePaintString 字符串代替

type：'image'

图片类型

url：string

图片 url 或图片的 hash 值, 可通过 Leafer.getImage(url) 异步获取

mode：ImagePaintMode

图片填充模式

transform：IMatrixData

裁剪图片的变换矩阵，mode 为 'crop' 有效

scale: number

平铺图片的缩放比例，mode 为 'tile' 有效

rotation: number

图片旋转角度，mode 为 'fill' | 'fit' | 'tile' 有效, 只能进行 90 度旋转

filters?: ImageFilters

图片滤镜设置，默认为 0.0，取值范围为 -1.0 ～ 1.0

interface ImagePaint extends PaintBase {
  type: 'image'
  url: string
  mode: ImagePaintMode
  transform: IMatrixData
  scale: number
  rotation: number
  filters?: ImageFilters
}

type ImagePaintMode =
  | 'fill' // 填充 （相当于background-size: cover）
  | 'fit' // 适应 (相当于background-size: contain)
  | 'crop' // 裁切 (通过transform定位)
  | 'tile' // 平铺 (相当于background-repeat)

interface ImageFilters {
  exposure?: number // 曝光
  contrast?: number // 对比度
  saturation?: number // 饱和度
  temperature?: number // 色温
  tint?: number // 色调
  highlights?: number // 高光
  shadows?: number // 阴影
}