返回

用js实现图片拖拽、定点缩放、旋转，玩转图片交互

前端

在上一篇文章中，我们讲解了如何用js实现图片的拖拽功能，本篇将继续深入探讨如何实现图片的定点缩放和旋转，进一步提升图片交互体验。

定点缩放

定点缩放是指图片围绕某一点进行缩放，同时保持图片的原始宽高比。实现该功能，我们需要在原有的拖拽基础上进行改造。

HTML部分

<div id="image-container">
  <img id="image" src="image.png" alt="Image" />
  <div id="scale-point"></div>
</div>

添加一个<div>元素作为缩放点，它的位置将作为缩放的中心点。

CSS部分

#scale-point {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #ccc;
  border: 1px solid #000;
  border-radius: 50%;
  cursor: pointer;
}

设置缩放点的样式，使其可见并易于操作。

JS部分

const image = document.getElementById('image');
const scalePoint = document.getElementById('scale-point');
const imageContainer = document.getElementById('image-container');

let scaleOriginX, scaleOriginY;

scalePoint.addEventListener('mousedown', (e) => {
  scaleOriginX = e.clientX - image.offsetLeft;
  scaleOriginY = e.clientY - image.offsetTop;

  document.addEventListener('mousemove', scaleImage);
  document.addEventListener('mouseup', stopScaleImage);
});

function scaleImage(e) {
  const scaleX = e.clientX - scaleOriginX;
  const scaleY = e.clientY - scaleOriginY;

  image.style.transform = `scale(${scaleX / image.offsetWidth}, ${scaleY / image.offsetHeight})`;
}

function stopScaleImage() {
  document.removeEventListener('mousemove', scaleImage);
  document.removeEventListener('mouseup', stopScaleImage);
}

这个脚本记录缩放点的偏移量，并监听鼠标移动事件。在鼠标移动期间，计算图片缩放比例并应用到图片上，实现定点缩放。

旋转

旋转是指图片绕其中心点进行旋转。实现该功能，我们同样需要改造拖拽功能。

HTML部分

<div id="image-container">
  <img id="image" src="image.png" alt="Image" />
  <div id="rotate-handle"></div>
</div>

添加一个<div>元素作为旋转手柄，它的位置将作为旋转的中心点。

CSS部分

#rotate-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #ccc;
  border: 1px solid #000;
  border-radius: 50%;
  cursor: pointer;
}

设置旋转手柄的样式，使其可见并易于操作。

JS部分

const image = document.getElementById('image');
const rotateHandle = document.getElementById('rotate-handle');
const imageContainer = document.getElementById('image-container');

let rotateOriginX, rotateOriginY;

rotateHandle.addEventListener('mousedown', (e) => {
  rotateOriginX = e.clientX - image.offsetLeft;
  rotateOriginY = e.clientY - image.offsetTop;

  document.addEventListener('mousemove', rotateImage);
  document.addEventListener('mouseup', stopRotateImage);
});

function rotateImage(e) {
  const rotateX = e.clientX - rotateOriginX;
  const rotateY = e.clientY - rotateOriginY;

  const angle = Math.atan2(rotateY, rotateX) * (180 / Math.PI);

  image.style.transform = `rotate(${angle}deg)`;
}

function stopRotateImage() {
  document.removeEventListener('mousemove', rotateImage);
  document.removeEventListener('mouseup', stopRotateImage);
}

这个脚本记录旋转手柄的偏移量，并监听鼠标移动事件。在鼠标移动期间，计算图片旋转角度并应用到图片上，实现图片旋转。

结束语

通过本文的讲解，我们完成了图片的定点缩放和旋转功能。这些交互功能将大大提升用户操作图片的体验，让图片交互更加丰富和实用。欢迎读者根据自己的需要进行拓展，打造更完善的图片交互方案。