缩放 DOM 元素：缩放与变换答案

【问题标题】：Zooming on DOM-elements: Scaling vs transform缩放 DOM 元素：缩放与变换
【发布时间】：2012-12-13 11:10:45
【问题描述】：

我有一个可缩放的 div 元素网格。单击 div 时，将使用Zoomooz.js 对其进行缩放、缩放和居中。每个 div 内部都有一个使用 Raphäel 实现的可绘制区域（如 Canvas）。

我的问题是，即使缩放功能完美运行，div 的缩放也无法在 div 上进行合理的绘制，因为 div 是按比例放大的，而不仅仅是将其转换为更大的宽度/高度。我真的想要缩放效果，但不是缩放 div，我的猜测是我想对所有 div 进行转换，并使用缓动效果或类似效果居中选定的 div。

任何建议将不胜感激！

【问题讨论】：

【解决方案1】：

一种选择是对画布内容进行逆变换。因此，将画布制作成两倍大小，然后使用-webkit-transform:scale(0.5); 或类似的东西使其适合为其保留的空间。现在，当您缩放到元素时，分辨率会翻倍。

另一种选择是使用 SVG 图形或类似的与分辨率无关的内容进行绘图。这是一个使用带有 SVG 的 Zoomooz 的网站： http://www.parti-socialiste.fr/bilan-sarkozy/

【讨论】：