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. 20155209 2016-2017-2 《Java程序设计》第1周学习总结

    20155209 2016-2017-2 <Java程序设计>第1周学习总结 初读教材对每章节的提问 第一章:为什么java被广泛使用,java这样的平台相比其它语言有什么实质的好处? 第 ...

  2. 20155220 实验一《Java开发环境的熟悉》实验报告

    实验一Java开发环境的熟悉 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验知识点 1.JVM.JRE.JDK的安装位置与区 ...

  3. 20155301第十二周java课程程序

    20155301第十二周java课程程序 内容一:在IDEA中以TDD的方式对String类和Arrays类进行学习 测试相关方法的正常,错误和边界情况 String类 charAt split Ar ...

  4. 20155301 2016-2017-2 《Java程序设计》第4周学习总结

    20155301 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 1.关键词extends,表示SwordsMan会扩充Role的行为,然后再扩充Role原本 ...

  5. 20155315 2016-2017-2 《Java程序设计》第三周学习总结

    教材学习内容总结 1.构造方法决定类生成对象的方式 用this将已存在的参数的值指定给此参数. 用new建立新的实例. class Clothes { String color; char size; ...

  6. sql语句-7-更新数据

  7. jenkins 入门教程

    jenkins是一个广泛用于持续构建的可视化web工具,持续构建说得更直白点,就是各种项目的"自动化"编译.打包.分发部署.jenkins可以很好的支持各种语言(比如:java, ...

  8. JS 中屏幕、浏览器和文档的高度、宽度和距离

    1.各种对象 window.screen - 屏幕,window - 窗口,document.documentElement & document.body.parentNode - 文档,d ...

  9. ObjectAnimator实现菜单的弹出（扇形）

    用ObjectAnimator 实现菜单的弹出 首先是菜单的图片资源和布局 布局中使用FrameLaout 将菜单唤出对应的imageView放在布局的最后面来隐藏菜单详细内容. <?xml v ...

  10. BVT与冒烟测试

    [BVT的释义] BVT的全称是Build Verification Test.可以说这个全称就是BVT的定义了. BVT只验证build构建的成功与失败,不深入测试构建好的build的功能.性能等等 ...