专栏首页老马寒门ITCanvas入门到高级详解(下)

Canvas入门到高级详解(下)

四、 Canvas 开发库封装

4.1 封装常用的绘制函数

4.1.1 封装一个矩形

//思考:我们用到的矩形需要哪些绘制的东西呢?

  1. 矩形的 x、y坐标
  2. 矩形的宽高
  3. 矩形的边框的线条样式、线条宽度
  4. 矩形填充的样式
  5. 矩形的旋转角度
  6. 矩形的缩小放大
//下面是把上面所有的功能进行封装的代码:
function ItcastRect( option ) {//矩形构造函数
    this._init(option);
}
ItcastRect.prototype = {  //矩形的原型对象
    _init: function( option ) {  //初始化方法
        option = option || {};
        this.x = option.x === 0 ? 0 : option.x || 100;
        this.y = option.y === 0 ? 0 : option.y || 100;
        this.w = option.w || 100;
        this.h = option.h || 100;
        this.angle = option.angle === 0 ? 0 : option.angle || 0;
        this.fillStyle = option.fillStyle || 'silver';
        this.strokeStyle = option.strokeStyle || 'red';
        this.strokeWidth = option.strokeWidth || 4;
        this.scaleX = option.scaleX || 1;
        this.scaleY = option.Y || 1;
    },
    render: function( ctx ) {//把矩形渲染到canvas中
        ctx.save();
        ctx.translate( this.x, this.y );//位移画布
        ctx.rotate( this.angle * Math.PI / 180 );//旋转角度
        ctx.scale( this.scaleX, this.scaleY );//缩放
        ctx.fillStyle = this.fillStyle;
        ctx.fillRect( 0, 0, this.w, this.h ); //填充矩形
        ctx.lineWidth = this.strokeWidth;     //线宽
        ctx.strokeStyle = this.strokeStyle;   //填充样式
        ctx.strokeRect( 0,0,this.w,this.h );  //描边样式
        ctx.restore();
    },
    constructor: ItcastRect
};
  • 4.1.2 作业:尝试着封装一个圆形?
//封装圆形的代码的答案:不要偷看
function ItcastCircle(option) {
  this._init(option);
}
ItcastCircle.prototype = {
  _init: function(option) {
    option = option || {};
    this.x = option.x === 0 ? 0 : option.x || 100;
    this.y = option.y === 0 ? 0 : option.y || 100;
    this.w = option.w || 100;
    this.h = option.h || 100;
    this.angle = option.angle === 0 ? 0 : option.angle || 0;
    this.fillStyle = option.fillStyle || 'silver';
    this.strokeStyle = option.strokeStyle || 'red';
    this.strokeWidth = option.strokeWidth || 4;
    this.scaleX = option.scaleX || 1;
    this.scaleY = option.Y || 1;
    this.opactity = option.opactity || 1;
    this.counterclockwise =
      option.counterclockwise === true
        ? true
        : option.counterclockwise || false;
    this.startAngle = option.startAngle == 0 ? 0 : option.startAngle || 0;
    this.endAngle = option.endAngle == 0 ? 0 : option.endAngle || 0;
    this.startAngle = (this.startAngle * Math.PI) / 180;
    this.endAngle = (this.endAngle * Math.PI) / 180;
    this.r = option.r || 100;
  },
  render: function(ctx) {
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.scale(this.scaleX, this.scaleY);
    ctx.rotate((this.agnle * Math.PI) / 180);
    ctx.globalAlpha = this.opacity;
    ctx.fillStyle = this.fillStyle;
    ctx.strokeStyle = this.strokeStyle;
    ctx.moveTo(0, 0);
    ctx.arc(
      0,
      0,
      this.r,
      this.startAngle,
      this.endAngle,
      this.counterclockwise
    );
    ctx.fill();
    ctx.stroke();
    ctx.restore();
  },
  constructor: ItcastCircle
};

4.2 第三方库使用

  • Rgraph vs 百度的 echart
