HTML5 画布和滚动答案

【问题标题】：HTML5 canvas and scrollingHTML5 画布和滚动
【发布时间】：2015-01-27 21:42:11
【问题描述】：

我有一个尺寸为 1024x768 的画布元素，我在其中绘制了一个非常大的图像，假设宽度 >> 1024 和高度 >> 768。可以使用普通滚动条滚动图像以完全看到。

用户可以在画布上单击以将顶点添加到多边形：每次添加顶点时，都会绘制一条从新顶点到鼠标光标的线。每次鼠标移动到画布上都会更新画布，以便将这条线从顶点重新绘制到新的鼠标光标位置。

由于图像非常大，重绘非常慢，所以我只想重绘当前可见的图像块，或者更好的是，受这条线影响的“子块”。

问题是：如何根据用户滚动图片的多少来检测当前上下文可见部分的topLeft和bottomRight？基本上我想添加对自定义视口的支持，但我似乎无法利用 scolling 信息来确定要从原始图像裁剪的块的 boundingBox。

【问题讨论】：

你能重画两点之间的区域吗？听起来这个区域会小于可见区域，并且您已经知道这些坐标。
那张图片有多大？以及如何使用普通滚动条滚动画布内容？
是的，我确实可以这样做，这将是最简单的方法。 :) 问题是我实际上可能需要一个视口以供将来使用（你永远不知道），但似乎所有其他视口问题都与游戏有关，所以我找不到关于简单滚动条的问题。
@Shomz 它接近 5000x5000，我实际上有一个 canvasDiv 容器，它是真正的可滚动元素，而不是画布本身。抱歉我的解释不清楚。
我明白了，在那种情况下，我想我可以帮助您...在游戏中处理更大的文件，并获得了 60FPS...会写给您答案。

【解决方案1】：

我实际上有一个 canvasDiv 容器，它是真正的可滚动元素，而不是画布本身。

这意味着您的画布是全尺寸的，并且您将容器 div 用作一种“框架”。这真的很糟糕，因为画布像素非常昂贵，尤其是如果您甚至不使用它们（它们不在视口中）。

这里最好的做法是将画布大小设置为容器大小，并使用drawImage函数来控制滚动。原始图像将放置在屏幕外画布或图像元素上。我可以保证您通过这种方式获得更好的性能。

你会失去滚动条，这是缺点。

【讨论】：

你是对的，糟糕的设计选择。当时我认为我不必处理大于 2000x2000 的图像。我会想出一些自定义滚动条或类似的东西，非常感谢@Shomz！
不客气，伙计，祝你好运！记住，永远不要渲染超过你需要的。
哎呀，我不经常使用stackoverflow，我以为我可以接受多个答案。 :(事实上，这两个答案都是完美的。
哈哈，不用担心，欢迎来到 Stack Overflow！ :) 您可以/应该对所有好的答案投赞成票（而对不好的答案投反对票），但您只能接受一个 - 这就是它的工作原理。 :)
罗杰 :D 直到下一次！

【解决方案2】：

我假设您通过在较小的 div 中包含较大的画布元素来创建滚动条。

相反，您可以通过以下方式模仿此设置：

拥有与容器 div 大小相同的画布。
添加 2 个 input type=range 控件以充当垂直和水平滚动条（如果您想花哨的话，也可以使用 jqueryUI 滚动条插件）。
然后您可以使用context.drawImage 的剪切版本仅绘制范围控件指定的图像部分。 drawImage 的裁剪版本如下所示：drawImage(myLargeImage, clipX,clipY,clipWidth,clipHeight, 0,0,canvas.width,canvas.height)

【讨论】：