图形标签 - Shape

阅读时间约 7 分钟

F2 底层使用了 G 绘图引擎。本篇列出了常见的图形标签

如何使用

图形标签

group 分组
- rect 矩形
- circle 圆
- sector 扇形
- polygon 多边形
- line 线
- arc 圆弧
- polyline 多点线段
- text 文本
- image 图片

图形属性

Props

属性名	类型	描述
`className`	String	对象标记，由用户指定
`visible`	Boolean	显示还是隐藏。
`zIndex`	Number	z-index 值，用于调整绘制顺序。
`attrs`	Attrs	图形样式

Attrs 绘图属性

更多详情可见：绘图属性

属性名	类型	描述
`fill`	String	填充色、渐变或纹理，默认值为空。
`fillOpacity`	Number	用于设置图形填充颜色的透明度，默认值是 1。
`stroke`	String	描边色、渐变或纹理，默认值为空；
`strokeOpacity`	Number	用于设置边颜色的透明度，默认值是 1。
`lineWidth`	px	描边的大小
`shadowColor`	String	描述阴影颜色的属性，参见 MDN。
`shadowBlur`	Number	描述模糊效果程度的属性；它既不对应像素值也不受当前转换矩阵的影响。默认值是 0，参见 MDN。
`shadowOffsetX`	Number	描述阴影水平偏移距离的属性，参见 MDN。
`shadowOffsetY`	Number	描述阴影垂直偏移距离的属性，参见 MDN。
`opacity`	Number	设置图形和图片透明度的属性，默认值是 1。数值的范围从 0.0 （完全透明）到 1.0 （完全不透明）。

演示

图形标签

group

包含一组图形

示例

<group className="group">
  <rect ... />
  <rect ... />
</group>

rect

矩形

Attrs

属性名	类型	描述
`x`	Number	左上角 x 坐标
`y`	Number	左上角 y 坐标
`width`	Number	宽度
`height`	Number	高度
`radius`	Number \| Number[]	圆角

示例

<rect
  attrs={{ x: 100, y: 100, width: 50, height: 50, lineWidth: '2px', stroke: '#000', fill: 'red' }}
/>

circle

圆形

Attrs

属性名	类型	描述
`x`	Number	圆心 x 坐标
`y`	Number	圆心 y 坐标
`r`	Number	圆的半径

示例

<circle attrs={{ x: 100, y: 100, r: 50, lineWidth: '2px', stroke: '#000', fill: 'red' }} />

sector

扇形

Attrs

属性名	类型	描述
`x`	Number	圆心 x 坐标
`y`	Number	圆心 y 坐标
`r`	Number	外半径
`r0`	Number	内半径，默认为 0
`startAngle`	Number	其实弧度，默认 0
`endAngle`	Number	结束弧度，默认 Math.PI * 2
`anticlockwise`	Boolean	逆时针方向，默认 false

示例

<sector attrs={{ x: 100, y: 100, r: 50, lineWidth: '2px', stroke: '#000', fill: 'red' }} />

polygon

多边形

Attrs

属性名	类型	描述
`points`	Point[]	多边形的点

示例

<polygon
  attrs={{
    points: [
      { x: 10, y: 10 },
      { x: 50, y: 50 },
      { x: 30, y: 70 },
    ],
    lineWidth: '2px',
    stroke: '#000',
    fill: 'red',
  }}
/>

line

绘制直线

Attrs

属性名	类型	描述
`x1`	Number	起始点 x 坐标
`y1`	Number	起始点 y 坐标
`x2`	Number	结束点 x 坐标
`y2`	Number	结束点 y 坐标

示例

<line attrs={{ x1: 10, y1: 10, x2: 100, y2: 100, lineWidth: '2px', stroke: '#000' }} />

arc

绘制圆弧

Attrs

属性名	类型	描述
`x`	Number	圆心 x 坐标
`y`	Number	圆心 y 坐标
`r`	Number	半径
`startAngle`	Number	其实弧度，默认 0
`endAngle`	Number	结束弧度，默认 Math.PI * 2
`anticlockwise`	Boolean	逆时针方向，默认 false

示例

<arc attrs={{ x: 100, y: 100, r: 50, lineWidth: '2px', stroke: '#000' }} />

polyline

多点线段

Attrs

属性名	类型	描述
`Points`	Points[]	线段的点
`smooth`	Boolean	是否需要平滑，默认 false

示例

<polyline
  attrs={{
    points: [
      { x: 10, y: 10 },
      { x: 50, y: 50 },
      { x: 80, y: 70 },
    ],
    lineWidth: '2px',
    stroke: '#000',
    smooth: true,
  }}
/>

text

文本

Attrs

属性名	类型	描述
`x`	Number	文本位置
`y`	Number	文本位置
`text`	String	文本内容
`textAlign`	String	设置文本内容的当前对齐方式, 支持的属性：'start', 'center', 'end', 'left', 'right'
`textBaseline`	String	设置在绘制文本时使用的当前文本基线, 支持的属性：'top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'
`fontStyle`	String	规定字体样式。可能的值：'normal', 'italic', 'oblique'
`fontSize`	Number	规定字号，以像素计
`fontFamily`	String	规定字体系列
`fontWeight`	String	规定字体的粗细。可能的值：'normal', 'bold', 'bolder', 'lighter', '100', '200, '300', '400','500', '600', '700', '800', '900'
`fontVariant`	String	规定字体变体。可能的值：'normal', 'small-caps'
`lineHeight`	Number	规定行高，以像素计

示例

<text
  attrs={{
    text: '文本',
    fontSize: 20,
    fill: '#000',
  }}
/>

image

图片

Attrs

属性名	类型	描述
`x`	Number	左上角 x 坐标
`y`	Number	左上角 y 坐标
`width`	Number	宽度
`height`	Number	高度
`src`	string	图片url
`cacheImage`	boolean	是否需要缓存(如果图片有闪动，可以添加缓存)

示例

<image
  attrs={{
    src: 'https://f2.antv.vision/favicon-32x32.png?v=9772447a8d07a8fe19894b5176c6cb0d',
    x: 10,
    y: 10,
    width: 32,
    height: 32,
  }}
/>