javascript - 使用 CSS 变换缩放 容器

Question

在元素中bigpicture.js/live demo ，我在缩放时替换每个元素(通过移动它们并更改它们的字体大小)。它有效。

现在我想测试 CSS' nice transform: scale(...);功能代替。

在接下来的测试中，我想:

• 放大整个<div id="container">当用户点击时。
• 当用户按住 CTRL 并单击时缩小。

问题是无论我们点击哪里，缩放都是以同样的方式完成的。如何缩放点击的点？(好像它已经适用于我当前的 bigpicture.js 实现)。

var container = document.getElementById("container"), wrapper = document.getElementById("wrapper");
var zoom = 1;

wrapper.onclick = function (e) {
    zoom *= e.ctrlKey ? 1/1.2 : 1.2;    
    container.style.transform = "scale(" + zoom + ")";
}

<style>
#wrapper { position:absolute; top:0px; left:0px; width:1000px; height:600px; background-color: #AAAABB; }
#container { position:absolute; top:100px; left:100px; width:600px; height:400px; background-color: grey; transition-duration: 0.3s; }
#text { position:absolute; top:100px; left:100px; font-size:30px; }
</style>

<div id="wrapper">
  <div id="container">
    <div id="text">Test<div>
  </div>
</div>  

重要提示:您绝对需要进入整页以了解它的内容。

注意:我用 transform-origin 做了一些尝试, 不成功。

Answer 1

您还需要将当前缩放应用于屏幕坐标:

var container = document.getElementById("container"), wrapper = document.getElementById("wrapper"), marker = document.getElementById("marker");
var zoom = 1;

wrapper.onclick = function (e) {
    var x = e.clientX - container.getBoundingClientRect().left;
    var y = e.clientY - container.getBoundingClientRect().top;
    console.log(x,y)
    x /= zoom;
    y /= zoom;
    zoom *= e.ctrlKey ? 1/1.2 : 1.2;
    container.style.transform = "scale(" + zoom + ")";
    container.style.transformOrigin = x+"px "+y+"px";
    marker.style.top = (y-2)+'px';
    marker.style.left = (x-2)+'px';
}

<style>
#wrapper { position:absolute; top:0px; left:0px; width:1000px; height:600px; background-color: #AAAABB; }
#container { position:absolute; top:100px; left:100px; width:600px; height:400px; background-color: grey; transition-duration: 0.3s; }
#text { position:absolute; top:100px; left:100px; font-size:30px; }
#marker { position:absolute; width:4px; height:4px; background-color:red; }
</style>

<div id="wrapper">
  <div id="container">
    <div id="marker"></div>
    <div id="text">Test<div>
  </div>
</div>