2011-08-28 9 views
8

Estoy construyendo una aplicación web que utiliza un lienzo para dibujar. Me gustaría tener un espacio de dibujo infinitamente grande (puede desplazarse todo el tiempo que desee en cualquier dirección) Y guardar los datos/imágenes en una base de datos.¿Cómo tener un lienzo infinitamente grande?

Se ha hecho algo similar a esto aquí: http://wordsquared.com/, donde cuantas más personas lo juegan, más grande se vuelve.

Sé que esto requeriría de alguna manera embaldosar las imágenes, guardarlas en una base de datos, y luego solo colocar las que están dentro de la ventana gráfica. ¿Cómo se lograría esto y el desplazamiento infinito/dónde debería comenzar?

+2

No se puede tener que ser infinito, no está bien, y que no quiere simplemente cargar el siguiente fragmento en una dirección, ya que va a terminar golpeando los límites de su sistema de coordenadas. Lo que desea hacer es volver a centrar constantemente el lienzo y realizar un seguimiento de eso, cargando nuevos trozos cuando el centro llega al borde del área cargada. – ssube

+0

Lo que quiero decir es que cuanto más se desplaza, más grande se vuelve. Por supuesto que tendría que establecer un límite EVENTUALMENTE, pero me gustaría algo que alcance una escala tan grande como la configuré. – sdfadfaasd

+0

Posible duplicado de [Hacer un lienzo infinito] (http://stackoverflow.com/questions/38589304/make-a-canvas-infinite) – bummi

Respuesta

4

Este es un método poco convencional, pero me pareció potencialmente (en teoría, con espacio de almacenamiento no vinculado) infinito.

Necesitará almacenar un fragmento del tablero actualmente cargado, dado como un ID único de algún tipo. Los trozos y sus datos necesitan estar en una tabla con las siguientes columnas:

  • ID Chunk
  • fragmento de datos
  • Identificación del trozo al norte
  • Identificación del sur
  • Identificación del este
  • Identificación del oeste

lo necesario para hacer la tela que pueden arrastrarse, tal vez mediante el uso de jQuery o r similar (this question tiene algo de información sobre eso).

Ahora, crea un detector de eventos para el lienzo que se va a arrastrar y rastrea la distancia que se mueve. Cuando se libere, si el lienzo no ha cambiado a un trozo diferente, no haga nada.

Si el lienzo ha salido del fragmento actual, use la ID almacenada para buscar el siguiente fragmento para cargar. Si el ID es 0, suponga que el fragmento aún no existe y créelo. De lo contrario, cargue el fragmento, reemplazando el fragmento existente. Coloque el lienzo nuevamente en el centro.

Con suficiente ID suficiente y suficiente espacio de almacenamiento, esto le dará un lienzo infinito, ya que no se utiliza ningún sistema de coordenadas. También permite envolver los bordes o crear agujeros de gusano.

Cómo implementarlo, no estoy muy seguro, pero solo necesita realizar un seguimiento de cuánto ha movido el lienzo. Google Maps hace algo similar, así que me gustaría ver cómo lo manejan (lo haré en breve y ver si puedo agregar algunos detalles de implementación a esta respuesta).

Puede que este no sea el método más práctico o simple, pero fue divertido idearlo.

Editar: Creo que esto es a lo largo de las líneas de la funcionalidad básica: http://candrews.net/blog/2010/10/introducing-sprymap/ Es un mapa javascript arrastrable de peso ligero. Simplemente necesita rastrear qué tan lejos, entonces.

+0

Hmm ... eso ciertamente no es convencional, pero es probablemente el método más práctico y simple que Ya lo escuché Creo que probablemente sería mejor que cada mosaico sea un lienzo html grande como (1000px x 1000px), así que es fácil guardar y cargar todos los datos – sdfadfaasd

0

He creado una biblioteca para manejar esto llamada TiledCanvas Proporciona interfaces para acercar y alejar. Y dibuje en un espacio infinito usando todas las apis del lienzo.

Le permite cargar fragmentos dinámicamente en función de las coordenadas, solo le da una función que obtiene como parámetros a x, y y callback y simplemente le devuelve algo que se puede dibujar en un lienzo.

https://github.com/Squarific/TiledCanvas

Cuestiones relacionadas