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,      

       

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

 

}

 

 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的控制方法

o tween.play(), //播放動畫

o tween.pause(), //暫停動畫

o tween.reverse(), //動畫逆播放

o tween.reset(), //重置動畫

o tween.finish(), //當即結束動畫

o seek：英文：尋找 英 [siːk] 美 [sik]

· tween的緩動控制選項

o Konva.Easings.Linear //線性

o Konva.Easings.EaseIn //緩動，先慢後快

o Konva.Easings.EaseOut //先快後慢

o Konva.Easings.EaseInOut //兩頭慢，中間快

o Konva.Easings.BackEaseIn //往回來一點，而後往前衝，汽車啓動相似...

o Konva.Easings.BackEaseOut

o Konva.Easings.BackEaseInOut

o Konva.Easings.ElasticEaseIn //橡皮筋 英 [ɪ'læstɪk] 美 [ɪ'læstɪk]

o Konva.Easings.ElasticEaseOut

o Konva.Easings.ElasticEaseInOut

o Konva.Easings.BounceEaseIn //彈跳；彈起，反跳；彈回 英 [baʊns] 美 [baʊns]

o Konva.Easings.BounceEaseOut

o Konva.Easings.BounceEaseInOut

o Konva.Easings.StrongEaseIn //強力

o Konva.Easings.StrongEaseOut

o 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

    });

· 三角函數的補充

o Math.sin(弧度); //夾角對面的邊 和 斜邊的比值

o Math.cos(弧度); //夾角側邊 與斜邊的比值

· 圓形上面的點的座標的計算公式

o x =x0 + Math.cos(rad) * R;//x0和y0是圓心點座標

o y =y0 + Math.sin(rad) * R;//注意都是弧度 

 

 

 

· group的靈活運用

o konva的group很靈活，每一個group都有本身的座標系

o group能夠包含其餘的group，能夠對group作整個組的動畫

o 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的選擇器

· 選擇方法。

o ID選擇法：stage.find('#id'); //此方法返回的是一個數組

o name選擇法：group.findOne('.name');//返回一個Konva對象

o type選擇法： group.find('Circle');//查找全部的圓形Konva對象

    //組中查找圓形的Konva對象

    groupCircle.find('Circle').each(function( circle, index ){

        circle.setZIndex( 3 - index );

    });

 

 

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

 

}