Lienzo grande HTML5: mover y ampliar todo el contenido, incluido el fondo

Question

Mi objetivo final es implementar una aplicación como http://www.crystal.ch/abb/power_systems_landscape/ utilizando html5.

Como ve, es posible que necesitemos un lienzo grande (2000 * 600), pero no estoy seguro.

¿Alguien me puede dar una idea solo para seguir el comportamiento del enlace de arriba?

1. contenido de lona entera incluyendo los antecedentes se puede mover de izquierda a derecha sin problemas utilizando el funcionamiento mousemove y mousedown
toda
2. contenido de tela que incluye movimiento antecedentes de izquierda a derecha sin problemas de acuerdo con la selección del sistema de potencia
3. ampliar reducir
4. Fade out efecto como más círculos icónicos

Cualquier tipo de idea sería apreciada.

Answer 1

básicamente quieres algo como esto

<div id='wrapper' style='position: overflow: hidden; relative; width: 500px; height: 300px;> 
    <canvas id='canvas' width='2000' height='600'></canvas> 
<div> 

entonces cuando se quiere desplazarse que haría algo como

document.getElementById('wrapper').scrollTo(x, y); 

y zoom sería

document.getElementById('canvas').style.width = 2000 * zoom; 
document.getElementById('canvas').style.height = 600 * zoom; 

Puedes jugar con setInterval y lo que no se puede obtener el desplazamiento y el zoom agradable y sin problemas, pero eso es definitivamente sea ​​la forma más rápida de obtener ese efecto en un lienzo grande ya que no hay redibujado.

Answer 2

Lo recomiendo si está trabajando en 2D canvas js, que no utiliza el zoom o mueve el elemento canvas, o cualquier otro elemento html, es mejor que escriba un algoritmo dentro de la función draw. El zoom es la muerte de la calidad y la velocidad, y puede ser complejo desde el zoom hasta el alejamiento (no olvide que todos los datos visibles en el lienzo son solo una imagen). Logré subir una imagen de 13000 px y avatares multijugador para mostrar todo un algoritmo dentro de las funciones de sorteo/actualización.

Si utiliza 2 lienzos puede recortar de grandes imágenes de código y luego componer en el mapa visual.

Si tiene demasiado ancho de imagen> 3000 ps debe dividirse por el nivel más bajo (en los dispositivos iOS para la imagen ~> 3000px viene a ser una escala negativa - la imagen es más pequeña).