什么是Konva?

Konva是一個基于 Canvas 開發的 2d JavaScript框架庫, 它可以輕松的實作桌面應用和移動應用中的圖形互動互動效果.

Konva 可以實作高性能影片, 過渡, 節點嵌套, 區域操作, 濾鏡, 快取, 事件等功能, 不僅僅適用于桌面與移動開發, 還有更為廣泛的應用.

Konva 允許在你舞臺上繪圖, 添加事件監聽, 移動或縮放某個圖形, 獨立旋轉, 以及高效的影片. 即使應用中含有數千個圖形也是可以輕松實作的.

專案原著是從KineticJS的GitHub開始，

Install Konva

如果你使用包管理工具

$ npm install konva  

$ # or  

$ bower install konva

或者通過CDN下載

完整版konva.js壓縮版konva.min.js

#什么是Konva? What’s Konva? Konva是一個基于 Canvas 開發的 2d JavaScript框架庫, 它可以輕松的實作桌面應用和移動應用中的圖形互動互動效果.

Konva 可以實作高性能影片, 過渡, 節點嵌套, 區域操作, 濾鏡, 快取, 事件等功能, 不僅僅適用于桌面與移動開發, 還有更為廣泛的應用. #它是如何作業 How does it work? 一切都是從一個包含了一系列用戶的圖層Konva.Layer的舞臺物件Konva.Stage開始的

每個圖層都有兩個<canvas>渲染器：一個場景渲染器以及一個hit graph渲染器(隱藏渲染器)，場景渲染器是你所看到的東西,hit graph渲染器則是一個特殊的隱藏畫布，它被用來實作高性能的點擊檢測機制，

每個圖層都可以包含許多形狀，形狀分組，以及分組的分組，所有的舞臺、圖層、分組和形狀都是節點，就像是HTML頁面中的DOM節點一樣，

這里有一個節點的層次結構的示例：

              Stage
                |
         +------+------+
         |             |
       Layer         Layer
         |             |
   +-----+-----+     Shape
   |           |
 Group       Group
   |           |
   +       +---+---+
   |       |       |
Shape   Group    Shape
           |
           +
           |
         Shape

所有節點都可以被樣式化、變換，盡管Konva以及內建了很多形狀，比如：三角形，原型，圖片，精靈，文本，線條，多邊形，正多邊形，路徑，星型等，

你也可以通過實體化Shape類、并創建一個draw函式來創建自定義的形狀，

每當你準備好一個具有圖層和形狀的舞臺，你就可以系結事件監聽器、節點變換、運行影片、應用濾鏡以及做更多事情，

簡單示例：

// first we need to create a stage *首先我們需要創建一個舞臺
var stage = new Konva.Stage({
  container: 'container',   // id of container <div> *包裹舞臺的DIV元素的ID
  width: 500,
  height: 500
});

// then create layer *然后創建一個圖層
var layer = new Konva.Layer();

// create our shape *創建我們的形狀
var circle = new Konva.Circle({
  x: stage.getWidth() / 2,
  y: stage.getHeight() / 2,
  radius: 70,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4
});

// add the shape to the layer *將形狀添加到圖層上
layer.add(circle);

// add the layer to the stage *將圖層添加到舞臺上
stage.add(layer);

結果:

##基本形狀 Basic shapes Konva.js 支持這些形狀：矩形，橢圓，線，影像，文字，文字路徑，星型，標簽，SVG路徑，正多邊形你也可以創建自定義的形狀：

 var triangle = new Konva.Shape({
      sceneFunc: function(context) {
        context.beginPath();
        context.moveTo(20, 50);
        context.lineTo(220, 80);
        context.quadraticCurveTo(150, 100, 260, 170);
        context.closePath();

        // special Konva.js method
        context.fillStrokeShape(this);
      },
      fill: '#00D2FF',
      stroke: 'black',
      strokeWidth: 4
});

結果:

##樣式 Styles 每個形狀都支持以下的樣式屬性：

• Fill. Solid color, gradients or images *填充：純色，漸變或者影像紋理
• Stroke (color, width) *描邊：顏色，寬度
• Shadow (color, offset, opacity, blur) *陰影：顏色，偏移，透明度，模糊度
• Opacity *透明度

示例:

var pentagon = new Konva.RegularPolygon({
	x: stage.getWidth() / 2,
	y: stage.getHeight() / 2,
	sides: 5,
	radius: 70,
	fill: 'red',
	stroke: 'black',
	strokeWidth: 4,
	shadowOffsetX : 20,
	shadowOffsetY : 25,
	shadowBlur : 40,
	opacity : 0.5
	});

