HTML5画布和滚动

Question

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

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

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

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

Answer 1

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

这意味着您的画布是完整尺寸，并且您正在使用容器div作为一种“框架”。 这确实很糟糕，因为画布像素非常昂贵，尤其是在您甚至不使用它们的情况下（它们不在视口中）。

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

您将失去滚动条，这是不利的一面。

Answer 2

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

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

• 拥有一个与容器div大小相同的画布。

• 添加2个输入type = range控件以用作垂直和水平滚动条（或者，如果您想花哨的话，可以拿一个jqueryUI滚动条插件）。

• 然后，您可以使用context.drawImage的剪辑版本仅绘制范围控件指定的图像部分。 drawImage的剪辑版本如下所示：drawImage（myLargeImage，clipX，clipY，clipWidth，clipHeight，0、0，canvas.width，canvas.height）