https://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph/
  • 国产的 egret 引擎
 http://www.egret-labs.org/
  • 比较火的 3d 引擎:treejs
http://threejs.org/
  • Konva
官网:http://konvajs.github.io/
    特点:
     * 小巧、使用方便、适合移动端和pc端
     * 支持丰富的事件处理操作
     * 支持类似JQuery的操作方式(顺带能复习jQueyr)
     * 开源,可以随意更改
     * 社区更新比较活跃,github托管源码
     * 性能也不错
  • 其他的还有很多,希望以后能用到你们的库。

五、Konva 的使用快速上手

5.1 Konva 的整体理念

  • 舞台的概念的引入。整个视图看做是一个舞台 stage
  • 舞台中可以绘制很多个层 layer
  • layer 下面可以有很多的 group
  • group 下面可以有 矩形、图片、其他形状等
  • 参看:快速上手文档---查看翻译文档
                  Stage
                    |
             +------+------+
             |             |
           Layer         Layer
             |             |
       +-----+-----+     Shape
       |           |
     Group       Group
       |           |
       +       +---+---+
       |       |       |
    Shape   Group    Shape
               |
               +
               |
             Shape

5.2 Konva 矩形案例

5.2.1 创建一个矩形: Konva.Rect(option);

//Konva使用的基本案例
//第一步:创建舞台
var stage = new Konva.Stage({
    container: 'container',     //需要存放舞台的Dom容器
    width: window.innerWidth,   //设置全屏
    height: window.innerHeight
});

//第二步:创建层
var layer = new Konva.Layer();  //创建一个层
stage.add(layer);               //把层添加到舞台

//第三步: 创建矩形
var rect = new Konva.Rect({     //创建一个矩形
    x: 100,                     //矩形的x坐标,相对其父容器的坐标
    y: 100,
    width: 100,                 //矩形的宽度
    height: 100,                //矩形高度
    fill: 'gold',               //矩形填充的颜色
    stroke: 'navy',             //矩形描边的颜色
    strokeWidth: 4,             //填充宽度
    opactity: .2,               //矩形的透明度
    scale: 1.2,                 //矩形的缩放 1:原来大小
    rotation: 30,               //旋转的角度,是deg不是弧度。
    cornerRadius: 10,           //圆角的大小(像素)
    id: 'rect1',                //id属性,类似dom的id属性
    name: 'rect',
    draggable: true             //是否可以进行拖拽
});

//创建一个组
var group = new Konva.Group({
    x: 40,
    y: 40,
});
group.add( rect );  //把矩形添加到组中

//第四步: 把形状放到层中
layer.add( group ); //把组添加到层中
layer.draw();       //绘制层到舞台上

5.3 Konva 的动画系统

5.3.1 tween 对象(重点)

  • tween,英文意思:两者之间, 英 [twiːn] 美 [twin]
  • tween 是控制 Konva 对象进行动画的核心对象。
  • tween 可以控制所有数字类型的属性进行动画处理,比如:x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX 等
//案例:
var tween = new Konva.Tween({
    node: rect,             //要进行动画的Konva对象
    x: 300,                 //要进行动画的属性
    opacity: .8,
    duration: 1,            //持续时间
    easing: Konva.Easings.EaseIn, //动画的动画效果
    yoyo: true,             //是否进行循环播放的设置
    onFinish: function() {
        //动画执行结束后,执行此方法
    }
});

