Skip to main content

Color 颜色

类型定义​

export type Color = PureColor | GradientColor;
export type PureColor = {
  type: 'pure';
  value?: string;
} & ColorBaseItem;

export type GradientColor = {
  type: 'gradient';
  gradientType: 'linear-gradient' | 'radial-gradient';
  deg: number;
  alpha: number;
  valueList?: Array<GradientColorItem>;
};

export type GradientColorItem = {
  percentPlus?: string | number;
  pickerVisible?: boolean;
  inst?: any;
  id?: any;
} & ColorBaseItem;

export type ColorBaseItem = {
  value?: string;
  alpha?: any;
  colorMode?: 'hex' | 'rgba';
};

类型分项说明​

1. Color（联合类型）​

类型描述
PureColor纯色类型（如 #FF0000）。
GradientColor渐变色类型（如线性渐变）。

2. PureColor（纯色）​

字段类型必选描述
type'pure'是固定为 'pure'，标识为纯色类型。
valuestring否颜色值（如 "#FF0000" 或 "rgba(255,0,0,0.5)"）。
继承字段ColorBaseItem-包含 value、alpha、colorMode 等基础字段（见下方 ColorBaseItem）。

3. GradientColor（渐变色）​

字段类型必选描述
type'gradient'是固定为 'gradient'，标识为渐变色类型。
gradientType'linear-gradient' 或 'radial-gradient'是渐变类型（线性或径向）。
degnumber是渐变角度（仅线性渐变有效，单位为度）。
alphanumber是整体透明度（0-100）。
valueListArray<GradientColorItem>否渐变色节点列表（见下方 GradientColorItem）。
继承字段ColorBaseItem-包含 value、alpha、colorMode 等基础字段。

4. GradientColorItem（渐变色节点）​

字段类型必选描述
percentPlusstring 或 number否渐变节点位置（如 "50%" 或 0.5）。
pickerVisibleboolean否是否显示颜色选择器（用于 UI 交互）。
instany否内部实例引用（通常为框架或库内部使用）。
idany否节点唯一标识符。
继承字段ColorBaseItem-包含 value、alpha、colorMode 等基础字段。

5. ColorBaseItem（基础颜色属性）​

字段类型必选描述
valuestring否颜色值（如 "#FF0000" 或 "rgba(255,0,0,0.5)"）。
alphaany否透明度（0-1 或动态值）。
colorMode'hex' 或 'rgba'否颜色模式（十六进制或 RGBA）。

示例​

纯色示例​

const red: PureColor = {
  type: 'pure',
  value: '#FF0000',
  colorMode: 'hex',
  alpha: 50,
};

渐变色示例​

const gradient: GradientColor = {
  type: 'gradient',
  gradientType: 'linear-gradient',
  deg: 90,
  alpha: 0.8,
  valueList: [
    { value: '#FF0000', percentPlus: '0%' },
    { value: '#00FF00', percentPlus: '100%' },
  ],
};

注意事项​

  1. Color 的联合类型
    • 使用时需通过 type 字段区分具体类型（'pure' 或 'gradient'）。
  2. 透明度字段
    • alpha 在 GradientColor 中为整体透明度，而在 ColorBaseItem 中为单个颜色节点的透明度。
  3. 扩展性
    • 可通过扩展 ColorBaseItem 或新增字段支持更复杂的颜色需求（如 HSL 模式）。