如何制作可以缩放和平移的 Infinite Html5 Canvas？
How to make an Infinite Html5 Canvas which can be zoomed and panned?
我正在使用实时白板。
我想创建一个 Infinite canvas，它可以使用鼠标滚轮缩放并使用拖动进行平移，使用 javascript.During 缩放和平移 canvas 上绘制的项目也必须受到影响。有没有不使用任何外部库就可以实现的方法？
canvas 元素本身不会是无限的，我想这已经很清楚了。当你拖动和缩放时会发生变化的是你的白板元素的真实坐标到 canvas 上绘图坐标的映射。检测鼠标事件和更新映射的计算有一些工作要做，所以有太多细节无法真正放入答案。但是，当然，这在没有外部库的情况下是可能的。
是的，但这需要一些工作。您将要执行的操作的大致思路如下：
- 您将需要跟踪“相机”的位置，以及它与内容的接近程度 - 缩放系数
- 您需要将事件侦听器附加到不同的鼠标操作以导致相机的状态发生变化
- 拖动或缩放时，您需要使用所有内容的新位置和大小重新绘制 canvas。必须做一些数学运算才能知道新的 canvas 内容是什么。
- 如果 canvas.
上有很多内容，您可能需要解决某些性能问题，也可能不需要解决。
另一种可能更快但功能更弱的方法是不使用 canvas，而是使用一些 CSS 魔法而不是普通的 HTML。这里的基本概念是你将有一个 0x0 div 作为你的平面。 div 将包含您的内容，其中可能包括自定义 SVG 等内容。它的每个 children 都将脱离 div，并相对于它定位。拖动时，只需移动 div（通过 transform:translate()）。缩放时，只需缩放 div（通过变换：scale()）。
如果采用第二种方法，一些有用的参考资料：
- CSS transform - 移动和缩放白板
- CSS position - 定位白板上的内容，以及一般布局
- CSS overflow - 裁剪白板
我正在使用实时白板。 我想创建一个 Infinite canvas，它可以使用鼠标滚轮缩放并使用拖动进行平移，使用 javascript.During 缩放和平移 canvas 上绘制的项目也必须受到影响。有没有不使用任何外部库就可以实现的方法？
canvas 元素本身不会是无限的，我想这已经很清楚了。当你拖动和缩放时会发生变化的是你的白板元素的真实坐标到 canvas 上绘图坐标的映射。检测鼠标事件和更新映射的计算有一些工作要做，所以有太多细节无法真正放入答案。但是，当然，这在没有外部库的情况下是可能的。
是的，但这需要一些工作。您将要执行的操作的大致思路如下：
- 您将需要跟踪“相机”的位置，以及它与内容的接近程度 - 缩放系数
- 您需要将事件侦听器附加到不同的鼠标操作以导致相机的状态发生变化
- 拖动或缩放时，您需要使用所有内容的新位置和大小重新绘制 canvas。必须做一些数学运算才能知道新的 canvas 内容是什么。
- 如果 canvas. 上有很多内容，您可能需要解决某些性能问题，也可能不需要解决。
另一种可能更快但功能更弱的方法是不使用 canvas，而是使用一些 CSS 魔法而不是普通的 HTML。这里的基本概念是你将有一个 0x0 div 作为你的平面。 div 将包含您的内容，其中可能包括自定义 SVG 等内容。它的每个 children 都将脱离 div，并相对于它定位。拖动时，只需移动 div（通过 transform:translate()）。缩放时，只需缩放 div（通过变换：scale()）。
如果采用第二种方法，一些有用的参考资料：
- CSS transform - 移动和缩放白板
- CSS position - 定位白板上的内容，以及一般布局
- CSS overflow - 裁剪白板