使用键盘放大会将居中的图像向右移动

Question

这是

的延续

当我点击并放大图片时，它会将居中的图片向右推，我怎样才能强制它缩放而不是向右移动

const element = document.querySelector('.image-inner-wrapper');

const zoomLevels = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3];
let currentZoomLevel = zoomLevels[4];
const text = document.querySelector('#text');

let panZoomController = panzoom(element, {
  autoCenter: true,
  beforeWheel: function(e) {
    // allow wheel-zoom Disabled
    return true;
  }
});

const setText = (input) => {
  text.innerText = input;
};

const zoom = () => {
  const isSmooth = false;
  const scale = currentZoomLevel;
  if (scale) {
    const transform = panZoomController.getTransform();
    const deltaX = transform.x;
    const deltaY = transform.y;
    const offsetX = scale + deltaX;
    const offsetY = scale + deltaY;

    if (isSmooth) {
      panZoomController.smoothZoom(0, 0, scale);
    } else {
      panZoomController.zoomAbs(offsetX, offsetY, scale);
    }
  }
};


const zoomIn = () => {
  const idx = zoomLevels.indexOf(currentZoomLevel);

  // If next element exists
  if (typeof zoomLevels[idx + 1] !== 'undefined') {
    currentZoomLevel = zoomLevels[idx + 1];
  }

  if (currentZoomLevel === 1) {
    panZoomController.moveTo(0, 0);
    panZoomController.zoomAbs(0, 0, 1);
  } else {
    zoom();
  }
  setText(currentZoomLevel * 100 + '%');

};

const zoomOut = () => {
  const idx = zoomLevels.indexOf(currentZoomLevel);

  //if previous element exists
  if (typeof zoomLevels[idx - 1] !== 'undefined') {
    currentZoomLevel = zoomLevels[idx - 1];
  }


  if (currentZoomLevel === 1) {
    panZoomController.moveTo(0, 0);
    panZoomController.zoomAbs(0, 0, 1);
  } else {
    zoom();
  }

  setText(currentZoomLevel * 100 + '%');
};

.overflow-hidden {
  overflow: hidden !important;
  border: 3px solid red;
}

img {
  display: table;
  margin: 0 auto;
}

<div class="overflow-hidden">

  <div class="image-inner-wrapper">
    <img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">

  </div>

</div>




<br/>
<button onclick="zoomOut()">-</button>
<span id="text">100%</span>
<button onclick="zoomIn()">+</button>


<script src="https://unpkg.com/panzoom@8.1.0/dist/panzoom.min.js"></script>

Answer 1

我相信这里的技巧是获取元素的新宽度，将其除以二，并将其设置为 offsetX 坐标

zoom()函数下...

    const offsetX = element.offsetWidth / 2;

const element = document.querySelector('.image-inner-wrapper');

const zoomLevels = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3];
let currentZoomLevel = zoomLevels[4];
const text = document.querySelector('#text');

let panZoomController = panzoom(element, {
  beforeWheel: function(e) {
    // allow wheel-zoom Disabled
    return true;
  }
});

const setText = (input) => {
  text.innerText = input;
};

const zoom = () => {
  console.log(element.offsetWidth);
  const isSmooth = false;
  const scale = currentZoomLevel;
  if (scale) {
    const transform = panZoomController.getTransform();
    const deltaX = transform.x;
    const deltaY = transform.y;
    const offsetX = element.offsetWidth / 2;
    const offsetY = scale + deltaY;

    if (isSmooth) {
      panZoomController.smoothZoom(0, 0, scale);
    } else {
      panZoomController.zoomAbs(offsetX, offsetY, scale);
    }
  }
};


const zoomIn = () => {
  const idx = zoomLevels.indexOf(currentZoomLevel);

  // If next element exists
  if (typeof zoomLevels[idx + 1] !== 'undefined') {
    currentZoomLevel = zoomLevels[idx + 1];
  }

  if (currentZoomLevel === 1) {
    panZoomController.moveTo(0, 0);
    panZoomController.zoomAbs(0, 0, 1);
  } else {
    zoom();
  }
  setText(currentZoomLevel * 100 + '%');

};

const zoomOut = () => {
  const idx = zoomLevels.indexOf(currentZoomLevel);

  //if previous element exists
  if (typeof zoomLevels[idx - 1] !== 'undefined') {
    currentZoomLevel = zoomLevels[idx - 1];
  }


  if (currentZoomLevel === 1) {
    panZoomController.moveTo(0, 0);
    panZoomController.zoomAbs(0, 0, 1);
  } else {
    zoom();
  }

  setText(currentZoomLevel * 100 + '%');
};

.overflow-hidden {
  overflow: hidden !important;
  border: 3px solid red;
}

img {
  display: table;
  margin: 0 auto;
}

<div class="overflow-hidden">

  <div class="image-inner-wrapper">
    <img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">

  </div>

</div>




<br/>
<button onclick="zoomOut()">-</button>
<span id="text">100%</span>
<button onclick="zoomIn()">+</button>


<script src="https://unpkg.com/panzoom@8.1.0/dist/panzoom.min.js"></script>

使用键盘放大会将居中的图像向右移动

Zooming in with keyboard moves the centered image to right

html

javascript

css

panzoom