javascript - HTML5 Canvas 和滚动

Question

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

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

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

问题是:如何根据用户滚动图像的距离来检测上下文可见部分当前的topLeft和bottomRight？基本上我想添加对自定义视口(viewport)的支持，但我似乎无法利用搜索信息来确定要从原始图像中裁剪的 block 的边界框。

Answer 1

I actually have a canvasDiv container, which is the real scrollable element, not the canvas itself.

这意味着您的 Canvas 是完整尺寸的，并且您正在使用容器 div 作为一种“框架”。这真的很糟糕，因为 Canvas 像素非常昂贵，特别是如果您甚至不使用它们(它们在视口(viewport)之外)。

这里最好的方法是将 Canvas 大小设置为容器大小，并使用drawImage函数来控制滚动。原始图像将放置在屏幕外 Canvas 或图像元素上。我可以保证这样你会有更好的表现。

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