kinetic.jsとbackbone.jsを組み合わせることは可能ですか？

Question

私は単に画面上に長方形を置くアプリケーションをコーディングしたいと思います。しかし、私はこれにkinetic.jsとbackbone.jsを組み合わせる必要があります。 キネティック・コードは次のとおりです。

document.getElementById('rect').addEventListener('click', function() { 
    rect = new Kinetic.Rect({ 
    x: 239, 
    y: 75, 
    width: 100, 
    height: 50, 
    fill: 'green', 
    stroke: 'black', 
    strokeWidth: 4, 
    offset: [50,25], 
    draggable: true, 
    }); 

とバックボーンコード

$(function() { 
var Shape = Backbone.Model.extend({ 
defaults: { x:50, y:50, width:150, height:150, color:'gray' }, 
setTopLeft: function(x,y) { this.set({ x:x, y:y }); }, 
setDim: function(w,h) { this.set({ width:w, height:h }); }, 
isCircle: function() { return !!this.get('circle'); } 
}); 

*私は、これらのパス

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.3.min.js"></script> 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js"></script> 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script> 

の.htmlファイルを追加した私は、バックボーンに代わり、デフォルト値の運動部分を配置したいすべての。出来ますか？

Answer 1

はいこれは間違いありません。私はあなたの形状で使用するデータを格納するモデルを作成するだけで、スパンタグをクリックしてレンダリングするビューを使用し、スパンにイベントリスナーをアタッチし、ユーザーがクリックしたときに矩形を出力します。

var ShapeModel = Backbone.Model.extend({}); 
    var rectangle = new ShapeModel({ 
     x: 10, 
     y: 10, 
     width: 100, 
     height: 50, 
     fill: 'green', 
     stroke: 'black', 
     strokeWidth: 4, 
     offset: [0, 0], 
     draggable: true, 
    }); 
    var RectangleView = Backbone.View.extend({ 
     tagName: 'span', 
     initialize: function (options) { 
      model: options.model; 
      el: options.el; 
     }, 
     events: { 
      'click': 'spanClicked' 
     }, 
     render: function() { 
      this.$el.text('click me'); 
     }, 
     spanClicked: function() { 
      var stage = new Kinetic.Stage({ 
       container: this.el, 
       width: 200, 
       height: 200      
      }); 
      var layer = new Kinetic.Layer(); 
      var rect = new Kinetic.Rect(this.model.toJSON()); 
      layer.add(rect); 
      stage.add(layer); 
     } 
    }); 
    var rectangleView = new RectangleView({ el: '#shapetest', model: rectangle }); 
    rectangleView.render(); 

バックボーンとアンダースコアの最新バージョンにもアップグレードします。

また、Kineticを指摘してくれてありがとう。うまくいけば、それはモバイルデバイス上のキャンバス上での描画をサポートしています。

Answer 2

私たちはあなたの助けを借りて、kinetic.jsとbackbone.jsの両方を使用して画面に四角形を描くこの作業例を書いています。私は、この種の統合コードを探している人にとっては便利だと思います。 ご協力いただきありがとうございます！

var KineticModel = Backbone.Model.extend({ 
    myRect: null, 

    createRect : function() { 
      alert("rectangle created."); 
      var rect=new Kinetic.Rect({ 
          x: 10, 
          y: 10, 
          width: 100, 
          height: 50, 
          fill: 'green', 
          stroke: 'black', 
          strokeWidth: 1, 
          offset: [0, 0], 
          draggable: true, 
         }); 
      return rect; 
     } 
}); 

var KineticView = Backbone.View.extend({ 
     tagName: 'span', 
     stage: null, 
     layer: null, 

     initialize: function (options) { 
      model: options.model; 
      el: options.el; 
      this.layer = new Kinetic.Layer(); 
      this.stage = new Kinetic.Stage({ container: this.el, width: 400, height: 400 }); 
      this.stage.add(this.layer); 
     }, 
     events: { 
      'click': 'spanClicked' 
     }, 
     render: function() { 
      var rect = this.model.createRect(); 
      this.layer.add(rect); 
      this.stage.add(this.layer); 
      alert("render"); 
     }, 
     spanClicked: function() { 

     } 
}); 

    var kModel = new KineticModel({}); 
    var kView = new KineticView({ el: '#container', model: kModel }); 

    $('#shapetest').click(function() { 
     kView.render(); 
    });