Scorrimento personalizzato su tela HTML5

Question

Qual è il modo consigliato di fornire barre di scorrimento a scorrimento e native per dati molto grandi visualizzati in una tela hmtl5?

Ho bisogno di visualizzare dati che sono 128000x128000 pixel. L'utilizzo di una tela con larghezza/altezza impostata su 128000 non è un'opzione in quanto ciò richiederebbe un'enorme quantità di RAM (circa 61 GB secondo il mio calcolo rapido).

Quindi ho bisogno di un modo per fornire barre di scorrimento personalizzate per un canvas HTML5.

Answer 1

jCanvas è un plugin jQuery che può essere di aiuto.

Answer 2

Interessante domanda. Non ho usato molto il <canvas>, ma credo che l'interno del <canvas> sia meglio pensato come un'immagine, cioè è una scatola nera per quanto riguarda il DOM.

Come tale, non penso che si possa realmente scorrere nel modo che si sta immaginando. Se disponi di un 128000 × 128000 <canvas>, puoi inserirlo in uno <div>, ad es. 1280 × 1280 e impostare <div> su overflow:hidden ma, come dici tu, un 128000 × 128000 <canvas> non è pratico.

Immagino che il tipo di soluzione che stai cercando possa fornire un'interfaccia canvas virtuale 128000 × 128000, ma poi dividerlo in blocchi, fornire un'interfaccia di scorrimento e disegnare in ogni blocco mentre veniva fatto scorrere nella vista.

Answer 3

Dopo un test rapido, non sono sicuro che Chrome o Firefox eseguiranno il rendering di una tela così grande. La mia scommessa sarebbe creare un elemento canvas ma non aggiungerlo mai al DOM. Proprio come questo:

var hiddenCanvas = document.createElement('canvas'); 
hiddenCanvas.width = 128000; 
hiddenCanvas.height = 128000; 
var hiddenContext = hiddenCanvas.getContext('2d'); 

quindi creare un disegno più piccola che sarà effettivamente visualizzare una porzione della tua tela nascosto

<canvas width="something reasonable" height="something reasonable" id="viewCanvas"/> 

e utilizzare il metodo drawImage per disegnare porzioni:

var viewCanvas = document.getElementById('viewCanvas'); 
var viewContext = viewCanvas.getContext('2d'); 
viewCanvasContext.drawImage(hiddenCanvas, 40, 50, viewCanvas.width, viewCanvas.height, 0, 0, viewCanvas.width, viewCanvas.height); 

Poi spetterà a te fornire o pulsanti su/giù/destra/sinistra per navigare, o forse finte barre di scorrimento usando DIV da 20px che mostrerebbero solo barre di scorrimento e che vuoi agganciare a un onscroll ascoltatore anche su. E ogni volta che l'utente cambia posizione, effettua nuovamente una chiamata per disegnareImmagine, aggiornando le posizioni x/y (40 e 50 nel mio esempio).

Detto questo, ancora una volta, anche se nascosto, dubito che i browser funzioneranno con una tela così grande.

Mi sembra di essere alla ricerca di una soluzione allo stesso problema, quindi se nella tua ricerca sei fortunato, per favore condividi.