Desplazamiento personalizado en el lienzo html5

Question

¿Cuál es la forma recomendada de proporcionar desplazamientos y barras de desplazamiento nativas para datos muy grandes que se muestran en un lienzo hmtl5?

Necesito mostrar datos que son 128000x128000 píxeles. Usar un lienzo con ancho/alto establecido en 128000 no es una opción, ya que usaría una gran cantidad de RAM (alrededor de 61 GB de acuerdo con mi cálculo rápido).

Necesito una forma de proporcionar barras de desplazamiento personalizadas para un lienzo HTML5.

Answer 1

jCanvas es un complemento de jQuery que puede ayudarle.

Answer 2

Interesante pregunta. No he usado <canvas> mucho, pero creo que el interior de la <canvas> se considera mejor como una imagen, es decir, es una caja negra en lo que se refiere al DOM.

Como tal, no creo que realmente puedas desplazarte de la forma que estás imaginando. Si tenía un 128000 × 128000 <canvas>, puede ponerlo dentro de un <div>, por ejemplo, 1280 × 1280 y configura ese <div> en overflow:hidden, pero como dices, un 128000 × 128000 <canvas> no es práctico.

Supongo que el tipo de solución que está buscando proporcionaría una interfaz de lienzo virtual de 128000 × 128000, pero luego divídalo en fragmentos, proporcione una interfaz de desplazamiento y dibuje en cada fragmento a medida que se desplazó a la vista.

Answer 3

Después de una prueba rápida, no estoy seguro de que Chrome o Firefox incluso rendericen un lienzo tan grande. Mi apuesta sería crear un elemento canvas pero nunca agregarlo al DOM. Al igual que este:

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

A continuación, cree un lienzo más pequeño que en realidad se mostrará una parte de su lienzo oculto

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

y utilizar el método drawImage para dibujar porciones:

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); 

Entonces Depende de usted proporcionar los botones arriba/abajo/derecha/izquierda para navegar, o tal vez falsificar las barras de desplazamiento usando DIV de 20px de ancho que solo mostrarían barras de desplazamiento y en las que engancharía un desplazamiento incluso oyente en. Y cada vez que el usuario cambie de posición, realice nuevamente una llamada a drawImage, actualizando las posiciones x/y (40 y 50 en mi ejemplo).

Habiendo dicho esto, de nuevo, incluso cuando está oculto, dudo que los navegadores funcionen con un lienzo tan grande.

Estoy buscando una solución para el mismo problema, por lo que si en su investigación tiene suerte, por favor comparta.