制作Backbone.js视图以在画布上绘制对象

Question

我正在制作一个应用程序,在画布上绘制不同的矩形,我正在尝试使用Backbone.我有一个名为box的模型:

    Box = Backbone.Model.extend({
        defaults: {
            x: 0,
            y: 0,
            w: 1,
            h: 1,
            color: "#FF9000",
            linewidth: 3,
            id: 0,
        },

        drawBox: function(ctx) {
            ctx.fillStyle = "#FF9000";
            ctx.globalAlpha = 0.1;
            ctx.fillRect(this.get("x"), this.get("y"), this.get("w"), this.get("h")); //transparent box in the back
            ctx.globalAlpha = 1;
            ctx.strokeStyle = this.get("color");
            ctx.lineWidth = this.get("linewidth");
            ctx.strokeRect(this.get("x"), this.get("y"), this.get("w"), this.get("h")); //rectangle on top      
        }
    });

我还有一个这个Box模型的集合:

    BoxSet = Backbone.Collection.extend({
        model: Box          
    });

我想到的是有一个视图,我可以使用Box模型中的drawBox方法将每个Box模型放在画布上的BoxSet集合中,但到目前为止所有的教程和示例都处理简单的文本模板,我无法想象如何完成这个.

关于如何使用Backbone视图完成任何想法？

提前致谢.

Answer 1

我会跟随Backbone提供的模型和视图的分离.将模型保存为数据存储库:

var Box = Backbone.Model.extend({
    defaults: {
        x: 0,
        y: 0,
        w: 1,
        h: 1,
        color: "#FF9000",
        linewidth: 3
        // don't define a default id, that leads to strange behaviors
    }
});

var BoxSet = Backbone.Collection.extend({
    model:Box
});

并定义视图以在画布上呈现不同的部分:

var BoxView = Backbone.View.extend({
    render: function() {
        var model = this.model, ctx = this.options.ctx;

        ctx.fillStyle = "#FF9000";
        ctx.globalAlpha = 0.1;
        ctx.fillRect(
            model.get("x"), model.get("y"),
            model.get("w"), model.get("h")
        ); 

        ctx.globalAlpha = 1;
        ctx.strokeStyle = model.get("color");
        ctx.lineWidth = model.get("linewidth");
        ctx.strokeRect(
            model.get("x"), model.get("y"), 
            model.get("w"), model.get("h")
        );
    }
});

var SetView= Backbone.View.extend({
    initialize: function() {
        this.listenTo(this.collection, "all", this.render);
    },

    render: function() {
        var canvas = this.el, ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        this.collection.each(function(model) {
            var view = new BoxView({ctx: ctx, model: model});
            view.render();
        })
    }
});

最后实例化并渲染:

var c = new BoxSet();
c.add({x: 150, y: 150, w: 100, h: 100});
c.add({x: 10, y: 10, w: 100, h: 100});

var v = new SetView({
    el: $("canvas"),
    collection : c
});
v.render();

一个小提琴来查看这两个漂亮的广场http://jsfiddle.net/JB9yg/

另一个更改集合导致重新渲染http://jsfiddle.net/JB9yg/1/

可以建立这个例子来提供更清晰的操作,但这应该让你开始.