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


Posted in HTML / CSS onSeptember 02, 2019

一、前言

六边形能力图如下,由 6 个 六边形组成,每一个顶点代表其在某一方面的能力。这篇文章我们就来看看如何基于 canvas 去绘制这么一个六边形能力图。当然,你也可以基于其他开源的 js 方案来实现,如 EChars.js 等。

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

二、六边形绘制基础

六边形能力图有 6 个 六边形组成,那我们只要绘制出一个,另外 5 个则依次减小六边形的边长即可。那我们首先来分析一下,如何绘制出一个六边形。

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

如上图,绘制一个六边形有以下几个关键点:

1.紫色矩形区域我们可以看成是 canvas 的画布。其大小可以认为是 (width,height)。center(centerX,centerY) 是其中心点,即 (width / 2, height / 2)。

2.绘制六边形的关键是计算出它的 6 个顶点的坐标。而如上图所示,这里面最关键的又是计算出六边形所在矩形区域的左上角坐标(left,top)。对照上图,(left,top) 的计算公式如下。

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

要计算出 (left,top) 需要先计算出 x,y 。而 x,y 的值与六边形的边长有关。

3.如上的 x,y 的计算公式为

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

4.因此,X1(x1,y1),X2(x2,y2),X3(x3,y3),X4(x4,y4),X5(x5,y5),X6(x6,y6) 的坐标计算为

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

因此,得到绘制六边形的代码为:

function computeHexagonPoints(width, height, edge) {
    let centerX = width / 2;
    let centerY = height / 2;
    let x = edge * Math.sqrt(3) / 2;
    let left = centerX - x;
    let x1,x2,x3,x4,x5,x6;
    let y1,y2,y3,y4,y5,y6;
    x5 = x6 = left;
    x2 = x3 = left + x * 2;
    x1 = x4 = left + x;

    let y = edge / 2;
    let top = centerY - 2 * y;
    y1 = top;
    y2 = y6 = top + y;
    y3 = y5 = top + 3 * y;
    y4 = top + 4 * y;

    let points = new Array();
    points[0] = [x1, y1];
    points[1] = [x2, y2];
    points[2] = [x3, y3];
    points[3] = [x4, y4];
    points[4] = [x5, y5];
    points[5] = [x6, y6];
    return points;
  }

三、绘制六维能力图

 3.1 绘制 6 个六边形

基于 canvas 绘制,首先就是需要获取 context。

_context = canvas.getContext('2d');

而绘制的话,已经知道 6 个顶点了,那只需要将这 6 个点用连线的方式连接起来就可以了。主要用到 moveTo(x,y) 和 lineTo(x,y) 两个方法。这里总共需要绘制 6 个六边形,那只要按等比例减小 edge 的值就可以了。因此绘制六边形能力图的主要代码如下。

function drawHexagonInner(edge) {
    _context.strokeStyle = _color;
    for (var i = 0; i < 6; i++) {
      _allPoints[i] = computeHexagonPoints(_width, _height, edge - i * edge / 5);
      _context.beginPath();
      _context.moveTo(_allPoints[i][5][0],_allPoints[i][5][1]);
      for (var j = 0; j < 6; j++) {
        _context.lineTo(_allPoints[i][j][0],_allPoints[i][j][1]);
      }
      _context.closePath();
      _context.stroke();
    }
  }

代码中还有 3 个相关的 API。beginPath() 和 closePath() 主要就是绘制得到一个封闭的路径。stroke() 主要是得到一个镂空的形状。当然,相应的就有 fill() 得到填充的形状。

3.2 绘制 3 条直线

绘制那 3 条直线也是比较简单的,只要将 X1和X4 连接,将X2 和 X5 相连,将 X3 和 X6 相连。代码如下:

function drawLines() {
    _context.beginPath();
    _context.strokeStyle = _color;
    for (let i = 0; i < 3; i++) {
      _context.moveTo(_allPoints[0][i][0],_allPoints[0][i][1]); //1-4
      _context.lineTo(_allPoints[0][i+3][0],_allPoints[0][i+3][1]); //1-4
      _context.stroke();
    }
    _context.closePath();
  }

3.3 绘制覆盖图

6 个顶点代表了六种能力,比如这里的各科成绩,把六种能力封闭成一个闭合路径并填充则称为覆盖图。要绘制出覆盖图,这里需要计算出六个顶点。6 个顶点可以通过最外围的六边形的 6 个顶点和中心点来计算。简单来说就是通过能力得分,在顶点到中心距离的占比来计算。计算公式如下。

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

代码如下

/**
   * 画覆盖物
   */
  function drawCover() {

    let tmpCoverPoints = _allPoints[0];
    _coverPoints = [];
    console.log("coverPoints ",tmpCoverPoints)

    let centerX = _width / 2;
    let centerY = _height / 2;
    for (let i = 0; i < tmpCoverPoints.length; i++) {
      _coverPoints.push([
        centerX + (tmpCoverPoints[i][0] - centerX) * (_data[i].score / 100.0),
        centerX + (tmpCoverPoints[i][1] - centerY) * (_data[i].score / 100.0)
      ]);
    }
    console.log("newCoverPoints ",_coverPoints)
    _context.beginPath();
    _context.fillStyle = 'rgba(90,200,250,0.4)';
    _context.moveTo(_coverPoints[5][0],_coverPoints[5][1]); //5
    for (var j = 0; j < 6; j++) {
      _context.lineTo(_coverPoints[j][0],_coverPoints[j][1]);
    }
    _context.stroke();
    _context.closePath();
    _context.fill();
  }
/**
   * 描点
   * @param pointRadius
   */

  function drawPoints(pointRadius) {
    _context.fillStyle = _color;
    for (let i = 0; i < _coverPoints.length; i++) {
      _context.beginPath();
      _context.arc(_coverPoints[i][0],_coverPoints[i][1],pointRadius,0,Math.PI*2);
      _context.closePath();
      _context.fill();
    }
  }

3.4 最后来绘制文本

绘制文本也是用的最外围的 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 个顶点进行相应的绘制即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3系列之3D制作方法案例
Aug 14 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 #HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 #HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 #HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 #HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 #HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 #HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 #HTML / CSS
You might like
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
event.X和event.clientX的区别分析
2011/10/06 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
python传递参数方式小结
2015/04/17 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
对Python中range()函数和list的比较
2018/04/19 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
浅谈python常用程序算法
2019/03/22 Python
pandas 时间格式转换的实现
2019/07/06 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
Python同时迭代多个序列的方法
2020/07/28 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
校庆标语集锦
2014/06/25 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
新员工辞职信范文
2015/05/12 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android