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来表示单个canvas DOM元素，请注意，但这不是您所描述的场景。您需要的是一个自定义视图类，它可以表示您的画布内对象并处理它们的事件。

Answer 2

我也正在使用Canvas上的Backbone.js进行纸牌游戏并遇到了这个问题。我目前正在做的是CardView有el作为画布标记，以便在初始化时创建画布。卡的所有绘图都是在此视图的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的画布来循环浏览它的视图。

Answer 3

我迟到了这个派对，但是IMO既没有观点也没有模特/收藏品不适合存在这种逻辑。

如果您正在使用结构或其他库（我有一个使用raphael.js的应用程序），您应该创建一个定制模块来处理绘图/操作并使用本地事件处理响应画布事件（即。{ {3}}）。

如果您需要传达这些事件，您应该以编程方式公开它们并使用骨干事件将它们发布到其他骨干组件。

您不应该以上面建议的方式将模型和视图紧密耦合。

Answer 4

我自己刚开始使用backbone.js，但我可能会创建一个骨干视图（比如canvasView）来渲染和监听画布上的事件。可以将click事件分派给视图对象上的方法，并在该方法中执行对象匹配算法和其他逻辑。

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

4 个答案: