Quiero implementar zoom y panorámica rápidos y de alta resolución en mi Canvas. Como ya puede leer en el título, tengo una gran cantidad de datos, por lo que usar CanvasRenderingContext2D.scale() y CanvasRenderingContext2D.translate() con redibujar no es una opción, porque es demasiado lento. Ya intenté usar Imágenes, pero quiero ver todos los puntos de datos mientras hago zoom y paneo. Dibujar solo los puntos de datos que son visibles es un buen comienzo, pero esto hace que el zoom y la panorámica solo sean posibles con un zoom muy cercano, pero en realidad quiero poder alejarme hasta que pueda ver todos los puntos de datos. Los puntos de datos se dibujan con círculos y están muy juntos si eso te ayuda de alguna manera. Agradezco cada sugerencia sobre cómo manejar esto.
Creo que deberías probar uno de estos:
Los sugerí porque también pueden trabajar con 2D (no solo con 3D) y tienen herramientas para trabajar con texturas grandes. Puede crear una cámara estática que solo cambiará la distancia a la superficie (con textura) - zoom.
Con Three.js hay una manera de cargar mapas de bits progresivamente con cadenas mipmap o con "Mapa de entorno de resplandor prefiltrado y mipmapeado: PMREMGenerator .
Un enfoque alternativo que funcionó para mí fue tener un lienzo (oculto) para dibujar y un lienzo de ventana gráfica que el usuario pudiera ver. Dibujar en el lienzo oculto le permite dibujar una imagen más grande y luego simplemente actualizar la ventana gráfica redibujando el lienzo para ver solo la parte central (puede usar viewportContext.drawImage(sourceCanvas, -canvasWidth / 2, -canvasHeight / 2) para dibujar de un lienzo a otro).
Para implementar el zoom y la panorámica, simplemente almacenaría la imagen desde el lienzo de origen al principio (en el mouseDown o en el desplazamiento) y la volvería a dibujar de acuerdo con la nueva posición/desplazamiento del mouse (simplemente traduciéndola o cambiando sus dimensiones funcionará) al lienzo de origen .