1. Inicio
  2. Pregunta y respuesta
  3. Interfaz de usuario con zoom en el lienzo HTML

Interfaz de usuario con zoom en el lienzo HTML

2011-08-25 10 views
5

Sucedió que me he enfrentado a una tarea para crear un ZUI (interfaz de usuario de ampliación) en HTML Canvas. Los ejemplos de tales interfaces son Deep Zoom y Seadragon de Microsoft.Interfaz de usuario con zoom en el lienzo HTML

Estoy tratando de encontrar algunas bibliotecas que me permitan crear ZUI sin tener que escribirlo desde cero (aunque ya lo hice para Mac e iOS).

Las características clave que la biblioteca debe tener:

  1. tener algún tipo de 'vistas' como elementos básicos y ordenarlas jerárquicamente
  2. Dibujar gráficos vectoriales, texto e imágenes (opcional) en vistas
  3. zoom de hasta 200x veces
  4. eventos de ratón que son manejados por las vistas (arriba/abajo, movimiento, desplazamiento)

Cualquier sugerencia (incluso si no se ajustan a las condiciones anteriores) será muy bienvenida, ya que no he encontrado nada sobre ZUI en el lienzo.

Fuente

2011-08-25 GregoryM

Respuesta

3

¿Has echado un vistazo a Zoomooz?

Zoomooz es un complemento jQuery para hacer que los elementos de la página web se acerquen. Se puede usar para hacer presentaciones de diapositivas de Prezi y para ampliar las imágenes u otros detalles.

http://janne.aukia.com/zoomooz

Se puede utilizar el zoom con cualquier elemento DOM. Funciona mejor con SVG que con Canvas, ya que Canvas mostraría pixelado cuando se amplió.

Fuente

2013-02-24 20:13:39

+1

Hace bastante tiempo cuando esta pregunta era realmente una pregunta, y esta tarea incluso se ha asignado a otro desarrollador. Como me han dicho, hemos utilizado esta biblioteca para nuestro módulo ZUI y funcionó bastante bien. – GregoryM

2

¿Ha visto Piccolo2d parece que cumple con la mayoría de sus requisitos. Eche un vistazo al video de Geneaquilts que muestra cómo lo usaron para su interfaz.

Fuente

2011-10-24 00:29:05

+0

Gracias por su respuesta, aunque ya es tarde para tomar una decisión. Hemos decidido seguir con las transformaciones de CSS 3.0 y la biblioteca escrita por nosotros mismos. – GregoryM

+0

Acerca de sus proposiciones. Piccolo parece estar usando applets de Java o .NET que no son adecuados para la interfaz de usuario representada en páginas web en el lado del cliente. Especialmente para una amplia gama de usuarios de dispositivos móviles (iOS, Android, RIM, etc.) – GregoryM

+0

Parece que se ha tomado el enlace 'Piccolo2d'. –

0

También hay Taaspace.js que usa HTML y CSS3 pero no Canvas. Taaspace intenta abstraer todos los diferentes métodos de entrada, haciéndolo compatible con, por ejemplo, dispositivos de pantalla táctil. Puede consultar this example application.

Fuente

2014-01-31 14:06:22

Cuestiones relacionadas

 Cuestiones relacionadas