tween.play();   //启动动画
  • tween 的控制方法
    • tween.play(), //播放动画
    • tween.pause(), //暂停动画
    • tween.reverse(), //动画逆播放
    • tween.reset(), //重置动画
    • tween.finish(), //立即结束动画
    • seek:英文:寻找 英 [siːk] 美 [sik]
  • tween 的缓动控制选项
    • Konva.Easings.Linear //线性
    • Konva.Easings.EaseIn //缓动,先慢后快
    • Konva.Easings.EaseOut //先快后慢
    • Konva.Easings.EaseInOut //两头慢,中间快
    • Konva.Easings.BackEaseIn //往回来一点,然后往前冲,汽车启动类似...
    • Konva.Easings.BackEaseOut
    • Konva.Easings.BackEaseInOut
    • Konva.Easings.ElasticEaseIn //橡皮筋 英 [ɪ'læstɪk] 美 [ɪ'læstɪk]
    • Konva.Easings.ElasticEaseOut
    • Konva.Easings.ElasticEaseInOut
    • Konva.Easings.BounceEaseIn //弹跳;弹起,反跳;弹回 英 [baʊns] 美 [baʊns]
    • Konva.Easings.BounceEaseOut
    • Konva.Easings.BounceEaseInOut
    • Konva.Easings.StrongEaseIn //强力
    • Konva.Easings.StrongEaseOut
    • Konva.Easings.StrongEaseInOut
  • 动画效果参考: 29Konva 动画缓动效果案例.html

5.3.2 动画 to 的使用

  • to 就是对 tween 的封装,比较简单好用。
//案例:
var rect = new Konva.Rect({
    x: 10,
    y: 10,
    width: 100,
    height: 100,
    fill: 'red'
});
layer.add(rect);
layer.draw();

//动画系统
rect.to({
    x: 100,
    y: 100,
    opactity: .1,
    duration: 3,
    onFinish: function() {

    }
});

//to: 就是对tween的简单应用。

5.3.3 Animate 的应用

  • Animation 动画,实际上就是浏览器通知开发者进行绘制,并提供当前的时间
var anim = new Konva.Animation(function(frame) {
    //动画系统提供的frame有三个属性可以使用:
    var time = frame.time, // 动画执行的总时间
        timeDiff = frame.timeDiff, // 距离上一帧的时间
        frameRate = frame.frameRate; // 帧率(既1000/间隔时间)

    //动画的动作

}, layer);

anim.start();//启动动画

//anim.stop();//结束动画

5.3.4 循环播放动画的实现

//总体思路,使用tween 配合onFinish事件中重新播放动画,达到循环播放的效果
var loopTween = new Konva.Tween({
  node: star, //设置要表现动画的 Konva对象
  rotation: 360, //旋转360度
  duration: 2, //动画持续时间
  easing: Konva.Easings.Linear,
  onFinish: function() {
    // this === loopTween //true
    this.reset(); //重置动画
    this.play(); //重新播放动画
  }
});
loopTween.play();

5.3.5 回放且循环播放动画

  • yoyo 属性可以进行对动画进行播放完后,回放当前动画,并持续循环来回切换播放。
rect.to({
  duration: 2,
  scale: 1.5,
  yoyo: true // 此设置也可以用于 tween
});

5.3.6 进度条案例

5.3.7 (谦太祥和)官网案例

  • 三角函数的补充
    • Math.sin(弧度); //夹角对面的边 和 斜边的比值
    • Math.cos(弧度); //夹角侧边 与斜边的比值
  • 圆形上面的点的坐标的计算公式 x =x0 + Math.cos(rad) * R;//x0 和 y0 是圆心点坐标 _ y =y0 + Math.sin(rad) * R; //注意都是弧度
<!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>33Canvas案例-canvas案例</title>
        <style type="text/css" media="screen">
        body {
            padding: 0;
            margin: 0;
            background-color: #f0f0f0;
            overflow: hidden;
        }           
        </style>
        <script src="bower_components/konva/konva.min.js"></script>
    </head>

