Ich baue eine Web-App, die eine Leinwand zum Zeichnen verwendet. Ich hätte gerne einen unendlich großen Zeichenraum (Sie können beliebig lange blättern) UND die Daten / Bilder in einer Datenbank speichern.
Es wurde etwas Ähnliches wie hier gemacht: Ссылка , wo je mehr Leute es spielen, desto größer wird es.
Ich weiß, das würde erfordern, Bilder irgendwie zu kacheln, sie zu einer DB zu speichern, dann nur diejenigen im Ansichtsfenster zu lodging. Wie würde das und das unendliche Scrollen erreicht werden / wo soll ich anfangen?
Dies ist ein bisschen unkonventionell eine Methode, aber gerade fiel mir als potenziell (in der Theorie mit ungebundenem Speicherplatz) unendlich.
Sie müssen einen aktuell geladenen Teil des Boards als eindeutige ID speichern. Die Chunks und ihre Daten müssen in einer Tabelle mit folgenden Spalten stehen:
Sie müssen die Arbeitsfläche ziehbar machen, möglicherweise mithilfe von jQuery oder ähnlichem ( diese Frage ) hat einige Infos dazu).
Erstellen Sie jetzt einen Ereignis-Listener für die zu ziehende Leinwand und verfolgen Sie die Entfernung, die sie bewegt. Wenn die Canvas nicht in einen anderen Chunk geändert wurde, lassen Sie nichts los.
Wenn der Canvas den aktuellen Chunk verlassen hat, verwenden Sie die gespeicherte ID, um den nächsten zu ladenden Chunk zu finden. Wenn die ID 0 ist, setzen Sie voraus, dass der Chunk noch nicht existiert, und erstellen Sie ihn. Andernfalls laden Sie den Chunk und ersetzen den vorhandenen Chunk. Setzen Sie die Leinwand zurück auf zentriert.
Mit ausreichend langen IDs und ausreichend Speicherplatz erhalten Sie eine unendliche Zeichenfläche, da kein Koordinatensystem verwendet wird. Es ermöglicht auch das Umwickeln der Kanten oder das Erstellen von Wurmlöchern.
Wie man es implementiert, bin ich nicht ganz sicher, aber Sie müssen nur verfolgen, wie weit die Leinwand verschoben wurde. Google Maps macht etwas ähnliches, also würde ich mir ansehen, wie sie damit umgehen (ich werde das in Kürze tun und sehen, ob ich dieser Antwort einige Implementierungsdetails hinzufügen kann).
Dies ist vielleicht nicht die praktischste oder einfachste Methode, aber es hat Spaß gemacht, darauf zu kommen.
Edit: Ich glaube, das entspricht der Grundfunktionalität: Ссылка Es ist eine leicht zugängliche Javascript-Karte. Sie müssen nur verfolgen, wie weit, dann.
Ich habe eine Bibliothek erstellt, die sich TilicCanvas nennt Es bietet Schnittstellen zum Zoomen und Verschieben. Und zeichne einen unendlichen Raum unter Verwendung aller Leinwand-Apis.
Sie können Chunks dynamisch basierend auf Koordinaten laden, Sie geben ihm einfach eine Funktion, die als Parameter ein x, y und Callback erhält und Sie geben ihm einfach etwas zurück, das auf einer Leinwand gezeichnet werden kann.
Tags und Links javascript html5