共计 3759 个字符，预计需要花费 10 分钟才能阅读完成。
日常生产生存中，咱们会常常读到或应用各种类型的图表。圆环（圆弧）便是一种较常见的类型，用于直观展示某一数据指标占整体的比例。本文以 HTML Canvas 的实现为主（当然，SVG 党能够在理解原理后自行实现），逐层介绍圆环图表开发的一些次要思路和原理。
图 1 所示是一些咱们平时比拟常见的一些圆环（圆弧）成果。尽管图形的主体形成都是圆弧，但不同成果在信息传播的性能上却略有差别。如：
- 闭合的圆环能够示意流程“进度”的概念
- 非闭合圆环个别用于状态量（标量）的展现，个别也称为“仪表盘”成果
- 不同的色相可用于标识状态量的状态区间（如：低危 - 中危 - 高危 区间的标识能够应用三种色彩的形成的过渡成果进行表白）
为了更加不便、欠缺地解决咱们在业务开发时的具体须要，能够对这些格调、款式进行肯定剖析、形象，总结出一个通用组件须要具备的能力，如：
- 色彩、突变可配（反对传入繁多色值或色彩序列）
- 圆弧宽度可调（内、外半径大小可配置）
- 圆弧夹角可调（开始角度、截止角度可配置）
- 圆弧端点造型可选（可切换平角 / 半圆造型
- 文案成果可调（字号、字体、色彩等）
上面，咱们着手于实现这样一个性能全面、业务通用性较强的圆环组件。
1. 圆环的造型
绘制圆环造型的第一步，须要先绘制圆环图表形成因素，即一段一段的圆弧。而对于像下图中这样的两种倒角成果（黄色局部圆弧两端的款式），既能够是直角，也能够是半圆。
因而，咱们须要实现一个通用的办法来绘制圆弧，提供两种倒角格调给用户。
1.1 前景圆弧的绘制
圆弧绘制的思路如上图所示，按先后顺序大抵分为几个步骤：
（1）绘制圆弧起始端的半圆轮廓（2）绘制圆弧的外边缘轮廓（3）绘制圆弧终止端的半圆轮廓（4）绘制圆弧的内边缘轮廓（5）闭合轮廓并填充色调 注：因为 canvas 绘制圆弧的办法默认是顺时针方向，因此咱们的绘图步骤也是沿着顺时针方向
以下是一些姿态要领：
1.1.1 端点坐标的计算
在绘制端点半圆之前咱们须要端点的地位坐标，以其实端为例，依据圆环的半径（内外径的均值，即圆弧中线的半径）和起始端点的角度如何计算圆上一点的坐标：
// 计算圆弧上某点的坐标
// originX, originY - 圆心的坐标
// radius - 圆环半径，等于圆环内、外径的平均值，也即圆弧中线的半径
// alpha - 弧度
function calcPosition(originX, originY, radius, alpha) {
return [radius * Math.cos(alpha) + originX,
radius * Math.sin(alpha) + originY,
];
}1.1.2 端点半圆的起止角度
在 canvas 中绘制一个 arc，须要晓得其起始角度和终止角度。因为 canvas 绘制默认方向为屏幕顺时针方向（屏幕 Z 轴 的左手螺旋方向），从下面的示意图中能够看出：
起始端半圆弧度范畴 - [radianStart - Math.PI, radianStart]
终止端半圆弧度范畴 - [radianEnd, radianEnd + Math.PI]1.1.3 绘制半圆
有了端点坐标和起止角度，便能够绘制端点的半圆：
// 以起始端的半圆倒角为例
myCanvas.context.arc(
x,
y,
(radiusOutter - radiusInner) / 2, // 小圆半径，等于圆环线宽的一半
radianStart - Math.PI,
radianStart
);直角倒角格调的绘制与半圆倒角圆弧的绘制步骤基本相同，次要差异在于不必绘制圆弧两个端点的小半圆，改成绘制直线。背景圆弧的绘制也与前景圆弧办法统一。
2. Canvas 实现锥形突变
下面的步骤能够绘制出圆弧的轮廓，要达到 图 1 那样的视觉效果，咱们须要给后面绘制进去的轮廓填充图像。
沿着圆周方向的突变，因为其图像形似圆锥体的鸟瞰成果，俗称锥形突变：
家喻户晓，CSS 中有一个名为 conic-gradient 的属性间接反对锥形突变，而 HTML Canvas 的原生 API 目前还没有相似的能力。那么，咱们如何在 canvas 中绘制出这样的图像呢？
上面咱们讲下大抵的原理：
（1）对用户传入的色彩进行插值，失去一个色彩序列。
这里，咱们间接应用 canvas 原生的 createLinearGradient 办法，在离屏 canvas 中绘制一个 1px 的线性突变成果，图像宽度正好是咱们要插值的数量，突变插值的后果也就是 canvas 上对应像素地位的色值。
色彩插值（突变取色）代码实现如下：
// 用于实现色彩插值的工具类
export default class ColorInterpolate {// 参数 01: stops - 为要插值的色彩序列，数据格式形如：[[0, 'red'], [0.5, 'green'], [1.0, 'yellow']]
// 参数 02: segment - 插值段落数，即插值后果的色彩值的数量
constructor(stops = [], segment = 100) {
// 构建离屏 canvas
const canvas = document.createElement('canvas');
canvas.width = segment;
canvas.height = 1;
this.ctx = canvas.getContext('2d');
// 绘制线性突变
const gradient = this.ctx.createLinearGradient(0, 0, segment, 0);
for (let [offset, color] of stops) {gradient.addColorStop(offset, color);
}
this.ctx.fillStyle = gradient;
this.ctx.fillRect(0, 0, segment, 1);
}
// 依据地位偏移量获取插值后的色值
getColor(offset) {const imgData = this.ctx.getImageData(offset, 0, 1, 1);
return `rgba(${imgData.data.slice(0, 3).join(',')}, ${imgData.data[3] / 255})`;
}
}（2）如下图所示，咱们能够把突变的图像看成是由足够多填充了单个色值的小“扇面”拼接而成。
依照这样的思路，咱们只须要遍历下面色调插值失去的各个色彩，而后一一绘制小扇面，便可失去一个锥形突变图像。
为此咱们封装了一个名为 createConicalGradient 的办法，其应用习惯与 canvas 原生的 createLinearGradient 和 createRadialGradient 办法类似。具体代码见 我的 Github（感觉有用的童鞋能够 star 一下）。
3. 过渡动画
3.1 圆弧的过渡
在数值产生扭转时，咱们的图表须要一个可能追随数据扭转的过渡动画成果，对于 canvas 而言，便是革除旧图像而后绘制新一帧图像。这里有一些办法包装上的技巧：
// 注：伪代码，实在场景倡议 OOP 形式包装为工具类
let _animTick = null;
let _animFrames = null;
let _frameData = null;
let _animDiff = null;
// 动画办法
function _animate(duration) {if (_animTick === null) {
// 依据动画时长 duration 计算整个动画一共须要多少帧（以 60fps 计算）_animFrames = Math.round((duration / 1e3) * 60);
// 相邻两帧动画的数据变动
_animDiff = _calcAnimDiff(_animFrames);
// 动画帧数标识
_animTick = 0;
}
// 以后帧的数据值
_frameData = _caclCurentData(_animDiff, _animTick);
_renderFrame(_frameData);
if (_animTick !== null && _animTick < _animFrames) {
// 继续执行动画
window.requestAnimationFrame(() => {_animate();
_animTick += 1;
});
} else {
// 动画完结
_renderFrame(_frameData);
_animTick = null;
}
}
// 绘制以后帧
function _renderFrame(data) {// ...}
// 计算动画相邻帧的数据差别
function _calcAnimDiff() {// ...}
// 依据两帧数据差计算以后帧
function _caclCurentData() {// ...}3.2 两种动画模式
在过渡动画执行的过程中，须要思考两种不同的模式：一种是突变图像不变动，仅是圆弧的轮廓从旧状态变动到新状态；一种是突变图像的夹角范畴追随轮廓的大小扭转。
这两种模式其实都有肯定意义：前者能够应用不同色彩代表数值的不同状态；后者仅仅是将突变的色彩看成一种装璜成果。
4. 后果演示
比拟要害的原理都介绍完了，最初展现一下咱们封装的图表组件的成果（右侧 GUI 局部是咱们自研的设计引擎的编辑成果）：
5. 写在前面
本文是可视化图表开发的一个小案例，也是【图表开发小案例】这个系列的第一篇。篇幅比拟短，还有很多细节没有展开讨论。感兴趣的童鞋欢送交换、探讨，请多多关注咱们前面的推文 ~(^_^)Y
