0

when I drag the background image to left or right, also making effect on compass icon which is rotating 360deg. It's working (kind of) at very first cycle. But not on second or third etc.. after the first cycle compass is adding a new gap. So 0 to 360 not matching. Dragging cycle not finishes where it starts.

I think I miss calculate on the function where I rotate compass icon:

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)"
}

For better understanding I made a sandbox.

P.S: I uploaded the background image and compass.svg into assets folder, but sandbox doesn't showing. still trying to fix image path...

firefly
  • 876
  • 2
  • 15
  • 42

1 Answers1

1

The issue is that you're not taking into account the scaling of the image.

Because you are assigning the scale using, the actual width is not known.

background-size: auto 100%;

Can't offer a simple and reliable solution of how to add that to your script though, this will likely need more restructuring

You can try this, which will use the computed height to infer the width (w)

you just need to create a ref const imgRef = ref() and pass it to the parent <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)";
  }

Alos note that

  • you can move your assets folder into public and use /assets/...
  • for better ux, put the mouseUp handler into window window.addEventListener("mouseup", mouseUpHandler); in setup (and then remove listener at onUnmounted)
Daniel
  • 34,125
  • 17
  • 102
  • 150
  • check out [this answer](https://stackoverflow.com/a/30000591/197546) for a more detailed calculation of background image width that doesn't hard-code the width and height – Daniel Jul 08 '21 at 17:29
  • the simple calculating of `650*5000` worked, thank you. Also, yes now i am getting width & height dynamically, not hard coding it like a caveman :) – firefly Jul 09 '21 at 01:08