<body>
    <div id="container">
    </div>
    <script>
    (function(){
        //创建舞台
        var stage = new Konva.Stage({
            container: 'container',
            width: window.innerWidth,
            height: window.innerHeight
        });

        //舞台中心,也是旋转的中心
        var groupX = stage.width() / 2,
            groupY = stage.height() / 2,
            L3_Radius = 217,
            L2_Radius = 125,
            L1_Radius = 90,
            L0_Radius = 66;


        //背景层
        var bgLayer = new Konva.Layer({
            hitGraphEnabled : false//don’t need event on layer set
        });
        //绘制背景圆形 3环
        var circle_L3 = new Konva.Circle({
            x: groupX,
            y: groupY,
            radius: L3_Radius,
            stroke: '#a0a0a0',
            stokeWidth: 2,
            opacity: .3,
            dash: [10,4]
        });
        bgLayer.add(circle_L3);

        //绘制背景圆形 2环
        var circle_L2 = new Konva.Circle({
            x: groupX,
            y: groupY,
            radius: L2_Radius,
            stroke: '#2A3466',
            stokeWidth: 2,
            opacity: .3,
            dash: [10,4]
        });
        bgLayer.add(circle_L2);

        //绘制背景中心区域
        var cneterCircleText = new CircleText({
            text: "WEB全栈",
            innerRadius: L0_Radius,
            outerRadius: L1_Radius,
            fontSize: 17,
            fontFamily: '微软雅黑',
            fontFill: "#fff",
            fontX: -41,
            fontY: -8,
            x: groupX,
            y: groupY,
            innerFill: "#2A3466",
            outerFill: "#ddd",
            opacity: .8
        });
        var centerGroup = cneterCircleText.createCircleText();
        bgLayer.add(centerGroup);

        stage.add(bgLayer);



        //动画层
        var layer = new Konva.Layer({
            // hitGraphEnabled : false
        });
        stage.add(layer);
        
    
        //创建整体的动画组
        var group = new Konva.Group({
            x: groupX,
            y: groupY,
            rotation: 0
        });

        //要创建的5个3环的对象数据设置
        var L3CircleData = [{
            text: "WebApp",//创建webapp的圆心组合 1
            innerRadius: 40,
            outerRadius: 50,
            fontSize: 14,
            fontFamily: '微软雅黑',
            fontFill: "#fff",
            fontX: -30,
            fontY: -7,
            x: L3_Radius,
            y: 0,
            x: (Math.cos(20 * Math.PI / 180) * L3_Radius),
            y: (Math.sin(20 * Math.PI / 180) * L3_Radius),
            innerFill: "#CF2782",
            outerFill: "#ddd",
            opacity: .7
        },{
            text: "canvas",//动态创建第2个group
            innerRadius: 40,
            outerRadius: 50,
            fontSize: 16    ,
            fontFamily: '微软雅黑',
            fontFill: "purple",
            fontX: -28,
            fontY: -7,
            x: 0,
            y: L3_Radius,
            innerFill: "#7CB9CE",
            outerFill: "#ddd",
            opacity: .7
        },{
            text: "ReactJS",
            innerRadius: 40,
            outerRadius: 50,
            fontSize: 16    ,
            fontFamily: '微软雅黑',
            fontFill: "purple",
            fontX: -30  ,
            fontY: -7,
            x: -L3_Radius,
            y: 0,
            innerFill: "#68AAFC",
            outerFill: "#ddd",
            opacity: .7
        },{
            text: "NodeJS",
            innerRadius: 40,
            outerRadius: 50,
            fontSize: 16    ,
            fontFamily: '微软雅黑',
            fontFill: "purple",
            fontX: -30  ,
            fontY: -7,
            x: (Math.cos(-115 * Math.PI / 180) * L3_Radius),
            y: (Math.sin(-115 * Math.PI / 180) * L3_Radius),
            innerFill: "yellow",
            outerFill: "#ddd",
            opacity: .7
        },{
            text: "HTML5",
            innerRadius: 40,
            outerRadius: 50,
            fontSize: 16    ,
            fontFamily: '微软雅黑',
            fontFill: "purple",
            fontX: -30  ,
            fontY: -7,
            x: (Math.cos(-45 * Math.PI / 180) * L3_Radius),
            y: (Math.sin(-45 * Math.PI / 180) * L3_Radius),
            innerFill: "green",
            outerFill: "#ddd",
            opacity: .7
        }];

        for( var i = 0; i < L3CircleData.length; i++ ) {
            var tempCircleText = new CircleText(L3CircleData[i]);
            var circleTextGroup = tempCircleText.createCircleText();
            group.add(circleTextGroup);
        }

        layer.add(group);


        //绘制第二层动画层
        var groupL2 = new Konva.Group({
            x: groupX,
            y: groupY,
            rotation: 0
        });

        // 绘制第二层的一个圆形
        var zeptoJSCircleText = new CircleText({
            text: "zeptoJS",
            innerRadius: 30,
            outerRadius: 40,
            fontSize: 14    ,
            fontFamily: '微软雅黑',
            fontFill: "blue",
            fontX: -26  ,
            fontY: -7,
            x: (Math.cos(-75 * Math.PI / 180) * L2_Radius),
            y: (Math.sin(-75 * Math.PI / 180) * L2_Radius),
            innerFill: "orange",
            outerFill: "#ddd",
            opacity: .7
        });
        var groupZepto = zeptoJSCircleText.createCircleText();
        groupL2.add(groupZepto);


        var CSS3CircleText = new CircleText({
            text: "CSS3",
            innerRadius: 30,
            outerRadius: 40,
            fontSize: 14    ,
            fontFamily: '微软雅黑',
            fontFill: "blue",
            fontX: -20  ,
            fontY: -7,
            x: (Math.cos(105 * Math.PI / 180) * L2_Radius),
            y: (Math.sin(105 * Math.PI / 180) * L2_Radius),
            innerFill: "pink",
            outerFill: "#ddd",
            opacity: .7
        });
        var groupC3 = CSS3CircleText.createCircleText();
        groupL2.add(groupC3);

        layer.add(groupL2);

        layer.batchDraw();

        //动画处理层
        var angularSpeed = 60;//每秒旋转的角度
        var anim = new Konva.Animation(function(frame) {
            console.log(frame.timeDiff);
            //计算每一帧旋转的角度
            var angleDiff = frame.timeDiff * angularSpeed / 1000;
            //三环进行旋转
            group.rotate(angleDiff);
            //
            group.getChildren().each(function(value, index){
                value.rotate(-angleDiff)
            });

            //2环 旋转
            groupL2.rotate(-angleDiff);
            //2环内的 组合进行反向旋转
            groupL2.getChildren().each(function(value, index){
                value.rotate(angleDiff)
            });

        }, layer);
        anim.start();


        // 动画事件处理
        group.on('mouseover touchstart',function(e){
            angularSpeed = 10;
        });
  
        group.on('mouseleave touchend',function(e){
            angularSpeed = 60;
        });
    })();
        
    //旋转图像的组合对象
    function CircleText(option) {
        // 文字内容
        // 圆的半径
        // 默认坐标位置
        // 颜色圆
        // 颜色光环
        // 透明度
        option = option || {};
        option.text = option.text || "canvas";
        option.innerRadius = option.innerRadius || 40;
        option.outerRadius = option.outerRadius || 60;
        option.fontSize =  option.fontSize || 14;
        option.fontWeight = option.fontWeight || "bold";
        option.fontFamily = option.fontFamily || '微软雅黑';
        option.fontFill = option.fontFill || "#FFF";
        option.fontX = option.fontX ||-20;
        option.fontY = option.fontY ||-7;
        option.x = option.x === 0 ? 0 : option.x || 217;
        option.y = option.y === 0 ? 0 : option.y || 217;
        option.innerFill = option.innerFill || "teal";
        option.outerFill = option.outerFill || "#ddd";
        option.opacity = option.opacity || .5;

        //创建旋转组合对象的 组
        this.createCircleText = function() {
            var group = new Konva.Group({
                x: option.x,
                y: option.y,
                rotation: 0
            });

            //内圆
            var innerCircle = new Konva.Circle({
                x: 0,
                y: 0,
                radius: option.innerRadius,
                fill: option.innerFill,
                opacity: option.opacity,
                perfectDrawEnabled : false
            });
            group.add(innerCircle);

            //环形
            var outerRing = new Konva.Ring({
                x: 0,
                y: 0,
                innerRadius: option.innerRadius,
                outerRadius: option.outerRadius,
                fill: option.outerFill,
                opacity: option.opacity,
                perfectDrawEnabled: false

            });

            group.add(outerRing);

            //文字
            var text = new Konva.Text({
                text: option.text,
                fontSize: option.fontSize,
                fontFamily: option.fontFamily,
                fontStyle: 'bold',
                fill: option.fontFill,
                x: option.fontX,
                y: option.fontY,
                align: 'left'
            });
            group.add(text);

            return group;
        }
    }
    </script>
