コンテナに限定され、アスペクト比と中央表示を維持しながら、画像のドラッグとズームをJavaScriptで実装するにはどうすればよいですか?-jsチュートリアル-php.cn

コンテナに限定され、アスペクト比と中央表示を維持しながら、画像のドラッグとズームをJavaScriptで実装するにはどうすればよいですか?

WBOY

リリース： 2023-10-20 13:34:03

オリジナル

1418 人が閲覧しました

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

JavaScript コンテナに限定され、アスペクト比と中央表示を維持しながら画像のドラッグとズームを実装するにはどうすればよいですか?

現代の Web 開発では、コンテナ内での画像のドラッグ、拡大縮小、制限は非常に一般的な要件です。今日は、画像のアスペクト比と中央表示を維持しながら、JavaScript を使用してこの機能を実装する方法を学びます。

まず、画像とコンテナを表示するための HTML ページが必要です。 HTML ドキュメントには、画像を表示するための HTML 要素とコンテナ要素を必ず含めてください。以下に示すように:

<!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>

ログイン後にコピー

次に、JavaScript を使用して画像のドラッグとズーム機能を実装します。まず、イメージ要素とコンテナ要素を取得し、いくつかのイベントリスナーを追加する必要があります。

// 获取图片元素和容器元素
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})`;
});

ログイン後にコピー

この JavaScript コードの機能は、マウスが押されたときの現在のマウス位置を記録することです。そして、マウスが移動すると、マウスの位置の変化が計算され、その変化値に基づいて画像の位置が更新される。次に、マウスを放したら、ドラッグを停止します。最後に、マウスがスクロールすると、スクロールされた deltaY 値に基づいてズーム率が計算され、画像のズームが更新されます。

このようにして、コンテナ内で画像をドラッグ、拡大縮小、制限する機能が実現されます。同時に、画像もアスペクト比を維持し、中央に配置されます。

この記事が、JavaScript を使用してコンテナ内で画像をドラッグ、ズーム、制限する方法を理解するのに役立つことを願っています。ご質問がございましたら、お気軽にお問い合わせください。

以上がコンテナに限定され、アスペクト比と中央表示を維持しながら、画像のドラッグとズームをJavaScriptで実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。