Style 样式属性

Style 控制元素的外观样式，包括颜色、字体、阴影、滤镜等。

字段定义

interface Style {
  opacity?: number;          // 透明度 0-1
  fill?: string | Gradient;  // 填充色或渐变
  stroke?: string;           // 描边色
  strokeWidth?: number;      // 描边宽度

  // 文字
  fontFamily?: string;       // 字体名称
  fontSize?: number;         // 字体大小
  fontWeight?: number | string;  // 字重
  fontStyle?: 'normal' | 'italic';  // 字体样式
  lineHeight?: number;       // 行高
  letterSpacing?: number;    // 字间距
  textAlign?: 'left' | 'center' | 'right';  // 对齐
  textWrap?: boolean;        // 是否换行

  // 阴影
  shadowColor?: string;      // 阴影颜色
  shadowBlur?: number;       // 阴影模糊
  shadowOffset?: [number, number];  // 阴影偏移 [x, y]

  // 圆角
  borderRadius?: number | [number, number, number, number];  // 圆角

  // 滤镜
  filters?: Filter[];        // 滤镜列表
}

基础属性

opacity 透明度

控制元素的透明度，范围 0-1。

{
  "style": {
    "opacity": 0.5
  }
}

值	效果
0	完全透明（不可见）
0.5	半透明
1	完全不透明（默认）

fill 填充

设置元素的填充颜色或渐变。

纯色填充：

{
  "style": {
    "fill": "#ff5733"
  }
}

渐变填充：

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

stroke 描边

设置元素的描边颜色和宽度。

{
  "style": {
    "stroke": "#ffffff",
    "strokeWidth": 2
  }
}

文字属性

fontSize 字体大小

设置文本的字体大小（像素）。

场景	建议值
标题	48-96
正文	24-36
字幕	32-48
注释	16-24

fontWeight 字重

值	描述
100	Thin
300	Light
400	Normal
500	Medium
700	Bold
900	Black

textAlign 文本对齐

值	描述
left	左对齐
center	居中
right	右对齐

阴影属性

示例：文字发光效果

{
  "type": "text",
  "text": "发光文字",
  "style": {
    "fontSize": 72,
    "fill": "#ffffff",
    "shadowColor": "#00ffff",
    "shadowBlur": 30,
    "shadowOffset": [0, 0]
  }
}

圆角属性

borderRadius 圆角

统一圆角：

{
  "style": {
    "borderRadius": 20
  }
}

分别设置四个角：

{
  "style": {
    "borderRadius": [10, 20, 30, 40]
  }
}

顺序为：[左上, 右上, 右下, 左下]

圆形头像：

{
  "type": "rect",
  "transform": {
    "width": 100,
    "height": 100
  },
  "style": {
    "borderRadius": 50
  }
}

滤镜属性

支持的滤镜类型：

类型	描述	值范围
blur	模糊	0-100 (像素)
brightness	亮度	0-2 (1=正常)
contrast	对比度	0-2 (1=正常)
saturate	饱和度	0-2 (1=正常)
hue	色相旋转	0-360 (度)
grayscale	灰度	0-1
sepia	复古	0-1
invert	反色	0-1

示例：背景虚化

{
  "type": "image",
  "src": "background.jpg",
  "style": {
    "filters": [
      { "type": "blur", "value": 10 }
    ]
  }
}

字段说明表

字段	类型	必填	默认值	描述
opacity	number	否	1	透明度 0-1
fill	string \| Gradient	否	-	填充颜色或渐变
stroke	string	否	-	描边颜色
strokeWidth	number	否	1	描边宽度
fontFamily	string	否	-	字体名称
fontSize	number	否	16	字体大小
fontWeight	number \| string	否	400	字重
fontStyle	string	否	normal	字体样式
lineHeight	number	否	1.2	行高
letterSpacing	number	否	0	字间距
textAlign	string	否	left	文本对齐
textWrap	boolean	否	false	是否换行
shadowColor	string	否	-	阴影颜色
shadowBlur	number	否	0	阴影模糊
shadowOffset	[number, number]	否	[0, 0]	阴影偏移
borderRadius	number \| number[]	否	0	圆角
filters	Filter[]	否	[]	滤镜列表

最佳实践

颜色格式：使用十六进制 #ff5733 或 RGBA rgba(255, 87, 51, 0.8)
字体加载：确保在 assets 中定义并加载字体
阴影性能：过多的阴影效果可能影响渲染性能
滤镜叠加：多个滤镜按顺序依次应用
圆角限制：borderRadius 最大不超过元素宽高的一半

Style 样式属性

On this page