Is it possible to combine kinetic.js and backbone.js?

Question

I want to code an app that simply puts a rectangle on the screen. But I need to combine kinetic.js and backbone.js for this and i am not sure it can be done. Kinetic code is:

 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 backbone 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 .html file 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 place kinetic part instead of default values in backbone. Is it possible?

Amerce

Answer 1

Yes this is definitely possible. I would just create a model that stores the data that you will be using in your shape, use a view to render a span tag with click me, attach an event listener to the span and then output the 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();

I would upgrade to the latest version of Backbone and Underscore too.

Also, thanks for pointing out Kinetic. Hopefully it has support for drawing on the canvas on a mobile device.

Hog

This looks to me more like two Views: a controller with an event handler for the button, and a simple renderer for the rectangle. – Celebration

Could definitely be. But the example was based on what the code showed in the first section of the question. document.getElementById and the click event. So this is what was defined as the working example. – Hog

Answer 2

With your help, we wrote this example of work which puts a rectangle on the screen using both kinetic.js and backbone.js. I wish it would be useful for who is looking for this kind of integrated code. Thanks a lot for your help!

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

Berkshire