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

我有一个画布元素（用手工制作的像素值填充，而不是现有的图像），我想在画布上实现缩放/平移控件，是否有任何现有的库可以这样做

---

非常感谢

您可能找不到一个只解决缩放和平移问题的库，但是如果您使用诸如或之类的通用画布库，它很容易实现

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

---

如果您使用一个库，您将编写更少的代码和更可读的代码。这些库使跟踪和操作画布中的“对象”变得更容易。它们还简化了鼠标交互，因此我绝对建议您将其签出。

您可能找不到只解决缩放和平移问题的库，但如果您使用诸如或之类的通用画布库，则很容易实现

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

---

如果您使用一个库，您将编写更少的代码和更可读的代码。这些库使跟踪和操作画布中的“对象”变得更容易。它们还简化了鼠标交互，因此我绝对建议您检查它们。

不确定是否有现有库，但我认为您可以将其复制到分离的画布中，然后

。drawImage

就是您要显示的部分。或者用

溢出：隐藏
将画布放在div中，并通过更改画布的css宽度和高度来“缩放”画布，通过移动画布在div中的位置来“缩放”画布不确定是否存在现有库，但我认为您可以将其复制到分离的画布中，然后
。drawImage
只是您想要显示的部分。或者将画布放在带有
溢出：隐藏的div中，并通过更改画布的css宽度和高度来“缩放”画布，通过移动画布在div中的位置来“平移”