¿Cómo tener un lienzo infinitamente grande?

I am building a web app that uses a canvas to draw on. I would like to have an infinitly big drawing space (you can scroll as long as you want in any direction) AND save the data / images to a database.

Something has been done similar to that here: http://wordsquared.com/, where the more people that play it, the larger it gets.

I know this would require somehow tiling images, saving them to a db, then only loding the ones within the viewport. How would this and the infinite scrolling be accomplished / where should I start?

preguntado el 28 de agosto de 11 a las 02:08

You can't have it be infinite, not properly, and you don't want to just load the next chunk in a direction, as you'll end up hitting the limits of your coordinate system. What you want to do is constantly recenter the canvas and keep track of that, loading new chunks when the center reaches the edge of the loaded area. -

What I mean is the more you scroll, the larger it gets. Of course I would need to set a limit EVENTUALLY, but I would like something that get scale to as large as I set it. -

Posible duplicado de Haz un lienzo infinito -

2 Respuestas

This is a bit unconventional a method, but just struck me as potentially (in theory, with unbound storage space) infinite.

You will need to store a currently loaded chunk of the board, given as a unique ID of some sort. The chunks and their data need to be in a table with the following columns:

  • Chunk ID
  • Chunk Data
  • ID of chunk to the north
  • ID of south
  • ID of east
  • ID of west

You need to make the canvas draggable, perhaps by using jQuery or similar (esta pregunta has some info on that).

Now, create an event listener for the canvas to be dragged, and track the distance it moves. When released, if the canvas has not changed to a different chunk, do nothing.

If the canvas has left the current chunk, use the stored ID to find the next chunk to load. If the ID is 0, assume the chunk does not yet exist, and create it. Otherwise, load the chunk, replacing the existing chunk. Set the canvas back to centered.

With long enough IDs and enough storage space, this will give you an infinite canvas, as no coordinate system is used. It also allows for wrapping the edges, or creating wormholes.

How to implement it, I'm not quite sure, but you only need to track how far the canvas has been moved. Google Maps does something similar, so I would look at how they handle it (I will do so shortly and see if I can add some implementation details to this answer).

This may not be the most practical or simplest method, but it was fun to come up with.

Edit: I believe this is along the lines of the basic functionality: http://candrews.net/blog/2010/10/introducing-sprymap/ It is a light-weight draggable javascript map. You simply need to track how far, then.

contestado el 23 de mayo de 17 a las 14:05

Hmm.. that certainly isnt conventional, but its probably the most practical and simplest method i've heard yet. Im thinking it would probablt be best to have each tile be an entire large html canvas like (1000px x 1000px) so thats it is easy to save and load all the data - sdfadfaasd

I have made a library to deal with this called TiledCanvas It provides interfaces to zoom and move. And draw in an infinite space using all the canvas apis.

It lets you load chunks dynamically based on coordinates, you just give it a function that gets as paramters a x, y and callback and you simply give it back something that can be drawn on a canvas.


Respondido el 31 de diciembre de 16 a las 19:12

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.