如何將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畫布內呈現的視圖？

回答

相關問題