</body>
</html>

group 的灵活运用 * konva 的 group 很灵活,每个 group 都有自己的坐标系 * group 可以包含其他的 group,可以对 group 做整个组的动画 * group 可以通过 getChidren();//可以拿到直接子级元素。

var group = new Konva.Group({
  x: 0,
  y: 0
});
group.add(rect);

5.4 Konva 的事件(重要)

var rect = new Konva.Rect({
  x: 100,
  y: 100,
  fill: 'red',
  width: 200,
  height: 200
});

//绑定事件 Konva支持事件:mouseover, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, mousewheel, click, dblclick, dragstart, dragmove, and dragend

rect.on('click', function() {
  //jQuery一模一样!!
  console.log('^_^  ^_^');
});

//绑定多个事件
rect.on('click mousemove', function(e) {});

//解除绑定事件
rect.off('click'); //这不是jQuery吗?

//触发事件
rect.fire('click');

//取消事件冒泡
rect.on('click', function(evt) {
  alert('You clicked the circle!');
  evt.cancelBubble = true; //取消事件冒泡
});

5.5 Konva 的选择器

  • 选择方法。
    • ID 选择法:stage.find('#id'); //此方法返回的是一个数组
    • name 选择法:group.findOne('.name');//返回一个 Konva 对象
    • type 选择法: group.find('Circle');//查找所有的圆形 Konva 对象
