Graphic 图形相关

G2 底层使用的 G 同时支持 Canvas 以及 SVG，因此绘制的所有图形都支持 Canvas 的属性，本章列出常用的属性，详细信息参考 canvas 属性。

通用属性

• fill 设置用于填充绘画的颜色、渐变或模式；

• stroke 设置用于笔触的颜色、渐变或模式；

• shadowColor 设置用于阴影的颜色；

• shadowBlur 设置用于阴影的模糊级别；

• shadowOffsetX 设置阴影距形状的水平距离；

• shadowOffsetY 设置阴影距形状的垂直距离；

• opacity 设置绘图的当前 alpha 或透明值；

• globalCompositeOperation 设置新图像如何绘制到已有的图像上。

！注意：

G2 对图形属性进行了缩写

• fillStyle 缩写为 fill；

• stokeStyle 缩写为 stroke；

• globalAlpha 缩写为 opacity。

线条样式

• lineCap 设置线条的结束端点样式；

• lineJoin 设置两条线相交时，所创建的拐角形状；

• lineWidth 设置当前的线条宽度；

• miterLimit 设置最大斜接长度。

！注意：

1. G2 在现有线的样式基础上增加了虚线的支持：

• lineDash：设置线的虚线样式，可以指定一个数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。

这个属性取决于浏览器是否支持 setLineDash 函数，详情参考setLineDash。

1. G2 在现有线的基础上增加了首尾箭头的绘制支持：

• startArrow: true|boolean，是否渲染起点箭头

• endArrow: true|boolean，是否渲染终点箭头

• arrowAngle: number，角度，箭头的夹角大小

• arrowRadius: number，箭头长度

文本属性

• font 设置文本内容的当前字体属性；

• textAlign 设置文本内容的当前对齐方式, 支持的属性：center|end|left|right|start；

• textBaseline 设置在绘制文本时使用的当前文本基线, 支持的属性:top|middle|bottom。

！注意：

G2 提供了额外的几个文本属性，便于用户设置字体，具体的含义参考font 组成

• fontStyle 对应 font-style；

• fontVariant 对应 font-variant；

• fontWeight 对应 font-weight；

• fontSize 对应 font-size；

• fontFamily 对应 font-family；

渐变色

G2 中提供了线性渐变、放射状/环形渐变两种形式，使用方式如下：

• 线性渐变

• 

说明：l 表示使用线性渐变，绿色的字体为可变量，由用户自己填写。

// example
// 使用渐变色描边，渐变角度为 0，渐变的起始点颜色 #ffffff，中点的渐变色为 #7ec2f3，结束的渐变色为 #1890ff
stroke: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'

• 放射状/环形渐变

• 

说明：r 表示使用放射状渐变，绿色的字体为可变量，由用户自己填写，开始圆的 x y r 值均为相对值，0 至 1 范围。

// example
// 使用渐变色填充，渐变起始圆的圆心坐标为被填充物体的包围盒中心点，半径为(包围盒对角线长度 / 2) 的 0.1 倍，渐变的起始点颜色 #ffffff，中点的渐变色为 #7ec2f3，结束的渐变色为 #1890ff
fill: 'r(0.5, 0.5, 0.1) 0:#ffffff 1:#1890ff'

纹理

说明：p 表示使用纹理，绿色的字体为可变量，由用户自己填写。

• a: 该模式在水平和垂直方向重复；

• x: 该模式只在水平方向重复；

• y: 该模式只在垂直方向重复；

• n: 该模式只显示一次（不重复）。

纹理的内容可以直接是图片或者 Data URLs。

// example
// 使用纹理填充，在水平和垂直方向重复图片
fill: 'p(a)https://gw.alipayobjects.com/zos/rmsportal/ibtwzHXSxomqbZCPMLqS.png'