在html5画布上自定义滚动

Question

为hmtl5画布中显示的非常大的数据提供滚动和本机滚动条的推荐方法是什么？

我需要显示128000x128000像素的数据.使用宽度/高度设置为128000的画布不是一个选项,因为它会使用大量的RAM(根据我的快速计算,大约61 GB).

所以我需要一种为HTML5画布提供自定义滚动条的方法.

Answer 1

经过快速测试后,我不确定Chrome或Firefox是否会渲染出那么大的画布.我的赌注是创建一个canvas元素,但永远不会将它附加到DOM.像这样:

var hiddenCanvas = document.createElement('canvas');
hiddenCanvas.width = 128000;
hiddenCanvas.height = 128000;
var hiddenContext = hiddenCanvas.getContext('2d');

然后创建一个较小的画布,实际显示隐藏画布的一部分

<canvas width="something reasonable" height="something reasonable" id="viewCanvas"/>

并使用drawImage方法绘制部分:

var viewCanvas = document.getElementById('viewCanvas');
var viewContext = viewCanvas.getContext('2d');
viewCanvasContext.drawImage(hiddenCanvas, 40, 50, viewCanvas.width, viewCanvas.height, 0, 0, viewCanvas.width, viewCanvas.height);

那么你可以通过使用20px宽DIV来提供向上/向下/向右/向左按钮进行导航,或者假冒滚动条,它们只显示滚动条,你可以将onscroll挂钩甚至监听器.每次用户更改位置时,再次调用drawImage,更新x/y位置(在我的示例中为40和50).

再说一遍,即使隐藏起来,我也怀疑浏览器是否适用于大画布.

我碰巧正在寻找同样问题的解决方案,所以如果在你的研究中你很幸运,请分享.

Answer 2

jCanvas是一个 jQuery 插件，可能会对您有所帮助。