可以結合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'); } 
}); 

*我加.html文件這些路徑

<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> 

所有我想在骨幹放置動能一部分，而不是默認值。可能嗎？

Answer 1

是的，這是絕對有可能的。我只是創建一個模型，用於存儲將在形狀中使用的數據，使用視圖通過單擊我來呈現span標記，將事件偵聽器附加到該跨度，然後在用戶單擊時輸出矩形。

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

我也會升級到最新版本的Backbone和Underscore。

另外，感謝您指出動力學。希望它支持在移動設備上繪製畫布。

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