您可能找不到仅专门解决缩放和平移的库,但如果您使用常规画布库,例如EaselJS或KineticJS则很容易实施。
在这种情况下,你可以有一个画布代表“视口”(你添加到DOM的画布),另一个画布代表“画图”(可能比视口大)。然后使用缩放系数和平移在视口画布中绘制“绘图”画布。然后可以通过鼠标滚轮(或触摸设备的捏合)等鼠标交互更改缩放和转换值,并分别单击和拖动。
如果使用库,最终会编写更少的代码和更易读的代码。这些库使得更容易跟踪和操纵画布中的“对象”。它们还简化了鼠标交互,因此我绝对建议您查看它们。