Display Image with Backbone + KineticJS

Question

I'm trying to load an image on canvas using Backbone + KineticJS. However the image doesn't seem to appear.

First I load the images using a model. (I'm loading the image locally so its already available)

var KineticModel = Backbone.Model.extend({
    myImg: null,
    createImg : function() {
            var imageObj = new Image();
            var kinImg = new Kinetic.Image()

            imageObj.onload = function() {
                kinImg.setAttrs({
                    x: 10,
                    y: 10,
                    image: imageObj, 
                    width: 578,
                    height: 400
                })
            }
            imageObj.src = 'test/img/vader.png';
            return kinImg;
        }
    });

Then create the View

var KineticView = Backbone.View.extend({
    id: 'container',
    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: 600, height: 600 });
        this.stage.add(this.layer);
    },
    render: function () {
        var myImg = this.model.createImg();
        this.layer.add(myImg);
        this.stage.add(this.layer);
        this.stage.draw();

    }
    });

Finally to tie it all up

var KModel= new KineticModel({});
    var imgcontainer = $('#container').get();
    view = new KineticView({model:KModel, el:imgcontainer});
    view.render();

The page loads without any errors, but no image. Console logs show that the Image Models have been passed to the layers.

Any help will be greatly appreciated!

Answer 1

Redraw layer after setting attrs:

kinImg.setAttrs({
    x: 10,
    y: 10,
    image: imageObj, 
    width: 578,
    height: 400
});
yourLayer.draw();

Note: you are working with view (Kinetic object) inside Backbone.Model - this is bad approach. Model should works only with data. Move createImg function to View.

Also look at this plugin: https://github.com/slash-system/backbone.kineticview