HTML5キャンバスで作業するときにBackbone.jsを使用する

1.タスクの説明

大規模なマインドマップアプリケーションを開発する場合、アプリケーションを構築するためのメインライブラリとしてBackboneを選択しました。 この場合、マインドマップは、さまざまなプリミティブを使用してキャンバス要素を通じて描画されます。 キャンバス上のオブジェクトのイベントの処理を完全にサポートしているため、キャンバスの処理にKineticJSライブラリを選択しました。



Backboneアーキテクチャに準拠するため、キャンバス（より正確には、KineticJSオブジェクトのインスタンス）でのすべての作業は、Backbone.Viewのインスタンスで行われました。

var Node = Backbone.View.extend({ initialize : function(params) { this.layer = params.layer; this.node = this.el(); this.bindEvents(); }, el : function(){ var rect = new Kinetic.Rect({ x : 100, y : 100, width : 50, height : 50, fill : 'green', id : 'rect' }); return rect; }, bindEvents: function() { this.node.on('click', function(){ console.log("on rectangle clicked"); } // etc ... } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2.問題

しかし、Backbone ViewはDOM要素で動作するように設計されており、このアプローチでは、必要なdivオブジェクトを生成せず、宣言スタイル（ http://backbonejs.org/#View-delegateEvents ）でイベントを宣言することもできませんでした。

3.決定。

Backbone.KineticViewプラグインが作成されました。これにより、通常のBackbone.ViewがDOMで動作するのと同じスタイルで（KineticJSを介して）キャンバス上のオブジェクトを操作できます。



コードの外観の例：

  var MyView = Backbone.KineticView.extend({ initialize : function(params) { this.layer = params.layer; }, nodeType : 'Rect', attributes : { x : 100, y : 100, width : 50, height : 50, fill : 'green', id : 'rect' }, // setup events events : { 'click' : function(){ console.log("on rectangle clicked"); } } render : function(){ this.layer.add(this.el); this.layer.draw(); } }); view = new MyView({layer:layer}); view.render();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このプラグインは、Backbone.Viewの機能をほぼ完全に繰り返しますが、KineticJSオブジェクト専用です。 類推により、Backbone.Viewのテストが適応されました。



少し複雑な実例はこちらにあります： http : //jsbin.com/fekex/4/edit

プラグインコード： https : //github.com/slash-system/backbone.kineticview



Easeljs 、 FabricJSなど、同様のキャンバスライブラリに対して、おそらく同様のソリューションを簡単に構築できます。 誰かがすでにこの問題を解決しましたか？