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

前端外刊评论

2018-01-31

关注关注

本篇接着上一篇：第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 <strong>stage</strong> = new<strong> Konva.Stage</strong>({
         container: 'container',     //需要存放舞台的Dom容器
         width: window.innerWidth,   //设置全屏
         height: window.innerHeight
     });
 
     //第二步：创建层
     var <strong>layer </strong>= new Konva.Layer();  //创建一个层
     <strong>stage.add(layer);</strong>               //把层添加到舞台
 
     //第三步： 创建矩形
     var rect = new <strong>Konva.Rect</strong>({     //创建一个矩形
         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.<strong>add</strong>( group ); //把组添加到层中
     layer.<strong>draw</strong>();       //绘制层到舞台上

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.<strong>Tween</strong>({
     node: rect,             //要进行动画的Konva对象
     x: 300,                 //要进行动画的属性
     opacity: .8,            
     duration: 1,            //持续时间
     easing: Konva.Easings.EaseIn, //动画的动画效果
     yoyo: true,             //是否进行循环播放的设置
     onFinish: function() {
         //动画执行结束后，执行此方法
     }
 });
 
 tween.<strong>play</strong>();   //启动动画
 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,
         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;//注意都是弧度

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.<strong>on</strong>('<strong>click</strong>', function(){   //jQuery一模一样！！
         console.log('^_^  ^_^');
     });
 
     //绑定多个事件
     rect.<strong>on</strong>('click mousemove',function(e){
 
     });
 
     //解除绑定事件
     rect.<strong>off</strong>('click');             //这不是jQuery吗？
 
     //触发事件
     rect.<strong>fire</strong>('click');
 
     //取消事件冒泡
     rect.on('click', function(evt) {
       alert('You clicked the circle!');
       evt.<strong>cancelBubble</strong> = 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();
 
 }

canvas rect