需求的来源通常是工作，这次要完成功能核心是一个向量图，嗯...其实就是一个定制化的仪表盘，换做平时一个上午就能搞定，只要数据给到顺手测试了就交货，但这次却有些不一样，这次要完成的，是一个微信小程序。嗯，小程序有什么不同呢？答案是小程序没有好用的仪表盘插件库，网上搜了一下感觉都不太符合需求，没法子只能自己手动搞一个，但没关系，我甚至还有一点点激动，因为可以乘机玩一下Canvas。
需求及目标
这里绘制一个半径RADIUS = 300的外圆，为了实验我将用常规的Web代码编写。最终完成品如下。
向量图
解决的问题
目标清晰了，就大概知道怎么走了。从图中可以看出整个图就是一个表盘+表针的表现形式，细节在于表盘和表针的样式，接下来我们一一分析
1. 表盘的制作
可以看到表盘的中心是空的，圆边有刻度线，且还有相应的刻度标识。那么问题来了：
- 如何让表盘的中心看起来像空？这个问题很简单，画两个圆即可。首先画外圆，选择填充样式，具体代码如下
ctx.translate(RADIUS, RADIUS); //坐标原点
ctx.beginPath();
ctx.arc(0, 0, RADIUS - 2, 0, 2 * PI); //绘制圆
ctx.strokeStyle = '#3F51B5'; //边框样式
ctx.fillStyle = '#EEEEEE'; //填充样式
ctx.fill();
ctx.stroke();
ctx.closePath();
其次在外圆的基础上绘制一个空白的内圆，效果便出来了
ctx.beginPath();
ctx.arc(0, 0, RADIUS * 2 / 3, 0, 2 * PI); //绘制圆
ctx.strokeStyle = '#3F51B5';
ctx.fillStyle = '#fff';
ctx.fill()
ctx.stroke();
ctx.closePath();
基础空心圆
-
如何画刻度线？
一个圆有360°，也就是说要在圆弧上标上360个刻度（废话）。这里需要的做法是每画一个刻度则旋转一度，但这里要注意，rotate(deg)需要传入的是弧度，所以需要做一个转化。但首先，弧度的概念了解一下：来自维基百科的弧度定义
可以从上面推出，假设我们要旋转一度，则需要做如下操作ctx.rotate((PI / 180 * i) - (PI / 2));。另外需要注意的一个点，每次对画布改变状态之前都要调用save()方法，保存上一帧的画面，待操作完毕后调用restore()恢复，刻度代码如下
//表盘刻度
for (let i = -180; i < 180; i++) {
ctx.save();
ctx.rotate((PI / 180 * i) - (PI / 2)); //旋转坐标轴
if (i % 20 === 0) {
ctx.fillText(-i, RADIUS - 40, 0); //每20个刻度打上刻度标签
}
ctx.beginPath();
ctx.moveTo(RADIUS - 17, 0);
ctx.lineTo(RADIUS - 7, 0);
ctx.lineWidth = (i % 20) !== 0 ? 1 : 2; //每20个指针加粗一次
ctx.strokeStyle = (i % 20) !== 0 ? '#BDBDBD' : '#2196F3';
ctx.stroke();
ctx.closePath();
ctx.restore();
}
最终效果如下：
表盘
2. 指针的制作
用canvas画一根线是不难的，一个路径API调用就可以了，但是，要怎么画一个有箭头的线呢？这个想法其实不难，就是通过在线末端画多两根线就好了，难点在于怎么确定箭头两个线的坐标及角度的问题，这里就需要用到三角函数来定位了。具体可参考这篇教程
3. 跟随数据的转动
……这个在有需要的时候调用该函数就可以了，比如在我自己的项目中，我需要根据数据的变动来调整，则在请求数据后调用该方法即可
完整代码
const canvas = document.getElementById('chart');
const ctx = canvas.getContext('2d');
const PI = Math.PI;
const RADIUS = 300; //半径
/**
* 渲染表盘
* @param {CanvasRenderingContext2D} ctx
*/
function renderDial(ctx) {
ctx.clearRect(0, 0, RADIUS * 2, RADIUS * 2);
ctx.save();
//外圆定中心
ctx.translate(RADIUS, RADIUS); //坐标原点
ctx.beginPath();
ctx.arc(0, 0, RADIUS - 2, 0, 2 * PI); //绘制圆
ctx.strokeStyle = '#3F51B5';
ctx.fillStyle = '#EEEEEE'
ctx.fill();
ctx.stroke();
ctx.closePath();
//内圆
ctx.beginPath();
ctx.arc(0, 0, RADIUS * 2 / 3, 0, 2 * PI); //绘制圆
ctx.strokeStyle = '#EEEEEE';
ctx.fillStyle = '#fff';
ctx.fill()
ctx.stroke();
ctx.closePath();
//中心点
ctx.beginPath();
ctx.arc(0, 0, 10, 0, 2 * PI);
ctx.fillStyle = '#000';
ctx.fill()
ctx.closePath();
//表盘刻度
for (let i = -180; i < 180; i++) {
ctx.save();
ctx.rotate((PI / 180 * i) - (PI / 2)); //旋转坐标轴
if (i % 20 === 0) {
ctx.fillText(-i, RADIUS - 40, 0);
}
ctx.beginPath();
ctx.moveTo(RADIUS - 17, 0);
ctx.lineTo(RADIUS - 7, 0);
ctx.lineWidth = (i % 20) !== 0 ? 1 : 2; //每20个指针加粗一次
ctx.strokeStyle = (i % 20) !== 0 ? '#BDBDBD' : '#2196F3';
ctx.stroke();
ctx.closePath();
ctx.restore();
}
ctx.restore();
}
/**
* 渲染表针
* @param {CanvasRenderingContext2D} ctx
*/
function renderHands(ctx, angleA, angleB, angleC) {
//角度转化成弧度
let angle = PI / 180 * angleA;
let angle1 = PI / 180 * angleB;
let angle2 = PI / 180 * angleC;
// drawHand(angle, 250, 5, '#2196F3', ctx)
drawArrow(ctx, angle, RADIUS * 5 / 6, 5, 15, 20, '#2196F3', 'A')
drawArrow(ctx, -angle1, RADIUS * 5 / 6, 5, 15, 20, '#2196F3', 'B')
drawArrow(ctx, -angle2, RADIUS * 5 / 6, 5, 15, 20, '#2196F3', 'C')
}
/**
* 渲染表针
* @param {CanvasRenderingContext2D} ctx
* @param {Number} angle 弧度
* @param {Number} len 线长
* @param {Number} width 线宽度
* @param {Number} theta 三角斜边 —— 直线夹角
* @param {Number} headlen 三角斜边长度
* @param {String} color 线条颜色
*/
function drawArrow(ctx, angle, len, width, theta, headlen, color, text) {
let arrowAngle = Math.atan2(0, len) * 180 / Math.PI,
angle1 = (arrowAngle + theta) * PI / 180,
angle2 = (arrowAngle - theta) * PI / 180,
topX = headlen * Math.cos(angle1),
topY = headlen * Math.sin(angle1),
botX = headlen * Math.cos(angle2),
botY = headlen * Math.sin(angle2);
ctx.save();
ctx.translate(RADIUS, RADIUS);
ctx.rotate(-Math.PI / 2 + angle);
ctx.beginPath();
let arrowX = -4 - topX,
arrowY = 0 - topY;
// ctx.moveTo(arrowX, arrowY);
/* 绘制直线 */
ctx.moveTo(-4, 0);
ctx.lineTo(len, 0);
arrowX = len - topX;
arrowY = topY;
ctx.moveTo(arrowX, arrowY);
ctx.lineTo(len, 0);
arrowX = len - botX;
arrowY = botY;
ctx.lineTo(arrowX, arrowY);
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.stroke();
ctx.closePath();
ctx.restore()
ctx.save();
ctx.translate(RADIUS, RADIUS)
ctx.rotate(-Math.PI / 2 + angle);
ctx.translate(len - 50, 0);
ctx.rotate(90 * Math.PI / 180);
ctx.font = '16px bold sans-serif'
ctx.fillText(text, -20, -10);
ctx.restore();
}
renderDial(ctx)
renderHands(ctx, 0, -120, 120);
