如何拥有无限大的画布？答案

【问题标题】：How to have an infinitely big canvas?如何拥有无限大的画布？
【发布时间】：2017-01-01 00:31:41
【问题描述】：

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

已经做了类似于这里的事情：http://wordsquared.com/，玩的人越多，它就越大。

我知道这需要以某种方式平铺图像，将它们保存到数据库，然后只在视口中加载图像。这和无限滚动将如何完成/我应该从哪里开始？

【问题讨论】：

你不能让它是无限的，不正确，你不想只加载一个方向的下一个块，因为你最终会达到你的坐标系的限制。你想要做的是不断地重新定位画布并跟踪它，当中心到达加载区域的边缘时加载新的块。
我的意思是你滚动的越多，它就越大。当然，我最终需要设置一个限制，但我想要一些可以扩大到与我设置一样大的东西。
Make a canvas infinite的可能重复

【解决方案1】：

这是一种非常规的方法，但让我觉得可能（理论上，有未绑定的存储空间）是无限的。

您将需要存储当前加载的棋盘块，以某种唯一 ID 的形式给出。块及其数据需要位于包含以下列的表中：

您需要使画布可拖动，可能使用 jQuery 或类似方法（this question 对此有一些信息）。

现在，为要拖动的画布创建一个事件侦听器，并跟踪它移动的距离。释放时，如果画布没有更改为不同的块，则什么也不做。

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

有了足够长的 ID 和足够的存储空间，这将为您提供无限的画布，因为没有使用坐标系。它还允许包裹边缘或创建虫洞。

如何实现，我不太确定，但你只需要跟踪画布移动了多远。谷歌地图做了类似的事情，所以我会看看他们是如何处理它的（我很快就会这样做，看看我是否可以在这个答案中添加一些实现细节）。

这可能不是最实用或最简单的方法，但很有趣。

编辑：我相信这与基本功能一致： http://candrews.net/blog/2010/10/introducing-sprymap/ 它是一个轻量级的可拖动 javascript 地图。那么，您只需要跟踪多远。

【讨论】：

嗯.. 这当然不是传统的，但它可能是我听过的最实用和最简单的方法。我认为最好让每个图块都是一个完整的大型 html 画布，例如（1000 像素 x 1000 像素），这样很容易保存和加载所有数据

【解决方案2】：

我已经创建了一个名为 TiledCanvas 的库来处理这个问题它提供了缩放和移动的界面。并使用所有 canvas api 在无限空间中绘制。

它允许您根据坐标动态加载块，您只需给它一个函数，该函数将 x、y 和回调作为参数，然后您只需将可以在画布上绘制的东西返回给它。

【讨论】：