第162天：canvas中Konva库的使用方法

本篇接着上一篇：第157天：canvas基础知识详解  继续来写。

五、Konva的使用快速上手

5.1 Konva的整体理念

                  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容器
         window.innerWidth,   //设置全屏
        height: window.innerHeight
    });

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

    //第三步： 创建矩形
    var rect = new Konva.Rect({     //创建一个矩形
        x: 100,                     //矩形的x坐标，相对其父容器的坐标
        y: 100,                      
         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的控制方法
otween.play(), //播放动画
otween.pause(), //暂停动画
otween.reverse(), //动画逆播放
otween.reset(), //重置动画
otween.finish(), //立即结束动画
oseek：英文：寻找 英 [siːk] 美 [sik]
tween的缓动控制选项
oKonva.Easings.Linear //线性
oKonva.Easings.EaseIn //缓动，先慢后快
oKonva.Easings.EaseOut //先快后慢
oKonva.Easings.EaseInOut //两头慢，中间快
oKonva.Easings.BackEaseIn //往回来一点，然后往前冲，汽车启动类似...
oKonva.Easings.BackEaseOut
oKonva.Easings.BackEaseInOut
oKonva.Easings.ElasticEaseIn //橡皮筋 英 [ɪ'læstɪk] 美 [ɪ'læstɪk]
oKonva.Easings.ElasticEaseOut
oKonva.Easings.ElasticEaseInOut
oKonva.Easings.BounceEaseIn //弹跳；弹起，反跳；弹回 英 [baʊns] 美 [baʊns]
oKonva.Easings.BounceEaseOut
oKonva.Easings.BounceEaseInOut
oKonva.Easings.StrongEaseIn //强力
oKonva.Easings.StrongEaseOut
oKonva.Easings.StrongEaseInOut

5.3.2 动画to的使用

• to就是对tween的封装，比较简单好用。

//案例：
    var rect = new Konva.Rect({
        x: 10,
        y: 10,
         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;//注意都是弧度 

• 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',
         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: 楔形

5.7 柱状图案例

• histogram n. [统计] 直方图；柱状图 英 ['hɪstəgræm] 美 ['hɪstəɡræm]

六、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();

}