Konva基本使用

konva是一个用canvas画2D图的JavaScript库，用与实现图形交互交互效果。关注GitHub，或直接下载。

下面直接上代码，画环图的主要步骤
创建舞台

  1. // CDN使用
  2. <script src="https://unpkg.com/konva@2.4.2/konva.min.js"></script>
  4. // 获取容器宽度
  5. var width = 145
  6. // 获取容器高度
  7. var height = 145
  9. // konva.js的开始，初始化舞台
  10. var stage = new Konva.Stage({
  11.   container: elem, //dom元素id
  12.   width: width, // dom元素宽度
  13.   height: height // dom元素高度
  14.  });

创建图层

  1. // 新建图层layer
  2. var layer = new Konva.Layer();

创建图案（还可以创建分组，将图案分组等）

  1. /**
  2. * 初始化扇形
  3. * @param  angle    扇形角度
  4. * @param  rotation 开始角度
  5. * @param  color    颜色
  6. * @return          扇形
  7. */
  8. var initWedge = function(angle, rotation, color) {
  9.   return new Konva.Wedge({
  10.     x: width/2, // 横坐标
  11.     y: height/2, // 纵坐标
  12.     angle: angle, // 扇形角度
  13.     rotation: rotation, // 旋转角度
  14.     radius: width/2-15, // 扇形弧长
  15.     fill: color,    // 扇形颜色
  16.     stroke: '#fff', // 边框颜色
  17.     strokeWidth: 3 // 边框宽度
  18.   });
  19. }
  21. /**
  22. * 初始化圆形
  23. * @param  radius   弧长
  24. * @param  color    颜色
  25. * @return          圆形
  26. */
  27. var initCircle = function(radius, color) {
  28.   return new Konva.Circle({
  29.     x: width/2, // 横坐标
  30.     y: height/2, // 纵坐标
  31.     radius: radius, // 扇形弧长
  32.     fill: color,    // 扇形颜色
  33.   })
  34. }

计算扇形的角度

  1. // 这里以3个数据为例，allCount为总数，注意:处理总数为0的NAN情况
  2. var nofitRate = (nofitNum / allCount) * 360;
  3. var comfitRate = (comfitNum / allCount) * 360;
  4. var fitRate = (fitNum / allCount) * 360;

根据数据创建扇形

  1. // 3个扇形对象，注意:后一个扇形的起点角度应该为已画扇形的角度总和
  2. var nofit = initRing(nofitRate, 0, '#f15959');
  3. var comfit = initRing(comfitRate, nofitRate, '#1a89b7');
  4. var fit = initRing(fitRate, comfitRate + nofitRate, '#6bd173');

圆心中间添加文字（可以略过）

  1. // 添加文字
  2. var text = new Konva.Text({
  3.   x: width / 2 - 37,
  4.   y: height / 2 - 10,
  5.   fontSize: 18,
  6.   text: rate,
  7.   fontFamily: 'MicrosoftYaHei',
  8.   fill: '#6bd173',
  9.   align: 'center', // 文字区域内居中
  10.   width: 74 // 设置文字区域的宽度
  11. })
  12. layer.add(text);

将扇形添加到图层，将图层添加到舞台

  1. // 将扇形和文字添加给舞台
  2. layer.add(nofit, comfit, fit, circle);
  3. // 将图层添加给舞台
  4. stage.add(layer);