JS实现图片拖拽、定点缩放、旋转（一）

2023-09-22 09:09:51

前言

在网页设计中，经常会遇到需要对图片进行拖拽、缩放、旋转等操作。这些操作可以使用JavaScript来实现。JavaScript是一个功能强大的脚本语言，可以实现各种各样的网页交互效果。

图片拖拽

图片拖拽是指可以通过鼠标或触控操作将图片从一个位置拖拽到另一个位置。

实现步骤

首先，需要获取图片元素。可以通过以下代码获取图片元素：

var img = document.getElementById("myImg");

然后，需要为图片元素添加事件监听器，监听鼠标或触控操作。

img.addEventListener("mousedown", function(event) {
  // 鼠标按下时触发
});

img.addEventListener("mousemove", function(event) {
  // 鼠标移动时触发
});

img.addEventListener("mouseup", function(event) {
  // 鼠标松开时触发
});

在鼠标按下事件处理函数中，需要获取鼠标按下时的位置。

var mouseX = event.clientX;
var mouseY = event.clientY;

在鼠标移动事件处理函数中，需要计算鼠标移动的距离。

var dx = event.clientX - mouseX;
var dy = event.clientY - mouseY;

然后，需要将鼠标移动的距离应用到图片元素的位置上。

img.style.left = img.offsetLeft + dx + "px";
img.style.top = img.offsetTop + dy + "px";

在鼠标松开事件处理函数中，需要清除鼠标按下事件和鼠标移动事件的事件监听器。

img.removeEventListener("mousedown", mouseDownHandler);
img.removeEventListener("mousemove", mouseMoveHandler);

效果演示

<img id="myImg" src="image.png" style="position: absolute;">

<script>
var img = document.getElementById("myImg");

img.addEventListener("mousedown", function(event) {
  var mouseX = event.clientX;
  var mouseY = event.clientY;

  img.addEventListener("mousemove", function(event) {
    var dx = event.clientX - mouseX;
    var dy = event.clientY - mouseY;

    img.style.left = img.offsetLeft + dx + "px";
    img.style.top = img.offsetTop + dy + "px";
  });
});

img.addEventListener("mouseup", function(event) {
  img.removeEventListener("mousemove", mouseMoveHandler);
});
</script>

图片缩放

图片缩放是指可以通过鼠标或触控操作改变图片的大小。

实现步骤

首先，需要获取图片元素。可以通过以下代码获取图片元素：

var img = document.getElementById("myImg");

然后，需要为图片元素添加事件监听器，监听鼠标或触控操作。

img.addEventListener("mousedown", function(event) {
  // 鼠标按下时触发
});

img.addEventListener("mousemove", function(event) {
  // 鼠标移动时触发
});

img.addEventListener("mouseup", function(event) {
  // 鼠标松开时触发
});

在鼠标按下事件处理函数中，需要获取鼠标按下时的位置。

var mouseX = event.clientX;
var mouseY = event.clientY;

在鼠标移动事件处理函数中，需要计算鼠标移动的距离。

var dx = event.clientX - mouseX;
var dy = event.clientY - mouseY;

然后，需要将鼠标移动的距离应用到图片元素的大小上。

img.style.width = img.offsetWidth + dx + "px";
img.style.height = img.offsetHeight + dy + "px";

在鼠标松开事件处理函数中，需要清除鼠标按下事件和鼠标移动事件的事件监听器。

img.removeEventListener("mousedown", mouseDownHandler);
img.removeEventListener("mousemove", mouseMoveHandler);

效果演示

<img id="myImg" src="image.png" style="position: absolute;">

<script>
var img = document.getElementById("myImg");

img.addEventListener("mousedown", function(event) {
  var mouseX = event.clientX;
  var mouseY = event.clientY;

  img.addEventListener("mousemove", function(event) {
    var dx = event.clientX - mouseX;
    var dy = event.clientY - mouseY;

    img.style.width = img.offsetWidth + dx + "px";
    img.style.height = img.offsetHeight + dy + "px";
  });
});

img.addEventListener("mouseup", function(event) {
  img.removeEventListener("mousemove", mouseMoveHandler);
});
</script>

图片旋转

图片旋转是指可以通过鼠标或触控操作改变图片的角度。

实现步骤

首先，需要获取图片元素。可以通过以下代码获取图片元素：

var img = document.getElementById("myImg");

然后，需要为图片元素添加事件监听器，监听鼠标或触控操作。

img.addEventListener("mousedown", function(event) {
  // 鼠标按下时触发
});

img.addEventListener("mousemove", function(event) {
  // 鼠标移动时触发
});

img.addEventListener("mouseup", function(event) {
  // 鼠标松开时触发
});

在鼠标按下事件处理函数中，需要获取鼠标按下时的位置。

var mouseX = event.clientX;
var mouseY = event.clientY;

在鼠标移动事件处理函数中，需要计算鼠标移动的距离和角度。

var dx = event.clientX - mouseX;
var dy = event.clientY - mouseY;

var angle = Math.atan2(dy, dx);

然后，需要将鼠标移动的距离和角度应用到图片元素的样式上。

img.style.transform = "rotate(" + angle + "rad)";

在鼠标松开事件处理函数中，需要清除鼠标按下事件和鼠标移动事件的事件监听器。

img.removeEventListener("mousedown", mouseDownHandler);
img.removeEventListener("mousemove", mouseMoveHandler);

效果演示

<img id="myImg" src="image.png" style="position: absolute;">

<script>
var img = document.getElementById("myImg");

img.addEventListener("mousedown", function(event) {
  var mouseX = event.clientX;
  var mouseY = event.clientY;

  img.addEventListener("mousemove", function(event) {
    var dx = event.clientX - mouseX;
    var dy = event.clientY - mouseY;

    var angle = Math.atan2(dy, dx);

    img.style.transform = "rotate(" + angle + "rad)";
  });
});

img.addEventListener("mouseup", function(event) {
  img.removeEventListener("mousemove", mouseMoveHandler);
});
</script>