canvas绘制饼状图动画

1、HTML

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

     <title>饼状图面向对象版本</title>

     <style>

         body {

             padding: 0;

             margin: 0;

             background-color: #f0f0f0;

             overflow: hidden;

         }

     </style>

     <script src="bower_components/konva/konva.min.js"></script>

     <script src="js/PieChart.js"></script>

 </head>

 <body>

     <div id="container">

     </div>

     <script>

         //创建舞台

         var stage = new Konva.Stage({

             container: 'container',

             width: window.innerWidth,//全屏

             height: window.innerHeight

         });

         //创建层

         var layer = new Konva.Layer();

         stage.add(layer);

         //中心点坐标

         var cenX = stage.width() / 2;

         var cenY = stage.height() / 2;

        var data = [

             { name: "前端", value: .25, color: '#e0e'  },

             { name: "php",  value: .2,  color: 'orange'},

             { name: "UI",    value: .3,    color: 'blue'  },

             { name: "C++",    value: .05,    color: 'green' },

             { name: "游戏",    value: .1,    color: 'purple'},

             { name: "Java",    value: .1,    color: 'red'   }

         ];

         var p = new PieChart({

             x: cenX,

             y: cenY,

             r: 100,

             data: data

         });

        p.addToGroupOrLayer( layer );

        layer.draw();

        p.playAnimate();

     </script>

 </body>

 </html>

2、PieChart.js

 //英 [paɪ]  美 [paɪ]

 function PieChart( option ) {

     this._init( option );

 }

 PieChart.prototype = {

     _init: function( option ) {

         this.x = option.x || 0;

         this.y = option.y || 0;

         this.r = option.r || 0;

         this.data = option.data || [];

         //饼状图所有的 物件的组

         this.group = new Konva.Group({

             x: this.x,

             y: this.y

         });

         //饼状图：所有的 扇形的组

         this.wedgeGroup = new Konva.Group({

             x: 0,

             y: 0

         });

         //饼状图： 所有的文字的组

         this.textGroup = new Konva.Group({

             x: 0,

             y: 0

         });

         this.group.add( this.wedgeGroup );

         this.group.add( this.textGroup );

         var self = this;

         var tempAngel = -90;//从-90开始绘制

         this.data.forEach(function(item, index ) {

             //把每条数据创建成一个扇形

             var angle = 360 * item.value;//当前扇形的角度

             //创建一个扇形

             var wedge = new  Konva.Wedge({

                 x: 0,        //扇形圆心坐标

                 y: 0,

                 angle: angle ,    //扇形的角度

                 radius: self.r,    //扇形的半径

                 fill: item.color,    //扇形的填充颜色

                 rotation: tempAngel //扇形的旋转角度

             });

             self.wedgeGroup.add( wedge );

             //绘制文本的 角度

             var textAngle = tempAngel + 1/2 * angle;

             //绘制的 百分比的文本

             var text = new Konva.Text({

                 x: (self.r+20) * Math.cos(Math.PI/ 180 * textAngle ),

                 y: (self.r+20) * Math.sin(Math.PI/ 180 * textAngle ),

                 text: item.value*100 +'%',

                 fill: item.color

             });

             //根据角度判断设置文字的 位置

             if(  textAngle > 90 && textAngle < 270 ) {

                 //让文本向左边 移动文字宽度的位置。

                 text.x( text.x() - text.getWidth() );

             }

             self.textGroup.add( text );

             tempAngel += angle;

         });

         //绘制所有的楔形

         //绘制文字

         //绘制圆环的线

         var cir = new Konva.Circle({

             x: 0,

             y: 0,

             radius: this.r+10,

             stroke: '#ccc',

             strokeWidth: 2

         });

         this.group.add( cir );

         this._animateIndex = 0;

     },

     playAnimate: function() {

         var self = this;

         //根据索引显示动画

         //把所有扇区 角度设置为0

         if( this._animateIndex == 0 ) {

             //拿到所有的 扇形

             this.wedgeGroup.getChildren().each(function(item, index ){

                 item.angle(0);

             });

         }

         //展示当前索引对应的动画

          var item = this.wedgeGroup.getChildren()[this._animateIndex];

          item.to({

              angle: this.data[this._animateIndex].value * 360,

              duration: 2 * this.data[this._animateIndex].value,

              onFinish: function() {

                  self._animateIndex ++;

                  if( self._animateIndex >= self.data.length) {

                      self._animateIndex = 0;//让他的索引再回到0

                      //************************重点***********************

                      return;// 会把整个递归执行完成。

                  }

                  //继续执行当前方法，播放下一个动画

                  self.playAnimate();

              }

          });

     },

     //把饼状图添加到层里面的方法

     addToGroupOrLayer: function( arg ) {

         arg.add( this.group );

     }

 }

