F2 绘图属性 Style 完全指南：从位置、渐变到裁剪的移动端图表样式配置

F2 是基于 G 与仓库源码，系统梳理位置、通用、线条、文本四类绘图属性的取值与默认值，并深入讲解渐变色、纹理、裁剪三类高级填充方案及 TypeScript 类型定义。读完本文，你将能够使用 JSX 与 Style 结构精确控制 F2 中任意图形元素的视觉表现，并理解这些属性在 面积图源码 等真实组件中的落地方式。

属性列表

位置属性

对于不同的图形，"位置"的几何意义不同，F2 中主要分为三类：

图形	位置说明	使用的属性
Circle	圆心位置	cx/cy
Arc	圆心位置	cx/cy
Sector	圆心位置	cx/cy
Group	左上角顶点位置	x/y
Rect	左上角顶点位置	x/y
Image	左上角顶点位置	x/y
Text	文本锚点位置	x/y
Line	包围盒左上角顶点位置	x/y
Polyline	包围盒左上角顶点位置	x/y
Polygon	包围盒左上角顶点位置	x/y

此外还有一个通用锚点属性：

属性	类型	默认值	描述
anchor	[number, number]	[0, 0]	锚点位置

需要说明的是，Line、Polyline、Polygon 这类"多点图形"虽然通过 points 定义顶点，但其 x/y 描述的是包围盒（bounding box）左上角顶点的位置。在 F2 的组件源码中，折线/多边形正是通过 points 数组传点，例如 lineView.tsx 将记录中的点序列化为 points: fliterPoints.map((point) => [point.x, point.y]) 传入 <polyline>。

通用属性

通用属性控制图形的层级、可见性、透明度、填充/描边、阴影、滤镜与交互光标，是所有图形共有的能力：

属性	类型	默认值	描述
zIndex	number	0	控制图形显示层级
clip	Clip	-	创建元素的可显示区域，区域内的部分显示，区域外的隐藏。见裁剪
visibility	string	-	控制图形的可见性，可选值 'visible' / 'hidden' / 'collapse'（语义参考 CSS visibility）
opacity	number	1	设置图形和图片透明度，范围从 0.0（完全透明）到 1.0（完全不透明）
fill	string | Gradient | Pattern	-	填充色、渐变或纹理
fillOpacity	number	1	设置图形填充颜色的透明度，范围从 0.0 到 1.0
stroke	string | Gradient | Pattern	-	描边色、渐变或纹理
strokeOpacity	number	1	设置边颜色的透明度，范围从 0.0 到 1.0
shadowType	string	-	阴影类型，支持 'outer' 外阴影和 'inner' 内阴影
shadowColor	string	-	阴影颜色
shadowBlur	number	0	阴影模糊程度
shadowOffsetX	number	0	阴影水平偏移距离
shadowOffsetY	number	0	阴影垂直偏移距离
filter	string	-	滤镜，支持 blur、brightness、drop-shadow、contrast、grayscale、saturate、sepia、hue-rotate、invert 等
cursor	string	-	鼠标样式（移动端触屏场景通常配合事件使用）

关于 visibility、阴影、滤镜、光标等属性，其视觉语义与 Canvas 2D / CSS 对应标准一致，F2 在渲染层将其透传给底层绘图引擎。

从仓库源码可以印证这些属性在真实组件中的使用：在 theme.ts 中，axis 的 label 默认样式即为 { fill: '#808080', fontSize: '20px' }，grid 默认使用 { stroke: '#E8E8E8', lineWidth: '1px', lineDash: ['4px'] }；shape.area.default 设置了 fillOpacity: 0.1，这正是面积图默认半透明填充的实现来源；guide 的 polyline 默认样式则同时使用 lineWidth、lineJoin: 'round'、lineCap: 'round' 三个线条属性。这说明 Style 属性贯穿 F2 所有内置组件与主题体系。

线条属性

线条属性作用于描边类图形（Line、Polyline、Path 等）与文本的描边，控制线段末端、连接处与虚线样式：

属性	类型	默认值	描述
lineCap	string	'butt'	线段末端样式，可选值：'butt'、'round'、'square'
lineJoin	string	'miter'	线段连接处样式，可选值：'bevel'、'round'、'miter'
lineWidth	number	1	线段宽度
miterLimit	number	10	斜接面限制比例
lineDash	number[]	[]	虚线样式，如 [5, 5] 表示 5px 实线、5px 空白（对应 Canvas setLineDash 语义）

