Bagaimana untuk melaksanakan menyeret dan mengezum imej dalam JavaScript sambil dihadkan kepada bekas dan mengekalkan nisbah bidang dan paparan berpusat?-tutorial js-php.cn

Bagaimana untuk melaksanakan menyeret dan mengezum imej dalam JavaScript sambil dihadkan kepada bekas dan mengekalkan nisbah bidang dan paparan berpusat?

WBOY

Lepaskan： 2023-10-20 13:34:03

asal

1415 orang telah melayarinya

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

JavaScript Bagaimana hendak menyeret dan mengezum imej semasa dihadkan kepada bekas dan mengekalkan nisbah bidang dan paparan berpusat?

Dalam pembangunan web moden, menyeret, menskala dan mengehadkan imej dalam bekas adalah keperluan yang sangat biasa Hari ini kita akan belajar cara menggunakan JavaScript untuk melaksanakan fungsi ini sambil mengekalkan nisbah bidang imej dan paparan berpusat.

Pertama, kami memerlukan halaman HTML untuk memaparkan imej dan bekas. Pastikan anda memasukkan elemen HTML untuk memaparkan imej dan elemen bekas dalam dokumen HTML. Seperti yang ditunjukkan di bawah:

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

Salin selepas log masuk

Seterusnya, kami akan menggunakan JavaScript untuk melaksanakan fungsi menyeret dan mengezum imej. Pertama, kita perlu mendapatkan elemen imej dan elemen bekas dan menambah beberapa pendengar acara.

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

Salin selepas log masuk

Fungsi kod JavaScript ini adalah untuk merekodkan kedudukan semasa tetikus apabila tetikus ditekan. Kemudian, apabila tetikus bergerak, perubahan dalam kedudukan tetikus dikira, dan kedudukan gambar dikemas kini berdasarkan nilai perubahan. Kemudian, apabila tetikus dilepaskan, berhenti menyeret. Akhir sekali, apabila tetikus menatal, penskalaan dikira berdasarkan nilai deltaY yang ditatal dan penskalaan imej dikemas kini.

Dengan cara ini, fungsi menyeret, menskala dan mengehadkan imej dalam bekas direalisasikan. Pada masa yang sama, imej juga mengekalkan nisbah bidangnya dan berpusat.

Saya harap artikel ini akan membantu anda memahami cara menggunakan JavaScript untuk menyeret, mengezum dan mengehadkan imej dalam bekas. Jika anda mempunyai sebarang soalan, sila berasa bebas untuk bertanya.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan menyeret dan mengezum imej dalam JavaScript sambil dihadkan kepada bekas dan mengekalkan nisbah bidang dan paparan berpusat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!