//组中查找圆形的Konva对象
groupCircle.find('Circle').each(function(circle, index) {
  circle.setZIndex(3 - index);
});

5.6 饼状图案例

  • wedge: 楔形
//创建舞台
        var stage = new Konva.Stage({
            container: 'container',
            width: window.innerWidth,//全屏
            height: window.innerHeight
        });

        //中心点坐标
        var cenX = stage.width() / 2;
        var cenY = stage.height() / 2;
        //创建层
        var layer = new Konva.Layer();
        stage.add(layer);

        //饼状图数据
        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 pieChart = new PieChart({
            data: data,//扇形区域的数据
            animateDuration: 2,//扇形动画的时间
            easing: Konva.Easings.EaseIn,//扇形动画的速度规格
            x: cenX,
            y: cenY,
            radius: .14 * stage.width(),//半径
            txtAwayFromWedge: .2 * .14 * stage.width()//扇形上的文字的距离圆形的距离
        });
        pieChart.addToLayer(layer);
        pieChart.playAnimate();
        layer.draw();

        layer.on('click tap', function(){
            pieChart.playAnimate();
        });

        //饼状图
        function PieChart(option) {
            var _this = this;
            if( !option ) {
                throw new Error('请初始化饼状图的参数');
            }

            this.animageIndex = 0;

            this.init = function(otpion) {
                //饼状图数据:[{name:'',value:.2,color:'red'},...]
                option.data = option.data || [];
                //动画执行的时间
                option.animateDuration = option.animateDuration || .8;
                //动画执行的效果
                option.easing = option.easing || Konva.Easings.Linear;
                //x,y坐标
                option.x = option.x || 0; 
                option.y = option.y || 0; 
                //饼状图半径
                option.radius = option.radius === 0 ? 0 : option.radius || 100; 

                option.txtAwayFromWedge = option.txtAwayFromWedge || 20;
                //扇区的组
                this.group = new Konva.Group({
                    x: option.x,
                    y: option.y
                });

                //文字的组
                this.TxtGroup = new Konva.Group({
                    x: option.x,
                    y: option.y
                });

                //默认的旋转角度
                var tempAngel = -90;
                //遍历生成所有扇形的对象
                for(var i = 0; i < option.data.length; i++ ) {
                    var wedgeAngel = option.data[i].value * 360;
                    var wedge = new Konva.Wedge({
                        x: 0,
                        y: 0,
                        radius: option.radius,
                        fill: option.data[i].color,
                        angle: 0,//后面有计算出角度放到数组中
                        opacity: .8,
                        id: option.data[i].name,
                        name: wedgeAngel + '',
                        rotation: tempAngel,
                        visible: true                   
                    });
                    this.group.add(wedge);

                    //当前 扇形的对象 和扇形的需要旋转的角度
                    // arr.push({value: wedge, angle: option.data[i].value * 360});

                    //绘制 文字 
                    //扇形区域的中间
                    var totalAngle = tempAngel + 1/2 * wedgeAngel;
                    //设置文字的x坐标
                    var txtX = Math.cos( totalAngle * Math.PI / 180) * (option.radius + option.txtAwayFromWedge);
                    // 设置文字的y坐标
                    var txtY = Math.sin( totalAngle * Math.PI / 180) * (option.radius + option.txtAwayFromWedge);
                    var txtTitle = option.data[i].name +' ' + option.data[i].value * 100 + '%';
                    var txt = new Konva.Text({
                        x: txtX,
                        y: txtY,
                        fill: option.data[i].color,
                        fontSize: '14px',
                        fontFamily: '微软雅黑',
                        fontStyle: 'bold',
                        align: 'left',
                        id: 'txt_' + option.data[i].name,
                        text: txtTitle,
                        visible: false //默认隐藏
                    });
                    this.TxtGroup.add(txt);
                    console.log(txt.x() + " " + txt.y());

                    //设置下一个元素旋转到具体的位置
                    tempAngel += option.data[i].value * 360;
                }
            };

            this.init(option);//初始化

            //把当前 饼状图添加到 层
            this.addToLayer = function(layer) {
                layer.add(this.group);
                layer.add(this.TxtGroup);
                layer.draw();
            };

            //展示动画
            this.playAnimate = function() {
                _this = this;
                if(this.animageIndex >= data.length) {
                    _this.animageIndex = 0;
                    return;
                }
                if(this.animageIndex == 0) {
                    _this.group.getChildren().each(function(value, index){
                        value.angle(0);
                    });
                    _this.TxtGroup.getChildren().each(function(value,index){
                        value.hide();
                    });
                }
                this.calleeFn = arguments.callee;//当前函数

                //绘制一个 扇区的动画
                var wedge = this.group.getChildren()[this.animageIndex];
                var angel = Number(wedge.name());//扇区的度数
                wedge.to({
                    angle: angel,
                    duration: angel * option.animateDuration / 360,
                    onFinish: function() {
                        _this.TxtGroup.getChildren()[_this.animageIndex].show();
                        _this.TxtGroup.getParent().draw();
                        _this.animageIndex++;
                        _this.calleeFn();//调用当前函数自身,形成动画队列。
                    }
                });
            };

        }

