Geek asks and answers

Can kinetic.js and backbone.js be combined?

I want to encode an application that just puts a rectangle on the screen. But I need to combine kinetic.js and backbone.js for this, and I'm not sure if this can be done. Kinetic code:

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

And the base code

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

* I added a .html file of these paths

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

All I want to do is put the kinetic part instead of the default values ​​in the trunk. Is it possible?

+5
source share
2 answers

Yes, it is definitely possible. I would just create a model that stores the data that you will use in your form, use the view to render the span tag with a click of me, attach an event listener to the range and then draw a rectangle when the user clicks.

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.

, . , .

+4

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

More articles:


All Articles