suchen

Heim >Web-Frontend >js-Tutorial >Wie implementiert man das Ziehen und Zoomen von Bildern in JavaScript, während man sich auf den Container beschränkt und gleichzeitig das Seitenverhältnis und die zentrierte Anzeige beibehält?

Wie implementiert man das Ziehen und Zoomen von Bildern in JavaScript, während man sich auf den Container beschränkt und gleichzeitig das Seitenverhältnis und die zentrierte Anzeige beibehält?

WBOY
WBOYOriginal
2023-10-20 13:34:031395Durchsuche

JavaScript 如何实现图片的拖动缩放同时限制在容器内且保持纵横比和居中显示？

JavaScript Wie kann ich Bilder ziehen und zoomen und dabei auf den Container beschränkt bleiben und das Seitenverhältnis und die zentrierte Anzeige beibehalten?

In der modernen Webentwicklung ist das Ziehen, Skalieren und Einschränken von Bildern innerhalb von Containern eine sehr häufige Anforderung. Heute lernen wir, wie man diese Funktion mithilfe von JavaScript implementiert und dabei das Seitenverhältnis und die zentrierte Anzeige des Bildes beibehält.

Zuerst benötigen wir eine HTML-Seite zur Anzeige von Bildern und Containern. Stellen Sie sicher, dass Sie ein HTML-Element zur Anzeige des Bildes und ein Containerelement in das HTML-Dokument einbinden. Wie unten gezeigt: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片拖动缩放</title>
  <style>
    /* 定义容器的样式 */
    .container {
      width: 500px;
      height: 500px;
      margin: 0 auto;
      border: 1px solid black;
      position: relative;
      overflow: hidden;
    }

    /* 定义图片的样式 */
    .image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <img class="image" src="image.jpg" alt="图片">
  </div>

  <script>
    // 在这里编写 JavaScript 代码
  </script>
</body>
</html>

Als nächstes werden wir JavaScript verwenden, um die Zieh- und Zoomfunktionen des Bildes zu implementieren. Zuerst müssen wir das Bildelement und das Containerelement abrufen und einige Ereignis-Listener hinzufügen. 

// 获取图片元素和容器元素
const image = document.querySelector('.image');
const container = document.querySelector('.container');

// 定义一些变量
let isDragging = false;
let prevX = 0;
let prevY = 0;
let scale = 1;

// 添加鼠标按下事件监听器
image.addEventListener('mousedown', e => {
  isDragging = true;
  prevX = e.clientX;
  prevY = e.clientY;
});

// 添加鼠标移动事件监听器
image.addEventListener('mousemove', e => {
  if (!isDragging) return;

  const deltaX = e.clientX - prevX;
  const deltaY = e.clientY - prevY;

  // 计算新的位置
  const newX = image.offsetLeft + deltaX;
  const newY = image.offsetTop + deltaY;

  // 将图片限制在容器内
  const maxX = container.clientWidth - image.clientWidth;
  const maxY = container.clientHeight - image.clientHeight;
  const clampedX = Math.max(0, Math.min(newX, maxX));
  const clampedY = Math.max(0, Math.min(newY, maxY));

  // 更新图片的位置
  image.style.left = clampedX + 'px';
  image.style.top = clampedY + 'px';

  prevX = e.clientX;
  prevY = e.clientY;
});

// 添加鼠标松开事件监听器
image.addEventListener('mouseup', () => {
  isDragging = false;
});

// 添加鼠标滚动事件监听器
container.addEventListener('wheel', e => {
  e.preventDefault();

  // 通过滚动的 deltaY 值来计算缩放比例
  const deltaScale = 1 - e.deltaY * 0.01;

  // 限制缩放比例的范围
  scale = Math.max(0.1, Math.min(scale * deltaScale, 10));

  // 更新图片的缩放
  image.style.transform = `scale(${scale})`;
});

Die Funktion dieses JavaScript-Codes besteht darin, die aktuelle Mausposition aufzuzeichnen, wenn die Maus gedrückt wird. Wenn sich dann die Maus bewegt, wird die Änderung der Mausposition berechnet und die Position des Bildes basierend auf dem Änderungswert aktualisiert. Hören Sie dann mit dem Ziehen auf, wenn Sie die Maus loslassen. Wenn die Maus schließlich scrollt, wird die Skalierung basierend auf dem gescrollten DeltaY-Wert berechnet und die Skalierung des Bildes aktualisiert.

Auf diese Weise werden die Funktionen des Ziehens, Skalierens und Eingrenzens von Bildern innerhalb des Containers realisiert. Gleichzeitig behält das Bild sein Seitenverhältnis bei und ist zentriert.

Ich hoffe, dieser Artikel hilft Ihnen zu verstehen, wie Sie mit JavaScript Bilder innerhalb eines Containers ziehen, zoomen und einschränken. Wenn Sie Fragen haben, können Sie diese gerne stellen.

Das obige ist der detaillierte Inhalt vonWie implementiert man das Ziehen und Zoomen von Bildern in JavaScript, während man sich auf den Container beschränkt und gleichzeitig das Seitenverhältnis und die zentrierte Anzeige beibehält?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html 事件
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie implementiert JavaScript die QR-Code-Generierungsfunktion für Bilder?Nächster Artikel：Wie implementiert JavaScript die QR-Code-Generierungsfunktion für Bilder?

In Verbindung stehende Artikel

Mehr sehen