5.7 柱状图案例

  • histogram n. [统计] 直方图;柱状图 英 ['hɪstəgræm] 美 ['hɪstəɡræm]
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>36柱状图案例</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/KonvaExtend.js" charset="utf-8"></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: .2, color: 'blue' },
            { name: '阿里', value: .4, color: 'red' },
            { name: '新浪', value: .1, color: 'purple' },
            { name: '搜狐', value: .1, color: 'navy' },
            { name: '360', value: .2, color: 'orange'  }
        ];

        var his = new Histogram({
            data: data,
            x: 1/8 * stage.width(),
            y: 3/4 * stage.height(),
            blWidth: 2,
            blColor: 'lightblue',
            width: 3/4 * stage.width(),
            height: 1/3 * stage.height(),
            fontSize: 14
        });
        his.addToGroupOrLayer(layer);
        layer.draw();
        his.playAnimate();

        layer.on('click',function(){
            his.playAnimate();
        });
    </script>
</body>
</html>

六、Canvas 项目实战

七、Canvas 优化

 <!-- requestAnim shim layer by Paul Irish -->
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              window.oRequestAnimationFrame      ||
              window.msRequestAnimationFrame     ||
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/
var canvas, context, toggle;

init();
animate();

function init() {
    canvas = document.createElement( 'canvas' );
    canvas.width = 512;
    canvas.height = 512;
    context = canvas.getContext( '2d' );
    document.body.appendChild( canvas );
}

