javascript - 在 Canvas 中显示绘图的某些部分并滚动浏览绘图的其余部分

Question

我正在尝试创建一个大于 Canvas 大小的绘图。那么有没有一种方法可以创建绘图并在 Canvas 查看区域中仅显示其中的一部分。

要查看剩余的图，应该有一个滚动条，它将把图带入查看区域。

也欢迎任何提示。

Answer 1

当然，您可以使用两种基本方法:

1. 将所有内容绘制到 Canvas 上，即使部分内容位于可见区域之外，并使用平移进行平移

2. 收集完全或部分可见的线条/形状，并仅显示它们。在检查时使用内部翻译来添加分数。

第一种方法很简单，也很有效。如果你有很多点，那不是最有效的。 Canvas 裁剪图形的影响不大，但您需要执行所有 JavaScript 代码，即使对于不可见的部分也是如此。

您可以通过平移 Canvas 来“平移”点，然后(清除并)重新绘制。 Canvas 将为您完成所有必要的裁剪(如果您的点会导致非常大的区域，您可以对这些点进行粗略的裁剪，例如查看四叉树)。

第二种方法更高效，因为它减少了绘制操作，但增加了找出需要绘制哪些形状的成本。但它也可能更复杂，具体取决于您使用的形状类型，例如，即使一个端点位于外部，线条也需要沿正确的方向继续，等等，因此您的算法也需要考虑这些情况。

如果您没有大量的条目，那么我会从第一个开始，如果需要的话，会进展到第二个。如果您确实有“无数”条目，那么您将需要一个更复杂的缓冲系统，这超出了本答案的范围。

您可以使用鼠标/触摸拖动来代替滚动条(或除了滚动条之外)。 Canvas 不支持其(位图)内容的滚动条，因此您必须自己创建一个滚动条(我不建议使用巨大的 Canvas 并在 div 内滚动它，因为这会产生巨大的内存影响，并且会影响移动设备上的性能等)。