我正在构建一个使用画布绘制的Web应用程序.我希望有一个无限大的绘图空间(您可以在任何方向上滚动任意长度)并将数据/图像保存到数据库.
在这里做了类似的事情:http://wordsquared.com/,播放它的人越多,它就越大.
我知道这需要以某种方式平铺图像,将它们保存到数据库中,然后只在视口中填充图像.如何完成这个和无限滚动/我应该从哪里开始？
这有点不同寻常的方法,但只是潜在地(理论上,未绑定的存储空间)无限震撼我.
您将需要存储当前加载的电路板块,作为某种类型的唯一ID.块和它们的数据需要在包含以下列的表中:
你需要使用jQuery或类似的东西使画布可拖动(这个问题有一些信息).
现在,为要拖动的画布创建一个事件侦听器,并跟踪它移动的距离.释放后,如果画布未更改为其他块,则不执行任何操作.
如果画布已离开当前块,请使用存储的ID查找要加载的下一个块.如果ID为0,则假设该块尚不存在,并创建它.否则,加载块,替换现有块.将画布设置为居中.
凭借足够长的ID和足够的存储空间,这将为您提供无限画布,因为不使用任何坐标系.它还允许包裹边缘或创建虫洞.
如何实现它,我不太确定,但你只需要跟踪画布的移动距离.谷歌地图做了类似的事情,所以我会看看他们如何处理它(我会很快这样做,看看我是否可以在这个答案中添加一些实现细节).
这可能不是最实用或最简单的方法,但提出它很有趣.
编辑:我相信这是基本的功能:http: //candrews.net/blog/2010/10/introducing-sprymap/ 这是一个轻量级可拖动的JavaScript地图.你只需要跟踪多远.