运行效果：

第166天：canvas绘制饼状图动画的更多相关文章

  1. [canvas]用canvas绘制饼状图

    折线图之后又来饼状图啦~\(≧▽≦)/~啦啦啦 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. 使用canvas绘制饼状图

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  3. Canvas(3)---绘制饼状图

    Canvas(3)---绘制饼状图 有关canvas之前有写过两篇文章 1.Canvas(1)---概述+简单示例 2.Canvas(2)---绘制折线图 在绘制饼状图之前,我们先要理解什么是圆弧,如 ...

  4. 用PNChart绘制饼状图简介

    写在前面 最近做的小Demo中有一个绘制饼状图的需求.在开始实现之前上网了解了一下现有的一些绘制图形的第三方库,相应的库还是有挺多的,PNChart便是其中一个.PNChart是一个90后的中国boy ...

  5. canvas动态绘制饼状图，

    当我们使用Echrts很Highcharts的时候,总是觉得各种统计图表是多么神奇,今天我就用现代浏览器支持的canvas来绘制饼状统计图,当然仅仅是画出图并没什么难度,但是统计图一般都有输入,根据不 ...

  6. canvas绘制饼型图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Graphic系统综合练习案例-绘制饼状图

    这里用一个案例来将之前学过的关于绘制相关的东东加强巩固一下,纯绘制,木有加点击效果,先来看下最终效果: github中这种百分比饼图的效果非常非常之多,实际在项目中开发当产品有这样类似的需求时做为开发 ...

  8. IOS之以UIBezierPath绘制饼状图

    1.绘制的饼状图是通过多个扇形拼和而成,绘制一个扇形也是比较简单的,核心代码如下: 先画一条圆弧,再画半径,接着再画一条圆弧,最后闭合路径: UIBezierPath*  aPath = [[UIBe ...

  9. [Echarts]用Echarts绘制饼状图

    在项目网站的网页中,有这样一幅图: 心血来潮,想使用百度Echarts来绘制一下,可是没能绘制得完全一样,Echarts饼状图的label不能在图形下面放成一行,最后的效果是这样子的: 鼠标移动到it ...

随机推荐

  1. 20155315实验四 Android程序设计

    实验内容 安装 Android Stuidio 学习Android Stuidio调试应用程序 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim ...

  2. 深度学习：参数(parameters)和超参数(hyperparameters)

    1. 参数(parameters)/模型参数 由模型通过学习得到的变量,比如权重和偏置 2. 超参数(hyperparameters)/算法参数 根据经验进行设定,影响到权重和偏置的大小,比如迭代次数 ...

  3. WPF获取窗口句柄

    通过WPF的互操作帮助类WindowInteropHelper,相关连接:https://msdn.microsoft.com/zh-cn/library/system.windows.interop ...

  4. CentOS 下 MySQL 5.6 基于 RPM 的下载、安装、配置

    CentOS 下 MySQL 5.6 基于 RPM 的下载.安装.配置 系统: CentOS 7 x86_64 MySQL 版本: 5.6.40 安装方式: RPM 下载 下载地址 操作系统 选择 R ...

  5. JMeter自学笔记1-环境安装

    一.写在前面的话: Jmeter是一款优秀的开源测试工具, 是每位测试工程师进阶过程中,需要熟悉并掌握的一款测试工具,熟练使用Jmeter能大大提高工作效率. Jmeter环境安装需要依赖JDK,所以 ...

  6. 该用哪个：Redis与Memcached之间如何选择呢？

    华为云分布式缓存Redis5.0和Memcached都是华为云DCS的核心产品. 那么在不同的使用场景之下,如何选择Redis5.0和Memcached呢? 就由小编为大家进行详细的数据对比分析吧 R ...

  7. 【ZABBIX】Zabbix触发器的告警原理及创建方法

    概述:       触发器中的表达式使用很灵活,我们可以创建一个复杂的逻辑测试监控,触发器表达式形式如下: {<server>:<key>.<function>(& ...

  8. DX孟虎点评新兴市场：巴西俄罗斯火爆背后

    [亿邦动力网讯]4月3日消息,在第九届中国中小企业电子商务大会暨2014中国(河南)跨境贸易电子商务峰会上,DX公司CEO孟虎对新兴市场做了详细的分析,指出在当今的跨境电商环境下,北美.西欧作为电商成 ...

  9. lamp一键配置 --转自秋水

    https://teddysun.com/lamp LAMP一键安装脚本 最后修改于:2015年11月08日 / 秋水逸冰 / 54,300 次围观 973 本脚本适用环境: 系统支持:CentOS/ ...

  10. Scrum立会报告+燃尽图（Beta阶段第三次）

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2385 项目地址:https://coding.net/u/wuyy694 ...