Panzoom 库，测量 div 之间的距离，getBoundingClientRect()

问题描述

我在 div 中有两个图像：

var zoomWraper1 = document.querySelector(".zoom-wrapper1");
var zoomWraper2 = document.querySelector(".zoom-wrapper2");
var zoomImg1 = document.querySelector(".zoom-area1 img");
var zoomImg2 = document.querySelector(".zoom-area2 img");

var panzoom1 = Panzoom(document.querySelector(".zoom-area1"),{
  maxScale: 6
});
zoomWraper1.addEventListener("wheel",panzoom1.zoomWithWheel);

var panzoom2 = Panzoom(document.querySelector(".zoom-area2"),{
  maxScale: 6
});
zoomWraper2.addEventListener("wheel",panzoom2.zoomWithWheel);

panzoom1.pan(0,0);
panzoom1.zoom(300 / document.querySelector(".zoom-area1 img").height);

panzoom2.pan(0,0);
panzoom2.zoom(300 / document.querySelector(".zoom-area2 img").width);

movePhoto = () => {
  panzoom2.pan(
    0,-(
      zoomImg2.getBoundingClientRect().top -
      zoomWraper2.getBoundingClientRect().top
    )
  );
};

body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
}

button {
  margin-right: 20px;
}

.main-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.zoom-wrapper1 {
    width: 300px;
    height: 300px;
    border: 5px solid #1c6ea4;
}

.zoom-wrapper2 {
    width: 300px;
    height: 300px;
    border: 5px solid #1c6ea4;
}

<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
  <button onclick="movePhoto()">Move right photo with data from getBoundingClientRect()</button>
    <div class="main-container">
        <div class="zoom-wrapper1">
            <div class="zoom-area1">
                <img src="https://images.unsplash.com/photo-1552288092-76e7d732366c?ixid=MnwxMjA3fdb8MHxzZWFyY2h8MXx8cGFub3JhbWljfGVufdb8fdb8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80">
            </div>
        </div>
        <div class="zoom-wrapper2">
            <div class="zoom-area2">
                <img src="https://i2.wp.com/digital-photography-school.com/wp-content/uploads/2013/08/1.-Moraine_final.jpg">
            </div>
        </div>
    </div>
    <script src="https://timmywil.com/panzoom/demo/panzoom.js"></script>
    <script src="script.js"></script>
</body>

</html>

https://codepen.io/reti/pen/jOmObwJ

我使用 Panzoom 库来平移和缩放图像。我想以 px 为单位测量这些距离：

https://pasteboard.co/K8HrjFM.png

一个好方法似乎是 getBoundingClientRect()。我只是在测试这个，但它发生了我不明白的事情。例如，我试图将 div .zoom-area2 移动到包装器的边缘（连接到 movePhoto() 函数的按钮）但是，顶部值不正确，因为有一个中断：

https://pasteboard.co/K8HmZQs.png

为什么会这样？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript panzoom