当我向左或向右拖动背景图像时，也会对旋转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)"
}为了更好地理解，我制作了一个沙盒。
p、 s：我将背景图像和compass.svg上传到了assets文件夹中，但沙盒没有显示。仍在尝试修复图像路径。。。
1条答案
按热度按时间jhiyze9q1#
问题是您没有考虑图像的缩放。
由于是使用指定比例，因此实际宽度未知。
但是，无法提供一个简单可靠的解决方案，说明如何将其添加到脚本中，这可能需要更多的重构
您可以尝试此操作，它将使用计算的高度推断宽度(
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)";
}