如何将Backbone.js单击事件绑定到HTML5画布内呈现的视图？

Question

我刚刚开始使用Backbone.js,但它看起来很有趣......

现在,我正在重做一个先前的项目,该项目将各种对象(2-3种不同的模型类型)绘制到单个HTML5画布中.

每个对象都是可点击的.画布的事件处理程序获取单击的位置(画布对象的本地),然后在对象中搜索可能产生命中的对象.

在Backbone.js视图上为click事件执行此操作时,是否应该使用特定方法或最佳实践？

谢谢!

更新:发现fabric.js似乎处理canvas元素中对象的想法,但没有提供MVC样式框架作为backbone.js.

另外,我看了一下knockout.js.它似乎甚至比backbone.js更依赖于HTML元素(而不是canvas).

Answer 1

我遇到了这个问题,因为我正在使用基于Backbone的框架来处理canvas,所以我自己也在努力解决这个问题.我最终得到的答案是:忘记使用Backbone.View和canvas.如果它不能用DOM元素表示,那么使用Backbone.View是没有意义的; 它的属性只是不映射到画布"元素".

您可以使用Backbone.View来表示单个canvasDOM元素,请注意,但这不是您所描述的场景.您需要的是一个自定义视图类,它可以表示您的画布内对象并处理它们的事件.

Answer 2

我也正在使用Backbone.jsCanvas 进行纸牌游戏并遇到了这个问题.我目前正在做的是将CardView其el作为canvas标签,以便在初始化时创建画布.卡的所有绘图都是在此视图的render方法上完成的.但是,此画布不会添加到DOM.

然后我有一个Hand,这是一个Backbone.Collection持有卡集合.这个系列Backbone.View附有游戏画布(唯一和大的画布DOM).这个视图还包含一个数组Backbone.View.然后我有:

render: function() {
    var that = this;
    this.ctx.save();
    _(this._views).each(function(view) {
        that.ctx.drawImage(view.render().el, 0, 0);
        that.ctx.translate(view.el.width, 0);
    });
    this.ctx.restore();
},

基本上,我使用drawImage上下文将每个视图的画布绘制到游戏画布中.

我addEventListener要HandView画布(这是它的el)处理点击.在这个处理程序中,我检查鼠标位置CardView,然后操纵该视图.

请注意,这是我正在尝试的东西,因为我Backbone.js也是新手.这可能是最糟糕的方式,但我希望你能看到其中一种方法.

我希望我们能够针对DOM中不存在的画布检查鼠标.如果可能的话,我们可以只addEventListener对CardView"帆布,让它翻译和重新渲染.不需要HandView画布来浏览它的视图.