拖动全景 bg 图像并对罗盘箭头产生影响

如何解决拖动全景 bg 图像并对罗盘箭头产生影响

当我向左或向右拖动背景图像时，也会对旋转 360 度的罗盘图标产生影响。它在第一个周期工作（有点）。但不是在第二个或第三个等等。在第一个周期之后，指南针增加了一个新的差距。所以 0 到 360 不匹配。拖动循环未从开始处结束。

我想我错过了计算旋转指南针图标的功能：

function setDegree(){
   const x = getCssData()
   const d = (360 / 5000) // 5000 is actual background image size.
   const r = (x - def.value) * d * -1;
   compass.value.style.transform = "rotate(" + r + "deg)"
}

为了更好地理解，我做了一个 sandbox。

P.S：我将背景图片和 compass.svg 上传到资产文件夹，但沙箱没有显示。仍在尝试修复图像路径...

解决方法

问题在于您没有考虑图像的缩放。

因为您使用的是指定比例，所以实际宽度未知。

background-size: auto 100%;

虽然无法提供一个简单可靠的解决方案，说明如何将其添加到您的脚本中，这可能需要更多的重构

你可以试试这个，它会使用计算出的高度来推断宽度 (w)

您只需要创建一个 ref const imgRef = ref() 并将其传递给父 <div id="panorama" ref="imgRef" ...

  function setDegree() {
    let w = Number(getComputedStyle(imgRef.value).height.replace("px",""))/650*5000;
    const x = getCssData();
    const d = 360 / w;
    const r = (x - def.value) * d * -1;
    compass.value.style.transform = "rotate(" + r + "deg)";
  }

请注意

您可以将您的资产文件夹移至公共文件夹并使用 /assets/...
为了更好的用户体验，将 mouseUp 处理程序放入设置中的窗口 window.addEventListener("mouseup",mouseUpHandler);（然后在 onUnmounted 处删除侦听器）