Clever Geek Handbook

Konva.js-HTML5 2dキャンバスフレームワーク

画像



ご挨拶。 Konva.jsプロジェクトをコミュニティに紹介します 。



Konva.jsは、イベントサポート付きのオブジェクトスタイルでCanvas 2dを操作できるフレームワークです。



機能の簡単なリストは次のようになります。

  1. オブジェクトAPI
  2. ネストされたオブジェクトとイベントバブリング
  3. 複数のレイヤー（複数のキャンバス要素）のサポート
  4. オブジェクトのキャッシュ
  5. アニメーションのサポート
  6. カスタムドラッグアンドドロップ
  7. フィルター
  8. 長方形、円、画像、テキスト、線、SVGパスなどのすぐに使用できるオブジェクト
  9. 独自の形状を簡単に作成
  10. 開発者が属性変更イベント、レンダリングなどにサブスクライブできるようにするイベントアーキテクチャ
  11. シリアライゼーションとデシリアライゼーション
  12. stage.get（ '＃foo'）およびlayer.get（ '。Bar'）セレクターを使用した高度な検索
  13. デスクトップおよびモバイルイベント
  14. HDPIデバイスの組み込みサポート
  15. などなど




次に、コードサンプルフレームワークの機能を詳しく見ていきます。



はじめに



すべては、カスタムレイヤー（レイヤー）を組み合わせたステージで始まります。

各レイヤー（レイヤー）はページ上の1つのキャンバス要素であり、図形、図形のグループ、またはグループのグループを含めることができます。



各要素は様式化および変換できます。



ステージとレイヤーを構成し、シェイプを追加したら、イベントをサブスクライブし、要素のプロパティを変更し、アニメーションを開始し、フィルターを作成できます。



最小コード例[結果] ： 



//    var stage = new Konva.Stage({ container: 'container', //  div  width: 500, height: 500 }); //    var layer = new Konva.Layer(); //   var circle = new Konva.Circle({ x: stage.width() / 2, y: stage.height() / 2, radius: 70, fill: 'red', stroke: 'black', strokeWidth: 4 }); //     layer.add(circle); //   stage.add(layer);








ベース形状



Konva.jsは、長方形（長方形）、円（円）、楕円（楕円）、線（線）、画像（画像）、テキスト（テキスト）、テキストパス（TextPath）、星（星）、ラベル（ラベル）、svgパス（パス）、正多角形（RegularPolygon）。 独自の形状を作成することもできます ： 



 var triangle = new Konva.Shape({ drawFunc: function(context) { context.beginPath(); context.moveTo(20, 50); context.lineTo(220, 80); context.quadraticCurveTo(150, 100, 260, 170); context.closePath(); //   KonvaJS context.fillStrokeShape(this); }, fill: '#00D2FF', stroke: 'black', strokeWidth: 4 });








スタイル



各図形は、次のスタイルプロパティをサポートしています。 





 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 });




結果：







イベント



Konva.jsを使用すると、入力イベント（クリック、dblclick、マウスオーバー、タップ、dbltap、touchstartなど）、属性変更イベント（scaleXChange、fillChange）、およびドラッグアンドドロップイベント（dragstart、dragmove、dragend）を簡単にサブスクライブできます。 。 



 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'); });




作業コード+デモ



ドラッグアンドドロップ



フレームワークには組み込みのドラッグサポートがあります。 現時点では、ドロップイベント（ドロップ、dragenter、dragleave、dragover）はサポートされていませんが、フレームワークを使用して非常に簡単に実装できます。



要素をドラッグするには、プロパティdraggable = trueを設定するだけです。 



 shape.draggable('true');




同時に、ドラッグアンドドロップイベントにサブスクライブして、移動の制限を設定できます。 [デモ] 。



フィルター



Konva.jsには、ぼかし、反転、セピア、ノイズなどの多くのフィルターが含まれています。 利用可能なフィルターの完全なリストは、 フィルタードキュメンテーションAPIにあります 。



フィルターの使用例： 



 image.cache(); image.filters([Konva.Filters.Invert]);






アニメーション



アニメーションを作成するには2つの方法があります。



1.オブジェクト「アニメーション」を通じて： 



 var anim = new Konva.Animation(function(frame) { var time = frame.time, timeDiff = frame.timeDiff, frameRate = frame.frameRate; // update stuff }, layer); anim.start();


[デモ]



2. Tweenオブジェクトを介して： 



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


[デモ]



セレクター



大規模なアプリケーションを構築する場合、作成された要素の検索を使用すると非常に便利です。 Konva.jsでは、find（コレクションを返す）およびfindOne（コレクションの最初の要素を返す）メソッドを使用して、セレクターを使用してオブジェクトを検索できます。 



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




シリアライゼーションとデシリアライゼーション



作成されたすべてのオブジェクトをJSON形式で保存して、たとえばサーバーまたはローカルストレージに保存できます。 



 var json = stage.toJSON();


また、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');




性能



Konva.jsには、生産性を大幅に向上させる多くのツールがあります。



1.キャッシングにより、バッファリングされたキャンバスに要素を描画し、そこから描画できます。 これにより、テキストや影や輪郭のあるオブジェクトなどの複雑なオブジェクトのレンダリングパフォーマンスが大幅に向上します。 



 shape.cache();


[デモ]



2.レイヤーを操作します。 フレームワークはいくつかのキャンバス要素をサポートしているため、オブジェクトを任意に配布できます。 アプリケーションが、テキストといくつかの移動可能な図形を含む複雑な背景で構成されているとします。 背景とテキストを1つのレイヤーに転送し、図形を別のレイヤーに転送するのは論理的です。 この場合、図形の位置を更新するとき、背景レイヤーは再描画できません。



[デモ]



パフォーマンスに関するヒントの詳細なリストは、 http ： //konvajs.github.io/docs/performance/All_Performance_Tips.htmlから入手できます。



おわりに



GitHub： https : //github.com/konvajs/konva

ホームページ： http : //konvajs.github.io/

例付きのドキュメント： http : //konvajs.github.io/docs/

完全なAPI： http : //konvajs.github.io/api/Konva.html



このプロジェクトは、著者によってサポートされなくなった有名なKineticJSライブラリのフォークです。

KineticJSの最新の公式バージョンからの変更点のリストは、 ここにあります 。


More articles:


All Articles