Gradients 渐变填充

渐变填充用于创建颜色过渡效果，支持线性、径向和锥形渐变。

字段定义

interface Gradient {
  type: 'linear' | 'radial' | 'conic';  // 渐变类型
  angle?: number;                        // 角度（线性渐变）
  stops: GradientStop[];                 // 颜色节点
}

interface GradientStop {
  offset: number;   // 位置 0-1
  color: string;    // 颜色值
}

线性渐变 (linear)

angle 角度

角度	方向
0	从下到上
90	从左到右
180	从上到下
270	从右到左
45	左下到右上
135	左上到右下

示例

水平渐变：

{
  "fill": {
    "type": "linear",
    "angle": 90,
    "stops": [
      { "offset": 0, "color": "#ff5733" },
      { "offset": 1, "color": "#33ff57" }
    ]
  }
}

对角渐变：

{
  "fill": {
    "type": "linear",
    "angle": 135,
    "stops": [
      { "offset": 0, "color": "#1a1a2e" },
      { "offset": 1, "color": "#0f3460" }
    ]
  }
}

多色渐变：

{
  "fill": {
    "type": "linear",
    "angle": 90,
    "stops": [
      { "offset": 0, "color": "#ff0000" },
      { "offset": 0.5, "color": "#00ff00" },
      { "offset": 1, "color": "#0000ff" }
    ]
  }
}

径向渐变 (radial)

径向渐变从中心向外辐射。

基础径向渐变：

{
  "fill": {
    "type": "radial",
    "stops": [
      { "offset": 0, "color": "#ffffff" },
      { "offset": 1, "color": "#000000" }
    ]
  }
}

光晕效果：

{
  "fill": {
    "type": "radial",
    "stops": [
      { "offset": 0, "color": "rgba(255, 255, 255, 0.8)" },
      { "offset": 0.5, "color": "rgba(255, 255, 255, 0.3)" },
      { "offset": 1, "color": "rgba(255, 255, 255, 0)" }
    ]
  }
}

锥形渐变 (conic)

锥形渐变围绕中心点旋转。

色轮效果：

{
  "fill": {
    "type": "conic",
    "stops": [
      { "offset": 0, "color": "#ff0000" },
      { "offset": 0.17, "color": "#ffff00" },
      { "offset": 0.33, "color": "#00ff00" },
      { "offset": 0.5, "color": "#00ffff" },
      { "offset": 0.67, "color": "#0000ff" },
      { "offset": 0.83, "color": "#ff00ff" },
      { "offset": 1, "color": "#ff0000" }
    ]
  }
}

颜色节点 (stops)

offset 位置

范围 0-1，表示在渐变路径上的位置：

0 = 起点
1 = 终点
0.5 = 中点

color 颜色

支持多种颜色格式：

格式	示例
十六进制	`#ff5733`
十六进制带透明度	`#ff573380`
RGB	`rgb(255, 87, 51)`
RGBA	`rgba(255, 87, 51, 0.5)`
颜色名称	`red`, `blue`, `transparent`

完整示例

背景渐变

{
  "type": "rect",
  "transform": { "width": "100%", "height": "100%" },
  "style": {
    "fill": {
      "type": "linear",
      "angle": 135,
      "stops": [
        { "offset": 0, "color": "#1a1a2e" },
        { "offset": 0.5, "color": "#16213e" },
        { "offset": 1, "color": "#0f3460" }
      ]
    }
  }
}

文字渐变

{
  "type": "text",
  "text": "渐变文字",
  "style": {
    "fontSize": 72,
    "fontWeight": 700,
    "fill": {
      "type": "linear",
      "angle": 90,
      "stops": [
        { "offset": 0, "color": "#f093fb" },
        { "offset": 1, "color": "#f5576c" }
      ]
    }
  }
}

常用渐变预设

蓝紫渐变

{
  "type": "linear",
  "angle": 135,
  "stops": [
    { "offset": 0, "color": "#667eea" },
    { "offset": 1, "color": "#764ba2" }
  ]
}

青绿渐变

{
  "type": "linear",
  "angle": 135,
  "stops": [
    { "offset": 0, "color": "#11998e" },
    { "offset": 1, "color": "#38ef7d" }
  ]
}

火焰渐变

{
  "type": "linear",
  "angle": 180,
  "stops": [
    { "offset": 0, "color": "#f12711" },
    { "offset": 1, "color": "#f5af19" }
  ]
}

深海渐变

{
  "type": "linear",
  "angle": 180,
  "stops": [
    { "offset": 0, "color": "#0f2027" },
    { "offset": 0.5, "color": "#203a43" },
    { "offset": 1, "color": "#2c5364" }
  ]
}

极光渐变

{
  "type": "linear",
  "angle": 135,
  "stops": [
    { "offset": 0, "color": "#00c6ff" },
    { "offset": 1, "color": "#0072ff" }
  ]
}

字段说明表

Gradient

字段	类型	必填	默认值	描述
type	string	是	-	渐变类型
angle	number	否	0	角度（线性渐变）
stops	GradientStop[]	是	-	颜色节点

GradientStop

字段	类型	必填	范围	描述
offset	number	是	0-1	位置
color	string	是	-	颜色值

最佳实践

颜色节点数量：建议 2-5 个，过多会增加渲染负担
透明渐变：使用 RGBA 格式创建透明过渡效果
角度选择：水平用 90°，垂直用 180°，对角用 45° 或 135°
性能考虑：径向渐变比线性渐变稍慢
兼容性：确保颜色格式正确，推荐使用十六进制或 RGBA

Gradients 渐变填充

On this page