function animate() {
    requestAnimFrame( animate );
    draw();
}

function draw() {
    var time = new Date().getTime() * 0.002;
    var x = Math.sin( time ) * 192 + 256;
    var y = Math.cos( time * 0.9 ) * 192 + 256;
    toggle = !toggle;
    context.fillStyle = toggle ? 'rgb(200,200,20)' :  'rgb(20,20,200)';
    context.beginPath();
    context.arc( x, y, 10, 0, Math.PI * 2, true );
    context.closePath();
    context.fill();
}

视频

配套视频请戳:https://www.bilibili.com/video/av26151775/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端面试题:JS中的let和var的区别

    最近很多前端的朋友去面试被问到let和var的区别,其实阮一峰老师的ES6中已经很详细介绍了let的用法和var的区别。我简单总结一下,以便各位以后面试中使用。...

    老马
  • 09Vue.js快速入门-Vue入门之Vuex实战

    9.1. 引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色。组件化的同时带来的是:组件之间的数据共享和通信的难题。 尤其Vue组件...

    老马
  • 04-Vue入门系列之Vue事件处理

    4.1. 监听事件的Vue处理 Vue提供了协助我们为标签绑定时间的方法,当然我们可以直接用dom原生的方式去绑定事件。Vue提供的指令进行绑定也是非常方便,而...

    老马
  • python中assert的使用

       在python程序中,如果想要确保程序中的某个条件一定为真才会继续执行的话,而可以使用assert来实现。

    py3study
  • js判断浏览器信息

    本示例讲述了关于js获取各种浏览器信息,例如微信浏览器,qq内置浏览器,电脑火狐浏览器,qq浏览器等等

    仙士可
  • Vue 进阶必学之高阶组件 HOC(保姆式教学,冲击20k必备)

    高阶组件这个概念在 React 中一度非常流行,但是在 Vue 的社区里讨论的不多,本篇文章就真正的带你来玩一个进阶的骚操作。

    ssh1995
  • 手拉手,用Vue开发动态刷新Echarts组件

    司想君
  • 微服务Microservices——应用架构的未来

    能够构建、演变和扩展大型应用程序对于组织来说是至关重要的,但是所涉及的挑战使其成为一项困难的任务。正因为如此,微服务已经成为构建现代云应用的主导模式,它将单个组...

    程序你好
  • Ambarella展示了新的机器人平台和AWS人工智能编程协议

    Ambarella公司总部位于加州圣克拉拉,以芯片闻名。近日,它宣布了一个新的机器人平台,该平台基于其用于人工智能处理的CVflow架构。此外,它还与亚马逊网络...

    AiTechYun
  • 如何使用Oozie API接口向Kerberos集群提交Java程序

    在CDH集群外的节点向集群提交MapReduce作业的方式有多种,前面Fayson介绍了《如何跨平台在本地开发环境提交MapReduce作业到CDH集群》和《如...

    Fayson

扫码关注云+社区

领取腾讯云代金券