Farklı dikdörtgenler bir tuval üzerinde boyanmış bir uygulama yapıyorum ve ben Omurga ile yapmak çalışıyorum bir tuval

Question

nesneleri çizmek için bir backbone.js görünümü yapma. Ben manken denilen kutu var:

Box = Backbone.Model.extend({ 
     defaults: { 
      x: 0, 
      y: 0, 
      w: 1, 
      h: 1, 
      color: "#FF9000", 
      linewidth: 3, 
      id: 0, 
     }, 

     drawBox: function(ctx) { 
      ctx.fillStyle = "#FF9000"; 
      ctx.globalAlpha = 0.1; 
      ctx.fillRect(this.get("x"), this.get("y"), this.get("w"), this.get("h")); //transparent box in the back 
      ctx.globalAlpha = 1; 
      ctx.strokeStyle = this.get("color"); 
      ctx.lineWidth = this.get("linewidth"); 
      ctx.strokeRect(this.get("x"), this.get("y"), this.get("w"), this.get("h")); //rectangle on top  
     } 
    }); 

Ve ayrıca bu Kutusu modelinin bir koleksiyona sahip:

BoxSet = Backbone.Collection.extend({ 
     model: Box   
    }); 

Ne aklımda var ben her Kutu modeli koyabilirsiniz bir görünüme sahip olmaktır Box modelindeki drawBox yöntemini kullanarak bir kutudaki BoxSet koleksiyonu, ancak şu ana kadar tüm dersler ve örnekler basit metin şablonlarıyla ilgilenir ve bunun nasıl düzeltileceğini anlayamıyorum.

bu Backbone görünümleri kullanılarak yapılabilir konusunda herhangi bir fikir?

Şimdiden teşekkürler.

Answer 1

Ben Omurga tarafından sunulan model ve görüş ayrılığı takip edecek.

var Box = Backbone.Model.extend({ 
    defaults: { 
     x: 0, 
     y: 0, 
     w: 1, 
     h: 1, 
     color: "#FF9000", 
     linewidth: 3 
     // don't define a default id, that leads to strange behaviors 
    } 
}); 

var BoxSet = Backbone.Collection.extend({ 
    model:Box 
}); 

Ve tuval üzerine farklı parçalarını işlemek için görünümlerini tanımlamak: veri depoları gibi modeller tutun nihayet

var BoxView = Backbone.View.extend({ 
    render: function() { 
     var model = this.model, ctx = this.options.ctx; 

     ctx.fillStyle = "#FF9000"; 
     ctx.globalAlpha = 0.1; 
     ctx.fillRect(
      model.get("x"), model.get("y"), 
      model.get("w"), model.get("h") 
     ); 

     ctx.globalAlpha = 1; 
     ctx.strokeStyle = model.get("color"); 
     ctx.lineWidth = model.get("linewidth"); 
     ctx.strokeRect(
      model.get("x"), model.get("y"), 
      model.get("w"), model.get("h") 
     ); 
    } 
}); 

var SetView= Backbone.View.extend({ 
    initialize: function() { 
     this.listenTo(this.collection, "all", this.render); 
    }, 

    render: function() { 
     var canvas = this.el, ctx = canvas.getContext("2d"); 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 

     this.collection.each(function(model) { 
      var view = new BoxView({ctx: ctx, model: model}); 
      view.render(); 
     }) 
    } 
}); 

Ve örneğini ve oluştur:

var c = new BoxSet(); 
c.add({x: 150, y: 150, w: 100, h: 100}); 
c.add({x: 10, y: 10, w: 100, h: 100}); 

var v = new SetView({ 
    el: $("canvas"), 
    collection : c 
}); 
v.render(); 

Turp için bu iki güzel kareler görüntülemek http://jsfiddle.net/JB9yg/

başka bir yerde t bir değişiklik o toplama Bu örnek muhtemelen daha temiz manipülasyonlar sağlamak üzerine inşa edilebilir http://jsfiddle.net/JB9yg/1/

-render yeniden yol açar, ama bu başlangıç ​​almalısınız.

Answer 2

Ayrıca Backbone'un tuval desteği eklemek için Backbone.KineticView eklenti kullanmak deneyebilirsiniz. KineticJS aracılığıyla çalışır, bu nedenle de tuval düğümleri için tüm olay temsilci gücünü kullanabilir.

Örnek:

var MyView = Backbone.KineticView.extend({ 
    // build Kineticjs object, then return it. 
    el : function(){ 
    var rect = new Kinetic.Rect({ 
     x : 100, 
     y : 100, 
     width : 50, 
     height : 50, 
     fill : 'green', 
     id : 'rect' 
    }); 
    var circle = new Kinetic.Circle({ 
     x : 200, 
     y : 100, 
     radius : 50, 
     fill : 'red', 
     name : 'circle' 
    }); 
    var group = new Kinetic.Group(); 
    group.add(rect).add(circle); 
    return group; 
    }, 
    // setup events 
    events : { 
    'click #rect' : function(){ 
     console.log("on rectangle clicked"); 
    }, 
    'mouseover .circle' : 'onMouseOverCircle' 
    }, 
    onMouseOverCircle : function(){ 
    console.log('Mouse is over circle'); 
    }, 
    render : function(){ 
    // this.$el - cached kineticjs object. 
    this.options.layer.add(this.$el); 
    layer.draw(); 
    } 
}); 

var stage = new Kinetic.Stage({ 
    container : 'container', 
    width : 300, 
    height : 300 
}); 
var layer = new Kinetic.Layer(); 
stage.add(layer); 

view = new MyView({layer:layer}); 
view.render();