Ich beginne gerade mit Backbone.js , aber es sieht wirklich interessant aus ...
Im Moment wiederhole ich ein vorheriges Projekt, das verschiedene Objekte (2-3 verschiedene Modelltypen) in ein einziges HTML5-Canvas zeichnet.
Jedes Objekt ist anklickbar. Es gibt einen Ereignishandler für den Canvas, der den Speicherort des Klicks (lokal für das Canvas-Objekt) ermittelt und dann die Objekte nach einem Objekt durchsucht, das einen Treffer erzeugen könnte.
Gibt es eine bestimmte Methode oder Best Practice, die ich für ein Klickereignis in einer Backbone.js-Ansicht verwenden sollte?
Danke!
Update: gefunden fabric.js , das mit der Idee von Objekten innerhalb von a canvas-Element, bietet jedoch nicht das MVC-Stil-Framework als backbone.js.
Außerdem habe ich mir knockout.js angesehen. Es scheint noch mehr an HTML-Elemente (nicht Canvas) gebunden zu sein als an backbone.js.
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 bekam, war: Vergessen Sie die Verwendung von Backbone.View mit Canvas. Wenn es nicht durch ein DOM-Element dargestellt werden kann, dann ist es nicht sinnvoll, Backbone.View dafür zu verwenden ; Seine Eigenschaften werden nicht nur Canvas-Elementen zugeordnet.
Sie könnten Backbone.View verwenden, um ein einzelnes canvas DOM-Element darzustellen, aber das ist nicht das Szenario, das Sie beschreiben. Was Sie benötigen, ist eine benutzerdefinierte Ansichtsklasse, die Ihre Objekte im Canvas darstellen und deren Ereignisse behandeln kann.
Ich arbeite auch an einem Kartenspiel mit Backbone.js auf Canvas und bin auf diese Frage gestoßen. Was ich gerade mache, ist ein CardView mit el als Canvas-Tag, damit bei der Initialisierung ein Canvas erstellt wird. Das Zeichnen der Karte erfolgt in der render -Methode dieser Ansicht. Diese Zeichenfläche wird jedoch nicht zum DOM hinzugefügt.
Ich habe dann ein Hand , was ein Backbone.Collection ist, um eine Sammlung von Karten zu halten. Diese Sammlung hat Backbone.View an den Spielbereich angehängt (der einzige und größte in DOM ). Diese Ansicht enthält auch ein Array von Backbone.View s. Dann habe ich:
Grundsätzlich zeichne ich die Leinwand jeder Ansicht mit drawImage des Kontextes in die Spielfläche.
I addEventListener to HandView 's Canvas (das ist el ), um den Klick zu verarbeiten. In diesem Handler überprüfe ich die Mauspositionen, für die CardView gilt, und manipuliere dann diese Ansicht.
Wohlgemerkt, ich experimentiere gerade damit, weil ich auch für Backbone.js neu bin. Dies ist vielleicht der schlechteste Weg, aber ich hoffe nur, dass du eine der Möglichkeiten sehen kannst, dies zu tun.
Ich wünschte, wir könnten die Maus gegen eine Leinwand prüfen, die im DOM nicht existiert. Wenn es möglich ist, könnten wir einfach addEventListener auf CardView 's Canvas setzen und es übersetzen und neu rendern lassen. Es ist nicht erforderlich, dass% canvas% s Canvas seine Ansichten durchläuft.
Ich bin zu spät zu dieser Party, aber IMO weder Ansichten noch Modelle / Sammlungen sind nicht der Ort, um diese Art von Logik aufzunehmen.
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 behandelt und auf Canvas-Ereignisse reagiert, indem lokale Ereignisse behandelt werden a href="https://github.com/kangax/fabric.js/wiki/Working-with-events"> Ссылка ).
Wenn Sie diese Ereignisse mitteilen müssen, sollten Sie sie programmatisch offenlegen und Backbone-Ereignisse verwenden, um sie in anderen Hauptkomponenten zu veröffentlichen.
Sie sollten Ihre Modelle und Ansichten nicht in der oben vorgeschlagenen Weise fest koppeln.
Ich beginne gerade mit backbone.js selbst, aber ich würde wahrscheinlich eine Backbone-Ansicht (z. B. canvasView) erstellen, die die Ereignisse auf der Leinwand rendert und überwacht. Das click-Ereignis kann an eine Methode für die View-Objekte gesendet werden, und in dieser Methode führen Sie Ihren Algorithmus für die Objektübereinstimmung und andere Logik durch.
Tags und Links html5 canvas backbone.js