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

Question

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

现在，我正在重做以前的项目将各种对象（2-3 种不同的模型类型）绘制到单个 HTML5 画布中。

每个对象都是可点击的。画布有一个事件处理程序，用于获取单击的位置（画布对象的本地位置），然后在对象中搜索可能产生点击的对象。

在对 Backbone.js 视图上的单击事件执行此操作时，是否应该使用特定的方法或最佳实践？

谢谢！

更新：发现fabric.js它似乎处理画布元素中的对象的想法，但不提供像backbone.js这样的MVC风格框架。

另外，我还查看了 knockout.js。它似乎比backbone.js 更依赖于HTML 元素（而不是canvas）。

Answer 1

我遇到这个问题是因为我正在开发一个基于 Backbone 的画布框架，所以我自己解决了这个问题。我最终得出的答案是：忘记在画布上使用 Backbone.View。如果它不能用 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

我参加这个聚会迟到了，但在我看来，视图和模型/集合都不是容纳这种逻辑的地方。

如果您使用的是 Fabric 或其他一些库（我有一个使用 raphael.js 的应用程序），您应该创建一个定制模块来处理绘图/操作并使用本地事件处理响应画布事件（即 https://github.com/kangax/fabric.js/wiki/Working-with-events ）。

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

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

Answer 4

我自己刚刚开始使用backbone.js，但我可能会制作一个主干视图（例如canvasView）来渲染和侦听画布上的事件。单击事件可以分派到视图对象上的方法，并在该方法中执行对象匹配算法和其他逻辑。