Question

我尝试使用Backbone + KineticJS在画布上加载图像。然而，图像似乎没有出现。

首先我使用模型加载图像。（我在本地加载图像，因此它已经可用）

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

然后创建视图

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

    }
    });

最后把它全部绑起来

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

页面加载时没有任何错误，但没有图像。控制台日志显示图像模型已传递到图层。

任何帮助将不胜感激！

Answer 1

设置attrs后重绘图层：

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

注意：您正在使用Backbone.Model内的view（Kinetic对象） - 这是不好的方法。模型应该只适用于数据。将createImg功能移至View。

另请参阅此插件：https://github.com/slash-system/backbone.kineticview

使用Backbone + KineticJS显示图像

1 个答案: