Как обновить координаты перемещения мыши при изменении размеров контейнера? - PullRequest
Новая
       10

Как обновить координаты перемещения мыши при изменении размеров контейнера?

1 голос
/ 14 мая 2019

У меня figure с ребенком img.Изображение большое и показывает поток UX.Я настроил взаимодействие, при котором нажатие на изображение будет увеличивать его в пределах figure, а использование mousemove с transform-origin позволяет перемещаться и просматривать все изображение, и это прекрасно работает.Теперь я делаю презентацию более захватывающей, расширяя этот полноэкранный режим figure по щелчку, что также работает, но проблема в том, что координаты mousemove явно изменились, и в тот момент, когда вы перемещаете / перемещаете курсор, изображение скачет /сдвигается при обновлении координат в новый контекст (figure при его измененных измерениях).

Код и ссылка Fiddle находятся ниже.

Последние попытки

Я попытался динамически вставить новый контейнер для изображения при щелчке, чтобы это было контекстом координат, но mousemove больше не работал.

Я также пытался настроить состояние .zoomed для figure для mousemove, что также не позволило работать mousemove.

HTML 

<div class="gallery-item-wrap">
  <figure class="zoom">
    <img src="https://picsum.photos/id/1040/1800/1000">
  </figure>
</div>

CSS 

body {
  margin: 0;
  padding: 0;
}

.gallery-item-wrap {
  width: 70vw;
  margin: 0 auto;
}

figure {
  margin: 0;
}

figure img {
  width: 100%;
  height: auto;
}

figure.zoomed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  overflow: hidden;
}

figure.zoomed img {
  transform: scale(2);
}

jQUERY 

$('.zoom').click(function () {
  $(this).toggleClass('zoomed');
});

$('.zoom')
.on('mousemove', function(e){
  $(this).children('.zoom img').css({'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
})

JSFIDDLE

https://jsfiddle.net/iraishere/w1pe7tjm/19/

Как восстановить текстовые координаты при изменении размеров контейнера изображения?

1 Ответ

0 голосов
/ 14 мая 2019

Решением может быть обновление координат после масштабирования изображения (в обратном вызове click после toggleClass) таким же образом, как и обработчик move.

Как это: 

$('.zoom').click(function(e) {
  $(this).toggleClass('zoomed');
  move(e, $(this));
});

$('.zoom')
  .on('mousemove', function(e) {
    move(e, $(this));
  })

function move(e, elm) {
  elm.children('.zoom img').css({
    'transform-origin': ((e.pageX - elm.offset().left) / elm.width()) * 100 + '% ' + ((e.pageY - elm.offset().top) / $(this).height()) * 100 + '%'
  });
}

https://jsfiddle.net/moshfeu/8mcu23tn/

...