饼状图面向过程版本_饼状图的面向过程konva-优快云博客

本文链接：https://blog.youkuaiyun.com/stopcpp/article/details/53572257

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>饼状图-面向过程版本</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #f0f0f0;
            overflow: hidden;
        }
    </style>
    <script src="lib/js/konva/konva.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 x0 = cenX,
        y0 = cenY;
    var tempAngle = -90;
    data.forEach(function(item,index){
        var angle = 360*item.value;
        //做一个扇形
        var wedge = new Konva.Wedge({
            x:x0,
            y:y0,
            angle:angle,
            radius:100,
            fill:item.color,
            rotation:tempAngle,
        });

        layer.add(wedge);

        var textAngle = tempAngle + 1/2*angle;

        var text  = new Konva.Text({
            x:x0+(100+20)*Math.cos(Math.PI/180*textAngle),
            y:y0+(100+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());
        }

        layer.add(text);
        tempAngle += angle;
    });

    var cir = new Konva.Circle({
        x:x0,
        y:y0,
        radius:110,
        stroke:'#ccc',
        strokeWidth:2
    });
    layer.add(cir);
    layer.draw();


    var index = 0;//动画的索引值
    var wedges = layer.find('Wedge');
    wedges.each(function(item,index){
        item.angle(0);
    });

    //绘制动画
    function animatePie(){
        //拿到所有的扇形
        var item = wedges[index];
        item.angle(0);
        item.to({
            angle:data[index].value*360,
            duration:data[index].value*2,
            onFinish:function(){
                //当动画结束之后，执行此方法
                index++;
                if(index >= data.length){
                    return;//立即结束当前函数
                }
                animatePie();
            }
        });
    }
    animatePie();


    </script>
</body>
</html>