Style

这里将介绍Style类的实例化及实例属性，它负责图形的样式配置，颜色由Color 插件进行管理。实例化Graph图形时，style属性的值将用于 Style 实例化，你可以配置图形的描边颜色、填充颜色、阴影、字体等样式。

点击以展开或折叠 Style 相关类型

import { RgbaValue } from '@jiaminghi/color/types/types'

export type LineCap = 'butt' | 'round' | 'square'

export type LineJoin = 'round' | 'bevel' | 'miter'

export type HoverCursor =
  | 'url'
  | 'default'
  | 'auto'
  | 'crosshair'
  | 'pointer'
  | 'move'
  | 'e-resize'
  | 'ne-resize'
  | 'nw-resize'
  | 'n-resize'
  | 'se-resize'
  | 'sw-resize'
  | 's-resize'
  | 'w-resize'
  | 'text'
  | 'wait'
  | 'help'

export type FontStyle = 'normal' | 'italic' | 'oblique'

export type FontVarient = 'normal' | 'small-caps'

export type FontWeight = 'normal' | 'bold' | 'bolder' | 'lighter' | number

export type TextAlign = 'start' | 'end' | 'left' | 'right' | 'center'

export type TextBaseLine = 'top' | 'bottom' | 'middle' | 'alphabetic' | 'hanging'

export type GradientType = 'linear' | 'radial'

export type GradientWith = 'stroke' | 'fill'

export type LinearGradientParams = [number, number, number, number]

export type RadialGradientParams = [number, number, number, number, number, number]

export type GradientParams = LinearGradientParams | RadialGradientParams

export type GradientStops = 'auto' | number[]

export type StyleConfig<ColorType = RgbaValue> = {
  /**
   * @description Rgba value of graph fill color
   */
  fill?: ColorType
  /**
   * @description Rgba value of graph stroke color
   */
  stroke?: ColorType
  /**
   * @description Opacity of graph
   */
  opacity?: number
  /**
   * @description LineCap of Ctx
   */
  lineCap?: LineCap
  /**
   * @description Linejoin of Ctx
   */
  lineJoin?: LineJoin
  /**
   * @description LineDash of Ctx
   */
  lineDash?: number[]
  /**
   * @description LineDashOffset of Ctx
   */
  lineDashOffset?: number
  /**
   * @description ShadowBlur of Ctx
   */
  shadowBlur?: number
  /**
   * @description Rgba value of graph shadow color
   */
  shadowColor?: ColorType
  /**
   * @description ShadowOffsetX of Ctx
   */
  shadowOffsetX?: number
  /**
   * @description ShadowOffsetY of Ctx
   */
  shadowOffsetY?: number
  /**
   * @description LineWidth of Ctx
   */
  lineWidth?: number
  /**
   * @description Center point of the graph
   */
  graphCenter?: [number, number]
  /**
   * @description Graph scale
   */
  scale?: [number, number]
  /**
   * @description Graph rotation degree
   */
  rotate?: number
  /**
   * @description Graph translate distance
   */
  translate?: [number, number]
  /**
   * @description Cursor status when hover
   */
  hoverCursor?: HoverCursor
  /**
   * @description Font style of Ctx
   */
  fontStyle?: FontStyle
  /**
   * @description Font varient of Ctx
   */
  fontVarient?: FontVarient
  /**
   * @description Font weight of Ctx
   */
  fontWeight?: FontWeight
  /**
   * @description Font size of Ctx
   */
  fontSize?: number
  /**
   * @description Font family of Ctx
   */
  fontFamily?: string
  /**
   * @description TextAlign of Ctx
   */
  textAlign?: TextAlign
  /**
   * @description TextBaseline of Ctx
   */
  textBaseline?: TextBaseLine
  /**
   * @description The color used to create the gradient
   */
  gradientColor?: ColorType[]
  /**
   * @description Gradient type
   */
  gradientType?: GradientType
  /**
   * @description Gradient params
   */
  gradientParams?: GradientParams
  /**
   * @description When to use gradients
   */
  gradientWith?: GradientWith
  /**
   * @description Gradient color stops
   */
  gradientStops?: GradientStops
}

