컨테이너로 제한되고 종횡비와 중앙 표시를 유지하면서 JavaScript로 이미지 드래그 및 확대/축소를 구현하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

컨테이너로 제한되고 종횡비와 중앙 표시를 유지하면서 JavaScript로 이미지 드래그 및 확대/축소를 구현하는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-10-20 13:34:03

원래의

1388명이 탐색했습니다.

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

JavaScript 컨테이너로 제한되고 화면비와 중앙 표시를 유지하면서 이미지를 드래그하고 확대/축소하는 방법은 무엇입니까?

현대 웹 개발에서는 컨테이너 내에서 이미지를 드래그하고 크기를 조정하고 제한하는 것이 매우 일반적인 요구 사항입니다. 오늘 우리는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!