可以结合kinetic.js和backbone.js吗？

问题描述：

我想编写一个简单地在屏幕上放置一个矩形的应用程序。但我需要将kinetic.js和backbone.js结合起来，我不确定它可以完成。动力学代码：可以结合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>

所有我想在骨干放置动能一部分，而不是默认值。可能吗？

答

是的，这是绝对有可能的。我只是创建一个模型，用于存储将在形状中使用的数据，使用视图通过单击我来呈现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。

另外，感谢您指出动力学。希望它支持在移动设备上绘制画布。

这在我看来更像* two * Views：一个控制器，它有一个按钮的事件处理程序和一个矩形的简单渲染器。 – 2013-03-17 05:53:26

绝对可以。但是这个例子是基于代码在问题的第一部分中显示的内容。 document.getElementById和click事件。所以这就是所谓的工作例子。 – Kalpers 2013-03-18 15:08:39

答

在您的帮助下，我们编写了这个使用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(); 
    });

可以结合kinetic.js和backbone.js吗？

相关推荐