如何创建一个无限大的画布？

Question

8

我正在开发一个使用画布进行绘制的网络应用程序。我想要一个无限大的绘画空间（可以在任何方向上滚动），并且将数据/图像保存到数据库中。

类似的事情已经在这里完成：http://wordsquared.com/，玩得越多，它就会变得越大。

我知道这需要将图像拼接起来，并将它们保存到数据库中，然后仅加载视口内的图像。如何实现无限滚动以及从哪里开始？

- sdfadfaasd

2

你不能让它无限制地进行，也不能只是朝一个方向加载下一块，因为这样会撞到坐标系统的极限。你需要做的是不断重新定位画布并跟踪它，当中心到达已加载区域的边缘时加载新的块。 - ssube

我的意思是，你滚动得越多，它就会变得越大。当然，最终我需要设置一个限制，但我希望它能够按照我设置的尺寸进行缩放。 - sdfadfaasd

可能是制作无限画布的重复问题。 - bummi

2个回答

0

我已经制作了一个名为TiledCanvas的库来处理这个问题。它提供了缩放和移动的接口，并使用所有画布API在无限空间中绘制。

它允许您根据坐标动态加载块，只需给它一个函数，该函数以x、y和回调作为参数，并简单地返回可以在画布上绘制的内容。

- urban

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ssube · Accepted Answer

这是一种非常特殊的方法，但在理论上（假设存储空间无限）可以无限扩展。

你需要存储当前加载的棋盘块，作为某种唯一的ID。这些块及其数据需要放置在一个表中，其中包括以下列：

- 块ID - 块数据 - 北部块ID - 南部块ID - 东部块ID - 西部块ID

你需要使画布可拖动，可以使用jQuery或类似的技术（此问题提供了一些相关信息）。

现在，在画布上创建一个事件监听器来跟踪它移动的距离。当释放时，如果画布没有更改到另一个块，则不执行任何操作。

如果画布已经离开了当前块，使用存储的ID找到下一个要加载的块。如果ID为0，则假定该块尚不存在，并创建它。否则，加载该块，替换现有块。将画布设置回居中位置。

通过足够长的ID和足够大的存储空间，这将为您提供无限画布，因为不使用坐标系。它还允许边缘环绕或创建虫洞。

如何实施它，我不太确定，但您只需要跟踪画布移动的距离。Google Maps也做了类似的事情，因此我会看一下他们是如何处理的（我很快就会这样做，并尝试在此答案中添加实现细节）。

这可能不是最实用或最简单的方法，但设计它非常有趣。 编辑： 我认为这基本上是其基本功能： http://candrews.net/blog/2010/10/introducing-sprymap/ 这是一个轻量级可拖动javascript地图。你只需要跟踪到底移动多远即可。