详解基于 Canvas 手撸一个六边形能力图

绘制文本也是用的最外围的 6 个顶点的坐标。而用的 API 是 fillText(text,x,y)，其中 x,y 代码文字绘制起点，但注意，不是文字所在矩形框的左上角，应该在左下角的大概位置。准确来说是文字的基线位置，这个在其他的GUI系统中也是一样，当然这里不追求那么细节了，就认为是左下角位置吧。

因此，对于不同侧的文字，其起点坐标也是不一样。如左侧的文字至少应该是左侧的顶点 x 减去文字的宽度。再比如，上下两侧的文字与顶点中相对居中对齐的，因此计算方法是 x 减去文字宽度的一半。代码的实现分为了上下左右来进行不同的绘制。

代码如下，看着有点长，但其实是很简单的。

/** * 绘制上侧的文字 * @param text * @param pos */ function drawUpText(item, pos) { let nameMeasure = _context.measureText(item.name); let scoreMeasure = _context.measureText(item.score); _context.fillStyle = '#8E8E8E'; _context.fillText(item.name, pos[0] - nameMeasure.width / 2,pos[1] - 26); _context.fillStyle = '#212121'; _context.fillText(item.score, pos[0] - scoreMeasure.width / 2,pos[1] - 10); }

/** * 绘制下侧的文字 * @param text * @param pos */ function drawDownText(item, pos) { let nameMeasure = _context.measureText(item.name); let scoreMeasure = _context.measureText(item.score); _context.fillStyle = '#8E8E8E'; _context.fillText(item.name, pos[0] - nameMeasure.width / 2,pos[1] + 16); _context.fillStyle = '#212121'; _context.fillText(item.score, pos[0] - scoreMeasure.width / 2,pos[1] + 32); }

/** * 绘制左侧的文字 * @param text * @param pos */ function drawLeftText(item, pos) { let nameMeasure = _context.measureText(item.name); let scoreMeasure = _context.measureText(item.score); _context.fillStyle = '#8E8E8E'; _context.fillText(item.name, pos[0] - nameMeasure.width - 10,pos[1]); _context.fillStyle = '#212121'; _context.fillText(item.score, pos[0] - 10 - (nameMeasure.width + scoreMeasure.width) / 2,pos[1] + 16); }

/** * 绘制右侧的文字 * @param text * @param pos */ function drawRightText(item, pos) { let nameMeasure = _context.measureText(item.name); let scoreMeasure = _context.measureText(item.score); _context.fillStyle = '#8E8E8E'; _context.fillText(item.name, pos[0] - nameMeasure.width + 26,pos[1]); _context.fillStyle = '#212121'; _context.fillText(item.score, pos[0] + 26 - (nameMeasure.width + scoreMeasure.width) / 2,pos[1] + 16); }

/** * 绘制所有文本 */ function drawText() { _context.fillStyle = '#8E8E8E'; _context.strokeStyle = _color; let textPos = _allPoints[0]; for (let i = 0; i < textPos.length; i++) { let item = _data[i]; let pos = textPos[i]; if(i == 0) { drawUpText(item, pos); } else if(i == 1 || i == 2) { drawRightText(item, pos); } else if(i == 3) { drawDownText(item, pos); } else if(i == 4 || i == 5) { drawLeftText(item, pos); } } }

四、总结

文章主要是基于 canvas 自定义一个六边形能力图，而这个能力的图的关键部分是对于六边形的绘制，而六边形的绘制又在于计算出 6 个顶点。有了 6 个顶点，再绘制其他的边，文本，覆盖区域等都基于这个 6 个顶点进行相应的绘制即可。

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!