Wie bindet man ein Backbone.js-Klickereignis an eine in einem HTML5-Canvas gerenderte Ansicht?

Question

Ich fange gerade erst an mit Backbone.js aber es sieht wirklich interessant aus...

Im Moment bin ich dabei, ein früheres Projekt zu überarbeiten, das verschiedene Objekte (2-3 verschiedene Modelltypen) in eine einzige HTML5-Leinwand zeichnet.

Jedes Objekt ist anklickbar. Es gibt einen Event-Handler für die Leinwand, der den Ort des Klicks (lokal für das Leinwand-Objekt) ermittelt und dann die Objekte nach einem Treffer durchsucht, der einen Treffer erzeugen könnte.

Gibt es eine bestimmte Art und Weise oder Best Practice, die ich verwenden sollte, wenn dies für ein Klick-Ereignis auf eine Backbone.js-Ansicht tun?

Danke!

Aktualisierung: gefunden fabric.js das die Idee von Objekten innerhalb eines Canvas-Elements zu behandeln scheint, aber nicht das MVC-Stil-Framework wie backbone.js bietet.

Außerdem habe ich einen Blick auf knockout.js . Es scheint noch stärker an HTML-Elemente (nicht an Canvas) gebunden zu sein als backbone.js.

Answer 1

Ich bin auf diese Frage gestoßen, weil ich an einem Backbone-basierten Framework für die Arbeit mit Canvas arbeite, also habe ich mich selbst damit auseinandergesetzt. Die Antwort, die ich schließlich fand, war: Vergessen Sie die Verwendung von Backbone.View mit Canvas. Wenn es nicht durch ein DOM-Element dargestellt werden kann, macht es keinen Sinn, Backbone.View dafür zu verwenden; seine Eigenschaften lassen sich nicht auf Canvas-"Elemente" abbilden.

Sie könnten Backbone.View verwenden, um eine einzelne canvas DOM-Element wohlgemerkt, aber das ist nicht das Szenario, das Sie beschreiben. Was Sie brauchen, ist eine benutzerdefinierte Ansichtsklasse, die Ihre In-Canvas-Objekte darstellen und ihre Ereignisse behandeln kann.

Answer 2

Ich arbeite auch an einem Kartenspiel mit Backbone.js auf Canvas und stieß auf diese Frage. Was ich derzeit mache, ist eine CardView Das hat el als Canvas-Tag, so dass bei der Initialisierung eine Leinwand erstellt wird. Das gesamte Zeichnen der Karte erfolgt auf der Ansicht render Methode. Diese Leinwand wird jedoch nicht in die DOM .

Ich habe dann eine Hand die ein Backbone.Collection um eine Sammlung von Karten zu halten. Diese Sammlung hat eine Backbone.View auf der Spielleinwand (der einzigen und großen Leinwand im DOM ). Diese Ansicht enthält auch ein Array von Backbone.View 's. Dann habe ich:

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();
},

Grundsätzlich zeichne ich den Canvas jeder Ansicht in den Spiel-Canvas mit drawImage des Kontextes.

I addEventListener a HandView Canvas (das ist seine el ), um Klick zu behandeln. In diesem Handler prüfe ich die Mauspositionen, gegen die CardView und bearbeiten Sie dann diese Ansicht.

Allerdings ist das nur etwas, das ich ausprobiere, denn ich bin neu in der Backbone.js zu. Das ist vielleicht der schlechteste Weg, aber ich hoffe, dass Sie eine der Möglichkeiten sehen können, es zu tun.

Ich wünschte, wir könnten die Maus gegen eine Leinwand prüfen, die nicht im DOM vorhanden ist. Wenn das möglich ist, könnten wir einfach addEventListener a CardView Canvas und lassen Sie es übersetzen und neu rendern. Keine Notwendigkeit für HandView Canvas, um seine Ansichten in einer Schleife zu durchlaufen.

Answer 3

Ich bin zwar spät dran, aber IMO sind weder Ansichten noch Modelle/Sammlungen der richtige Ort, um diese Art von Logik unterzubringen.

Wenn Sie Fabric oder eine andere Bibliothek verwenden (ich habe eine Anwendung, die raphael.js verwendet), sollten Sie ein maßgeschneidertes Modul erstellen, das die Zeichnung/Manipulation handhabt und auf Canvas-Ereignisse mit lokaler Ereignisbehandlung reagiert (d.h.. https://github.com/kangax/fabric.js/wiki/Working-with-events ).

Wenn Sie diese Ereignisse nach außen kommunizieren müssen, sollten Sie sie programmatisch darstellen und Backbone-Ereignisse verwenden, um sie an andere Backbone-Komponenten zu veröffentlichen.

Sie sollten Ihre Modelle und Ansichten nicht auf die oben vorgeschlagene Weise eng miteinander koppeln.

Answer 4

Ich fange gerade erst mit backbone.js an, aber ich würde wahrscheinlich eine Backbone-Ansicht (sagen wir canvasView) erstellen, die gerendert wird und auf die Ereignisse auf der Leinwand hört. Das Klick-Ereignis kann an eine Methode auf die Ansichtsobjekte gesendet werden und in dieser Methode tun Sie Ihre Objekt-Matching-Algorithmus und andere Logik.