美文网首页程序员
canvas基础之 konva框架简单应用 饼状图动画

canvas基础之 konva框架简单应用 饼状图动画

作者: 萝卜仔1 | 来源:发表于2017-03-22 22:04 被阅读0次

    整体思路

    定义一些常量,数据 ,扇形半径,圆的半径, 舞台的搭建

    创建一个画扇形的构造函数,该构造函数通过传入数据根并且据数据来进行画扇形和具体数据

    在该构造函数可以定义三个组用来保存不同东西,扇形一个组  数字文字描述一个组  矩形区域也一个组 

    在该构造函数定义个绘制的函数 通过传入画布把里面定义的组放入画布中  

    通过扇形组进行遍历 定义一个变量来记录动画的所代表具体扇形,利用递归的方法让每一个扇形都由0到指定的角度

    当最后一个扇形结束动画的时候结束递归就可以了 

    关键点

    扇形的绘制 确定一个起点, 根据起来画扇形  每画一个扇形更新起点  

    文字的绘制 通过三角函数来确定位置 进行微调文字达到效果

    通过一个变量来记录动画队列,注意结束递归.

    相关文章

      网友评论

        本文标题:canvas基础之 konva框架简单应用 饼状图动画

        本文链接:https://www.haomeiwen.com/subject/zuyanttx.html