2013-03-16 16 views
5

Chcę zakodować aplikację, która po prostu umieszcza prostokąt na ekranie. Ale muszę połączyć kinetic.js i backbone.js i nie jestem pewien, czy można to zrobić. kod Kinetic jest:Czy można połączyć kinetic.js i 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, 
    }); 

A kręgosłup kod

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

* Dodałem plik .html te ścieżki

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

wszystkim chcę umieścić część kinetycznej zamiast wartości domyślnych w szkielecie . Czy to możliwe?

Odpowiedz

4

Tak, to zdecydowanie możliwe. Chciałbym po prostu utworzyć model, który przechowuje dane, które będą używane w kształcie, użyj widoku, aby renderować znacznik zakresu z kliknięciem, dołączyć detektor zdarzeń do zakresu, a następnie wypisać prostokąt, gdy użytkownik kliknie.

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

Chciałbym również uaktualnić do najnowszej wersji szkieletu i podkreślenia.

Dziękuję również za wskazanie Kinetic. Mam nadzieję, że obsługuje on rysowanie na płótnie na urządzeniu mobilnym.

+0

Wygląda mi to bardziej jak * dwa * Widoki: kontroler z obsługą zdarzeń dla przycisku i prosty renderer dla prostokąta. –

+0

Być może na pewno. Ale przykład był oparty na tym, co kod pokazał w pierwszej części pytania. document.getElementById i zdarzenie click. Tak więc zdefiniowano to jako działający przykład. – Kalpers

6

Z twoją pomocą napisaliśmy ten przykład pracy, który umieszcza prostokąt na ekranie przy użyciu zarówno kinetic.js, jak i backbone.js. Szkoda, że ​​nie byłoby przydatne dla tych, którzy szukają tego rodzaju zintegrowanego kodu. Bardzo dziękuję za pomoc!

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