时间戳

首页 > 解决方案 > 拖动全景bg图像并对指南针箭头产生影响

javascript - 拖动全景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)"
}

为了更好地理解我做了一个沙箱。

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

标签： javascriptvuejs3

解决方案

问题是您没有考虑图像的缩放比例。

因为您正在使用分配比例，所以实际宽度是未知的。

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 删除侦听器）

推荐阅读