2011-08-28 10 views
8

Sto costruendo un'app Web che utilizza una tela per disegnare. Mi piacerebbe avere uno spazio di disegno infinitamente grande (puoi scorrere per tutto il tempo che desideri in qualsiasi direzione) E salvare i dati/le immagini in un database.Come avere una tela infinitamente grande?

Qualcosa è stato fatto in questo modo: http://wordsquared.com/, dove più persone ci giocano, più diventa grande.

So che questo richiederebbe in qualche modo le immagini di affiancamento, salvandole in un db, quindi presentando solo quelle all'interno del viewport. Come si compirebbe questo e lo scrolling infinito/dove dovrei iniziare?

+2

Non si può avere che sia infinita, non adeguatamente, e non si desidera caricare solo la prossima pezzo in una direzione, come si finirà per colpire i limiti del sistema di coordinate. Quello che vuoi fare è costantemente più recente nella tela e tenerne traccia, caricando nuovi blocchi quando il centro raggiunge il bordo dell'area caricata. – ssube

+0

Quello che voglio dire è che più scorri, più diventa grande. Ovviamente avrei bisogno di fissare un limite EVENTUALMENTE, ma vorrei qualcosa che abbia una scala tanto grande quanto l'ho impostato. – sdfadfaasd

+0

Possibile duplicato di [Crea una tela infinita] (http://stackoverflow.com/questions/38589304/make-a-canvas-infinite) – bummi

risposta

4

Questo è un metodo un po 'non convenzionale, ma mi ha colpito come potenzialmente (in teoria, con spazio di archiviazione non associato) infinito.

Sarà necessario memorizzare un blocco attualmente caricato della scheda, dato come un ID univoco di qualche tipo. I pezzi ei loro dati devono essere in una tabella con le seguenti colonne:

  • Chunk ID
  • blocco di dati
  • ID del pezzo, a nord
  • ID del sud
  • ID di est
  • ID ovest

È necessario rendere la tela trascinabile, magari utilizzando jQuery o r simile (this question ha alcune informazioni su quello).

Ora, creare un listener di eventi per il canvas da trascinare e tracciare la distanza percorsa. Una volta rilasciato, se la tela non è cambiata in un altro pezzo, non fare nulla.

Se la tela ha lasciato il blocco corrente, utilizzare l'ID memorizzato per trovare il blocco successivo da caricare. Se l'ID è 0, supponi che il blocco non esiste ancora e crealo. Altrimenti, carica il blocco, sostituendo il blocco esistente. Imposta la tela al centro.

Con ID abbastanza lunghi e spazio di archiviazione sufficiente, questo ti darà una tela infinita, poiché non viene utilizzato alcun sistema di coordinate. Permette anche di avvolgere i bordi o creare wormhole.

Come implementarlo, non ne sono del tutto sicuro, ma è sufficiente tenere traccia di quanto è stato spostato il quadro. Google Maps fa qualcosa di simile, quindi vorrei vedere come lo gestiscono (lo farò a breve e vedrò se posso aggiungere alcuni dettagli di implementazione a questa risposta).

Questo potrebbe non essere il metodo più pratico o più semplice, ma è stato divertente da inventare.

Edit: Credo che questo sia lungo le linee della funzionalità di base: http://candrews.net/blog/2010/10/introducing-sprymap/ Si tratta di una mappa javascript trascinabile leggero. Devi semplicemente tenere traccia di quanto lontano, quindi.

+0

Hmm .. che certamente non è convenzionale, ma è probabilmente il metodo più pratico e più semplice io Ho già sentito. Sto pensando che sarebbe meglio avere ciascuna tessera come una tela di grandi dimensioni in html (1000px x 1000px), quindi è facile salvare e caricare tutti i dati – sdfadfaasd

0

Ho creato una libreria per gestire questo chiamato TiledCanvas Fornisce interfacce per lo zoom e lo spostamento. E disegna in uno spazio infinito usando tutti gli apis di tela.

Ti permette di caricare blocchi in modo dinamico in base alle coordinate, ti basta dare una funzione che ottiene come paramter un x, ye callback e semplicemente restituisci qualcosa che può essere disegnato su una tela.

https://github.com/Squarific/TiledCanvas

Problemi correlati