如何拥有无限大画布？ [英] How to have an infinitely big canvas?
问题描述
我正在构建一个使用画布绘制的Web应用程序。我希望有一个无限大的绘图空间（您可以在任何方向上滚动任意长度）并将数据/图像保存到数据库。
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.
有些东西有与此处类似： http://wordsquared.com/ ，玩的人越多，越大它得到了。
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?
推荐答案
这是一个非常规的方法，但只是我认为潜在的（理论上，未绑定的存储空间）是无限的。
This is a bit unconventional a method, but just struck me as potentially (in theory, with unbound storage space) infinite.
你需要存储一个当前加载的电路板块，作为一个唯一的ID给出分类。块和它们的数据需要在一个包含以下列的表中：
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:
- 块ID
- 块数据
- 北方块的ID
- 南方ID
- 东方ID
- 西部的ID
- Chunk ID
- Chunk Data
- ID of chunk to the north
- ID of south
- ID of east
- ID of west
你需要使用jQuery或类似的东西使画布可拖动（ 这个问题有一些信息）。
You need to make the canvas draggable, perhaps by using jQuery or similar (this question 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.
如果画布已离开当前块，请使用存储的ID查找下一个块加载。如果ID为0，则假设该块尚不存在，并创建它。否则，加载块，替换现有块。将画布设置回中心。
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.
使用足够长的ID和足够的存储空间，这将为您提供无限画布，因为没有使用坐标系。它还允许包裹边缘或创建虫洞。
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.
编辑：我相信这是沿着基本功能的行：
http://candrews.net/blog / 2010/10 / introduction-sprymap /
这是一款轻量级可拖动的javascript地图。你只需要追踪到多远。
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.
这篇关于如何拥有无限大画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
