如何实现单个画布缩放/平移

Question

我有一个单一的画布元素（填充手动制作的像素值，而不是现有的图像），我想在该画布上实现缩放/平移控制，是否有任何现有的库为了做到这一点？

非常感谢！

Answer 1

你可能不会找到一个库，将只解决缩放和平移明确，但如果你使用一个普通的帆布库如EaselJS或KineticJS很容易实现。

在这种情况下，您可以有一个代表“视口”（您添加到DOM的画布）和另一个代表“绘图”（可能大于视口）的画布的画布。然后，使用缩放因子和翻译在视口画布中绘制“绘图”画布。然后可以通过鼠标交互（例如鼠标滚轮（或捏合触摸设备））并分别点击和拖动来改变缩放和平移值。

如果您使用库，您将最终编写更少的代码和更多可读代码。这些库可以更轻松地跟踪和操作画布中的“对象”。它们也简化了鼠标交互，所以我绝对推荐将它们检出。