jQuery.Panzoom проблема при использовании опции $set

У меня возникла проблема при попытке увеличить координаты фокуса при использовании опции $set в Panzoom. Мой проект требует, чтобы родительский элемент мог панорамировать и масштабировать (используя фокус) дочерний элемент. Если я включу Panzoom на родительском элементе и использую опцию $set для дочернего элемента, панорамирование работает нормально, но масштабирование прерывается, так как координаты полностью отключены.

Если я включаю Panzoom на дочернем элементе, панорамирование и масштабирование будут работать нормально, однако я не могу панорамировать, если дочерний элемент, если дочерний элемент меньше родительского, и я пытаюсь панорамировать пустую область в родительском элементе. Мне нужно, чтобы дочерний элемент был полностью масштабируемым и не ограничивался родителем, поэтому я использовал опцию $set. Я не уверен, хорошо ли я объясняю себя.

<div id="parent">
  <div id="child">
    <img src="https://spunmonkey.com/wp-content/uploads/2015/06/google-chrome-faster.png" alt="" title="" />
  </div>
</div>

// Panzoom
$panzoom = $('#child').panzoom({
  minScale: 0.2,
  maxScale: 3,
  increment: 0.1,
  rangeStep: 0.1,
  which: 1,
  //$set: $('#child'),
});

// Detect mousewheel on the parent
$('#parent').mousewheel(function(e, delta) {

  // Prevent the default action
  e.preventDefault();

  // Set the zoomOut flag
  var zoomOut = (delta ? delta < 0 : delta > 0);

  // Zoom the tree
  $panzoom.panzoom('zoom', zoomOut, {
    increment: 0.1,
    animate: false,
    focal: e
  });

});

body {
  margin: 0;
  padding: 0;
  background: #000;
}

#parent {
  position: relative;
  margin: 20px;
  width: 480px;
  height: 480px;
  background: #F00;
  overflow: hidden;
}

#child {
  position: absolute;
  top: 0;
  left: 0;
  background: #0FF;
}

#child img {
  display: block;
}

Вот ссылка на jsFiddle: https://jsfiddle.net/christiancourtois/yLg6ywra/3/

Если вы установите panzoom для дочернего элемента и удалите параметр $set, он будет работать отлично, за исключением упомянутой выше проблемы панорамирования. Мне нужно, чтобы родительский элемент (красный фон) был панорамируемым.

Если у кого-то есть понимание координационных координат, чтобы сделать это, это было бы очень признательно. Заранее спасибо.

0 ответов

Другие вопросы по тегам