实例化

/**
 * @description Style 类
 *
 * 实例化时，配置项中的颜色支持'red'这样的有效颜色名，也支持rgb或rgba颜色
 * 同时也支持 RgbaValue 类型的颜色值
 * 实例化后，实例属性上的颜色值都会被转换为 RgbaValue 格式 便于颜色渐变支持
 */
class Style {
  constructor(style?: StyleConfig<string | RgbaValue>) {
    // ...
  }
}

实例属性

fill

/**
 * @description 图形填充颜色的Rgba值
 */
fill: RgbaValue = [0, 0, 0, 1]

stroke

/**
 * @description 图形描边颜色的Rgba值
 */
stroke: RgbaValue = [0, 0, 0, 0]

opacity

/**
 * @description 图形透明度
 */
opacity: number = 1

lineCap

/**
 * @description Ctx的lineCap属性值
 */
lineCap: LineCap = 'butt'

lineJoin

/**
 * @description Ctx的lineJoin属性值
 */
lineJoin: LineJoin = 'miter'

lineDash

/**
 * @description Ctx的lineDash属性值
 */
lineDash: number[] = []

lineDashOffset

/**
 * @description Ctx的lineDashOffset属性值
 */
lineDashOffset: number = 0

shadowBlur

/**
 * @description Ctx的shadowBlur属性值
 */
shadowBlur: number = 0

shadowColor

/**
 * @description 图形阴影颜色的Rgba值
 */
shadowColor: RgbaValue = [0, 0, 0, 0]

shadowOffsetX

/**
 * @description Ctx的shadowOffsetX属性值
 */
shadowOffsetX: number = 0

shadowOffsetY

/**
 * @description Ctx的shadowOffsetY属性值
 */
shadowOffsetY: number = 0

lineWidth

/**
 * @description Ctx的lineWidth属性值
 */
lineWidth: number = 1

graphCenter

/**
 * @description 图形中心点
 */
graphCenter?: [number, number]

scale

/**
 * @description 图形缩放倍数
 */
scale?: [number, number]

rotate

/**
 * @description 图形旋转角度
 */
rotate?: number

translate

/**
 * @description 图形位移距离
 */
translate?: [number, number]

hoverCursor

/**
 * @description 鼠标悬浮在图形上时cursor的值
 */
hoverCursor: HoverCursor = 'pointer'

fontStyle

/**
 * @description Ctx的fontStyle属性值
 */
fontStyle: FontStyle = 'normal'

fontVarient

/**
 * @description Ctx的fontVarient属性值
 */
fontVarient: FontVarient = 'normal'

fontWeight

/**
 * @description Ctx的fontWeight属性值
 */
fontWeight: FontWeight = 'normal'

fontSize

/**
 * @description Ctx的fontSize属性值
 */
fontSize: number = 10

fontFamily

/**
 * @description Ctx的fontFamily属性值
 */
fontFamily: string = 'Arial'

textAlign

/**
 * @description Ctx的textAlign属性值
 */
textAlign: TextAlign = 'center'

textBaseline

/**
 * @description Ctx的textBaseline属性值
 */
textBaseline: TextBaseLine = 'middle'

gradientColor

/**
 * @description 用于创建渐变色的颜色
 */
gradientColor?: RgbaValue[]

gradientType

/**
 * @description 渐变类型
 */
gradientType: GradientType = 'linear'

gradientParams

/**
 * @description 渐变参数
 * @example gradientParams = [x0, y0, x1, y1] (线性渐变)
 * @example gradientParams = [x0, y0, r0, x1, y1, r1] (径向渐变)
 */
gradientParams?: GradientParams

gradientWith

/**
 * @description 使用渐变色的属性
 *
 * 控制渐变色用于填充颜色还是描边颜色
 */
gradientWith: GradientWith = 'stroke'

gradientStops

/**
 * @description 渐变色位置
 * @example gradientStops = 'auto' | [0, .2, .3, 1]
 */
gradientStops: GradientStops = 'auto'

TIP

gradientColor和gradientParams被配置后将自动启用渐变。