結果:

##事件 Events 使用Konvajs，你可以方便地監聽用戶輸入事件（點擊，雙擊，滑鼠滑過，觸擊，連續觸擊，觸摸開始等），屬性變更事件（橫向縮放變更，填充變更等），和拖拽釋放事件（拖拽開始，拖拽移動，托轉結束），

示例:circle.on('mouseout touchend', function() { console.log('user input'); });

circle.on('xChange', function() {
    console.log('position change');
});

circle.on('dragend', function() {
    console.log('drag stopped');
});  

See working example.###拖拽和釋放 DRAG AND DROP Konvajs沒有內建的拖拽支持，現在并沒有任何拖拽事件（drop,dragenter,dragleave,dragover) 但是,利用框架，可以輕易地實作這個機制，

啟用拖拽只需要設定draggable屬性為true，

shape.draggable('true');

然后你就可以支持拖拽事件，并設定移動區域的限制，

##濾鏡 FiltersKonvajs有多重濾鏡：模糊，反色，雜色等，Filters API收錄了所有的濾鏡，示例:

##影片Animation你可以使用兩種方式創建影片:

使用Konva.Animation的示例:

var anim = new Konva.Animation(function(frame) {
    var time = frame.time, // *時間
        timeDiff = frame.timeDiff, // *間隔時間
        frameRate = frame.frameRate; // *幀率
    // update stuff *用于更新影片狀態的代碼寫在下面
}, layer);
anim.start();

使用Konva.Tween的示例:

 var tween = new Konva.Tween({
        node: rect,
        duration: 1,
        x: 140,
        rotation: Math.PI * 2,
        opacity: 1,
        strokeWidth: 6
});
tween.play();

// or new shorter method: *或者更簡短的新方法：
circle.to({
    duration : 1,
    fill : 'green'
});   

【譯注】:

這里其實是創建影片的兩種最常見的方式，

Animation是指每隔一段時間呼叫一次我們寫好的回呼，他們會把當前時間、兩幀之間的時間差、幀率以傳參的方式交給我們，我們則根據這些資料，手動寫代碼更新畫面的狀態，

Tween則是描述間隔時間、屬性變化之后，讓框架自行更新資料，

前者更加靈活，后者更加方便， ##選擇器 Selectors在你創建大型應用時，元素搜索是很有用的，

Konvajs提供的選擇器可以幫你尋找元素，你可以使用find()函式（回傳一個集合）或者findOne()函式(回傳集合中的第一個元素)

var circle = new Konva.Circle({
        radius: 10,
        fill: 'red',
        id : 'face',
        name : 'red circle'
});
layer.add(circle);

// then try to search

// find by type
layer.find('Circle'); // all circles

// find by id
layer.findOne('#face');

// find by name (like css class)
layer.find('.red')  

##序列化和反序列化 Serialisation and Deserialization你創建的所有物件都可以用JSON的姓氏存盤，你可以將它保存在服務器或者HTML5瀏覽器本地存盤里，

var json = stage.toJSON();
Also you can restore objects from JSON:

var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":100,"y":100,"sides":6,"radius":70,"fill":"red","stroke":"black","strokeWidth":4},"className":"RegularPolygon"}]}]}';

var stage = Konva.Node.create(json, 'container');
Performance  

##性能 PerformanceKonvajs有很多工具，可以改善你的應用的性能，其中最關鍵的方法有：

快取允許你在緩沖畫布上繪制一個元素，然后從那個canvas上繪制元素，在有很多組合節點時，這將會提高你的性能，比如說文本或者具有很多陰影和描邊的形狀，

shape.cache();

Demo【譯注】：Canvas的矢量繪制性能很差，而位圖繪制則稍好，所以將復雜的圖形先保存到圖片或者另外的畫布中，然后做完位圖繪制到主畫布上，是很常見的優化手法分層，這個框架支持多個<canvas>元素，你可以依據自己的判斷來放置自己的物件，

舉個例子，你的應用包含一個復雜的背景很多個移動的形狀，你可以為背景準備一個圖層，再為其他形狀準備另外一個圖層，當更新形狀的狀態時，你就不需要更新背景畫布的狀態了，Demo

你可以在這里看到所有可用的性能建議： http://konvajs.github.io/docs/performance/All_Performance_Tips.html