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

时间:2012-08-10 20:40:31

标签: canvas zoom pan

我有一个画布元素(填充手工制作的像素值,而不是现有的图像),我想在画布上实现缩放/平移控制,是否有任何现有的库可以做到这一点?

非常感谢!

1 个答案:

答案 0 :(得分:4)

您可能找不到专门解决缩放和平移的库,但如果您使用常规画布库,例如EaselJSKineticJS则很容易实施。

在这种情况下,你可以有一个画布代表“视口”(你添加到DOM的画布),另一个画布代表“画图”(可能比视口大)。然后使用缩放系数和平移在视口画布中绘制“绘图”画布。然后可以通过鼠标滚轮(或触摸设备的捏合)等鼠标交互更改缩放和转换值,并分别单击和拖动。

如果使用库,最终会编写更少的代码和更易读的代码。这些库使得更容易跟踪和操纵画布中的“对象”。它们还简化了鼠标交互,因此我绝对建议您查看它们。