Div с фоновым изображением, которое может масштабировать и панорамировать. Как правильно позиционировать «маркеры»? - PullRequest
Новая
       7

Div с фоновым изображением, которое может масштабировать и панорамировать. Как правильно позиционировать «маркеры»?

0 голосов
/ 06 ноября 2019

У меня есть div с большим фоновым изображением. Я могу панорамировать и масштабировать это изображение, используя background-position: {x}% {y}% (0-100) и background-size:{z}% (100-200). Помимо этого div, я хочу расположить несколько маркеров. Как я могу рассчитать положение этих маркеров при изменении положения фонового изображения?

Я использую Svelte и у меня есть Repl здесь https://svelte.dev/repl/ec926f6014a447b18a9f599b81e0f8cd?version=3.12.1

  const pulsePos = (d,x,y,z) => {

  /// x,y,z == background image positions (%)
  /// d == object with marker position (%)

       const xpos = d.x * z;
       const ypos = d.y * z;
       return {x:xpos, y:ypos}
  };

Маркеры выглядят следующим образом. 

    <div
      class="pulse"
      style={` 
      transform: translate(${pulsePos(position,x,y,z).x}%, ${pulsePos(position,x,y,z).y}%);
      `} />

Фоновое изображение 

 <div
    style="background-image:url({url}); background-position: {x}% {y}%;
    background-size:{z}%; transition: all {duration}s linear;"
    class="imageHolder"/>

Если я умножу положение маркера на значение размера фона, я получу маркер, который останется на месте при «масштабировании». Но я не могу понять, как заставить маркер следовать фоновому изображению при изменении положения фона. Я потерян!

...