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

我刚开始接触Backbone.js，但它看起来真的很有趣...如何将Backbone.js单击事件绑定到HTML5画布内呈现的视图？

现在，我重做以前的项目，吸引了各种对象（2-3不同的模型类型）到一个单一的HTML5画布。

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

当Backbone.js视图上的点击事件发生时，我应该使用特定的方式还是最佳做法？

谢谢！

更新：找到fabric.js似乎处理canvas元素内的对象的想法，但不提供MVC风格的框架作为backbone.js。我看了一下knockout.js。它看起来更像绑定到HTML元素（而不是画布）比backbone.js。

2011-04-15 Chris Butler

我遇到了这个问题，因为我正在研究一个基于Backbone的框架来处理画布，所以我自己也在努力解决这个问题。我最终得出的答案是：忘记使用Backbone.View与画布。如果它不能用DOM元素表示，那么使用Backbone.View对它没有意义;它的属性不会映射到画布“元素”。

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

来源

2011-05-22 21:52:54

这就是我开始学习的结论。所以基本上我需要将所有命中测试和画布绘制代码放在Backbone.Model中？或者你认为扩展Backbone.View以获得画布引用而不是'el'引用是有意义的吗？ – 2011-05-30 20:53:31

我不会扩展'Backbone.View'，但我会问：从我的模型类中分离出我的视图类是否有好处？换句话说，是否有不止一种方法来绘制特定的模型，或者有多种类型的模型可以使用相同的画布代码？如果是这样，那么使用'Backbone.Model'和你自己的'CanvasView'类;如果没有，只要让每个'Backbone.Model'子类都包含自己的画布代码就会更简单，正确的MVC就会被诅咒。 – 2011-05-30 23:22:45

刚开始使用backbone.js我自己，但我可能会做一个骨干视图（比如说canvasView）来呈现和监听画布上的事件。点击事件可以分派给视图对象上的一个方法，并且在那个方法中你执行对象匹配算法和其他逻辑。

来源

2011-04-24 10:08:08

我这样做了，但出于某种原因，我无法触发画布内的模型对象的事件。但是，我可以直接通过视图对象来访问该方法。 – 2011-05-04 18:11:37

也许这是一个画布+主干问题？我对处理HTML5画布并不熟悉，但如果结构在画布上监听事件，则应该能够使用结构通过直通功能将画布事件转换为主干事件，不是吗？ – 2011-05-06 22:02:03

我也在使用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）来处理点击。在这个处理程序中，我检查对应的鼠标位置，然后操纵该视图。

你要知道，这仅仅是什么我尝试，因为我是新来的太Backbone.js。这可能是最糟糕的方式，但我希望你能看到其中的一种方法。

我希望我们能检查鼠标对不存在于DOM的画布。如果可能的话，我们只需addEventListener至CardView的画布，然后让它翻译并重新渲染。不需要HandView的画布循环显示其视图。

来源

2011-10-02 06:35:56 sntran

，我迟到了这个晚会，但IMO没有意见，也不型号/集不能容纳这种逻辑的地方。

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

如果您需要将这些事件传达出你应该编程揭露它们，并使用骨干事件，将其发布到其他骨干组成。

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

来源

2012-07-17 08:54:53 Lee

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

回答

相关问题