在折线图实现中，lineView.tsx 将 shape 样式与 lineWidth 合并到 <polyline> 的 style 上，因此通过 lineWidth、lineDash 等即可调整折线外观；主题中 line 的 default 样式为 lineWidth: '4px'，dash 样式为 lineDash: <a href="https://link.gitcode.com/i/8f678b4ed9afcd8def9e4096cc98f01d" target="_blank">'8px', '8px']（见 [theme.ts），即折线图虚线形态的实现依据。

文本属性

文本属性控制 <text> 标签的字体与排版，与 Canvas font 相关 API 对齐：

属性	类型	默认值	描述
textAlign	string	'start'	文本水平对齐方式，可选值：'start'、'center'、'end'、'left'、'right'
textBaseline	string	'alphabetic'	文本垂直基线，可选值：'top'、'hanging'、'middle'、'alphabetic'、'ideographic'、'bottom'
fontStyle	string	'normal'	字体样式，可选值：'normal'、'italic'、'oblique'
fontSize	number	12	字号（像素）
fontFamily	string	'sans-serif'	字体系列
fontWeight	string	'normal'	字体粗细，可选值：'normal'、'bold'、'bolder'、'lighter'、'100'~'900'
fontVariant	string	'normal'	字体变体，可选值：'normal'、'small-caps'
lineHeight	number	-	行高（像素）

在坐标轴与辅助标记中，文本属性被大量使用：主题中 axis label 默认 fill: '#808080'、guide text 默认 textBaseline: 'middle'、tag 的 textStyle 默认 { fontSize: 12, fill: '#fff', textAlign: 'center', textBaseline: 'middle' }（见 theme.ts）。自定义图表元素时，可直接在 <text> 的 style 中组合使用这些属性，例如设置 textAlign: 'center' 让标题居中。

渐变色

F2 提供与 CSS 用法一致的渐变色使用方法（语义参考 CSS gradient）。渐变效果包括线性和径向渐变、多个渐变叠加等。

线性渐变

线性渐变指创建一个表示两种或多种颜色沿某一方向线性变化的渐变。渐变方向默认为从左到右（与 Canvas / SVG 保持一致），且可以多个渐变叠加：

// 基础线性渐变
<rect
  style={{
    x: 10,
    y: 10,
    width: 200,
    height: 100,
    fill: 'linear-gradient(90deg, blue, green 40%, red)',
  }}
/>

90deg 表示渐变方向为顺时针 90 度（即从左到右），green 40% 指定了颜色过渡的中间停靠点，可用于构造多段渐变。

径向渐变

径向渐变指从图形中心发出的两种或者多种颜色之间的逐步过渡变化：

// 径向渐变
<circle
  style={{
    cx: 100,
    cy: 100,
    r: 80,
    fill: 'radial-gradient(circle at center, red, blue, green 100%)',
  }}
/>

circle at center 指定渐变形状为圆形且从圆心发出，后续颜色列表按半径方向依次过渡。

渐变类型

类型	说明	示例
linear-gradient(angle, ...)	线性渐变，angle 为角度	linear-gradient(90deg, red, blue)
radial-gradient(shape at position, ...)	径向渐变	radial-gradient(circle at center, red, blue)

渐变字符串可以直接作为 fill 或 stroke 的值，这在 图形使用文档 中有完整可运行的 JSX 示例：<rect> 用 linear-gradient(90deg, #1890ff, #f5222d) 填充、<circle> 用 radial-gradient(circle at center, #fff, #1890ff) 填充。

纹理

使用相同的图案填充图形，支持的 Pattern 可以是图片 URL、HTMLImageElement、HTMLCanvasElement、HTMLVideoElement 和 Rect 等，还可以指定重复方向。

Pattern 类型定义

interface Pattern {
  image: string | CanvasImageSource | Rect
  repetition?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'
  transform?: string
}

• image：纹理来源，可以是图片地址、CanvasImageSource（如 HTMLImageElement / HTMLCanvasElement / HTMLVideoElement），也可以是 F2 的 Rect 图形对象；
• repetition：重复方向；
• transform：对纹理图案的变换描述，如 'rotate(30deg)'。

使用示例

// 使用纹理填充，在水平和垂直方向重复图片
<rect
  style={{
    x: 10,
    y: 10,
    width: 200,
    height: 200,
    fill: {
      image: 'https://gw.alipayobjects.com/zos/rmsportal/ibtwzHXSxomqbZCPMLqS.png',
      repetition: 'repeat',
      transform: 'rotate(30deg)',
    },
  }}
/>

repetition 参数说明

值	说明
'repeat'	水平和垂直方向重复
'repeat-x'	仅水平方向重复
'repeat-y'	仅垂直方向重复
'no-repeat'	不重复

裁剪

clip 属性参考 CSS clip-path 的语义：该属性值可以定义可视区域，可以是任意图形，例如 Circle、Rect 等。同一个裁剪区域可以被多个图形共享使用，并且裁剪区域也会影响图形的拾取区域（即命中测试也以裁剪后的可见区域为准）。

使用示例

// 圆形裁剪
<rect
  style={{
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    fill: 'blue',
    clip: {
      type: 'circle',
      style: {
        cx: 150,
        cy: 150,
        r: 50,
      },
    },
  }}
/>

// 矩形裁剪
<rect
  style={{
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    fill: 'red',
    clip: {
      type: 'rect',
      style: {
        x: 150,
        y: 150,
        width: 100,
        height: 100,
      },
    },
  }}
/>

Clip 类型定义

type Clip =
  | {
      type: 'circle'
      style: CircleStyle
    }
  | {
      type: 'rect'
      style: RectStyle
    }
  | {
      type: 'polygon'
      style: PolygonStyle
    }

裁剪在 F2 组件内部有着非常关键的用途——入场动画。以 areaView.tsx 为例，面积图 appear 动画通过 clip: { type: 'rect', property: <a href="https://link.gitcode.com/i/5f15e80f867e2a5122f34ee94251824f" target="_blank">'width'], style: { x: left, y: top, height }, start: { width: 0 }, end: { width } } 让裁剪矩形的宽度从 0 增长到全宽，从而实现面积从无到有的展开效果；极坐标下则改用 type: 'sector' 配合 endAngle 从起始角度增长到结束角度。[lineView.tsx 同样支持通过 props 传入的 clip 应用到 <group> 上。这说明 Clip 不仅可用于自定义图形，更是内置图表动画系统的底层机制。

TypeScript 类型定义

F2 将上述全部属性收敛为 ShapeStyle 接口，供自定义组件与图形做类型约束：

interface ShapeStyle {
  // 位置
  anchor?: [number, number]

  // 通用属性
  zIndex?: number
  clip?: Clip
  visibility?: 'visible' | 'hidden' | 'collapse'
  opacity?: number
  fill?: string | Gradient | Pattern
  fillOpacity?: number
  stroke?: string | Gradient | Pattern
  strokeOpacity?: number
  shadowType?: 'outer' | 'inner'
  shadowColor?: string
  shadowBlur?: number
  shadowOffsetX?: number
  shadowOffsetY?: number
  filter?: string
  cursor?: string

  // 线条属性
  lineCap?: 'butt' | 'round' | 'square'
  lineJoin?: 'bevel' | 'round' | 'miter'
  lineWidth?: number
  miterLimit?: number
  lineDash?: number[]

  // 文本属性
  textAlign?: 'start' | 'center' | 'end' | 'left' | 'right'
  textBaseline?: 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom'
  fontStyle?: 'normal' | 'italic' | 'oblique'
  fontSize?: number
  fontFamily?: string
  fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
  fontVariant?: 'normal' | 'small-caps'
  lineHeight?: number
}

type Gradient = string // 'linear-gradient(...)' | 'radial-gradient(...)'

interface Pattern {
  image: string | CanvasImageSource | Rect
  repetition?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'
  transform?: string
}

从源码结构看，F2 的图表组件正是以 ShapeStyle 为统一规范来接收用户样式的：例如面积图、折线图的 <polygon> / <polyline> 通过 ...shape 将外部传入的 style 透传给底层图形（见 areaView.tsx、lineView.tsx），而主题中的默认样式同样以该结构组织（见 theme.ts）。

常见问题

如何设置透明度？

使用 opacity 设置整体透明度，或使用 fillOpacity 和 strokeOpacity 分别设置填充和描边透明度：

// 整体透明度
<circle
  style={{
    cx: 100,
    cy: 100,
    r: 50,
    fill: 'red',
    opacity: 0.5,
  }}
/>

// 分别设置填充和描边透明度
<circle
  style={{
    cx: 100,
    cy: 100,
    r: 50,
    fill: 'red',
    fillOpacity: 0.5,
    stroke: 'blue',
    strokeOpacity: 0.8,
    lineWidth: 2,
  }}
/>

fillOpacity 是内置图表中最常见的透明度控制方式——主题中面积图默认 fillOpacity: 0.1（见 theme.ts），正是该属性的生产级用法。

如何添加阴影？

使用阴影相关属性组合：

<rect
  style={{
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    fill: 'blue',
    shadowType: 'outer',
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10,
    shadowOffsetX: 5,
    shadowOffsetY: 5,
  }}
/>

shadowType: 'outer' 为外阴影，'inner' 为内阴影；shadowColor、shadowBlur、shadowOffsetX/Y 分别控制阴影的颜色、模糊程度与偏移。

如何设置虚线？

使用 lineDash 属性，数组中的值按"实线长度、空白长度"交替排列：

<line
  style={{
    x1: 10,
    y1: 10,
    x2: 200,
    y2: 10,
    stroke: '#000',
    lineWidth: 2,
    lineDash: [10, 5], // 10px 实线，5px 空白
  }}
/>

渐变色如何使用？

渐变色可以直接作为 fill 或 stroke 的值，填充与描边均可使用：

// 线性渐变填充
<rect
  style={{
    x: 10,
    y: 10,
    width: 200,
    height: 100,
    fill: 'linear-gradient(90deg, red 0%, yellow 50%, blue 100%)',
  }}
/>

// 径向渐变描边
<circle
  style={{
    cx: 100,
    cy: 100,
    r: 50,
    stroke: 'radial-gradient(circle, white, black)',
    lineWidth: 5,
  }}
/>

如何控制图形层级？

使用 zIndex 属性，值越大越靠前：

<group>
  <rect
    style={{
      x: 10,
      y: 10,
      width: 100,
      height: 100,
      fill: 'red',
      zIndex: 1,
    }}
  />
  <rect
    style={{
      x: 50,
      y: 50,
      width: 100,
      height: 100,
      fill: 'blue',
      zIndex: 2, // 会显示在红色矩形上方
    }}
  />
</group>

相关文档

• 图形标签
• 图形动画
• 图形事件
• 图形使用