缩放画布及其上的元素答案

【问题标题】：Scaling canvas together with elements over it缩放画布及其上的元素
【发布时间】：2011-09-02 08:51:50
【问题描述】：

我想获得一些关于如何实现它的想法。

这是草图：

描述：我有一个场景（草图上的画布），假设有 2 个面板。画布以相对位置放置在 DIV 中，面板位于此 DIV 之外，并且此 DIV 上有一些具有绝对位置的元素。所有这些元素都是可拖动的。每个元素都是一个带有内部画布的 div。

问题：我需要以某种方式实现此画布的缩放。我正在缩放画布（上面绘制了一个网格）并且元素也在缩放。它可能是缩放的（我知道缩放位图后的质量，在我的情况下是可以接受的）。我真的不知道如何解决的唯一问题是如何缩放画布和上面的独立元素，我们有一种场景正在缩放的错觉。希望你明白我想要做什么。

【问题讨论】：

【解决方案1】：

如果您的目标浏览器支持 CSS3 转换，您可以对浮动 div 应用转换以匹配画布中的那个，例如将样式设置为transform: scale(1.5,1.5)。

注意：您可能希望包裹画布的 div 和绝对 div 具有 overflow: hidden，以便您只显示该区域中的内容。

【讨论】：