js实现图片旋转 js滚动鼠标中间对图片放大缩小

网络编程 2024/7/27 佚名

3 2 1

从开通博客园到今天，有两个多月了。我发现之前没有开通博客记录自己所做的东西，真是后悔啊。

现在一点一点把自己所做的功能以博客的形式记录下来，一方面可以给大家分享，大家一起学习，同时自己也从新回顾一下。

这个图片放大，缩小和旋转，我采用canvas画布这个来做的，核心点就在js中去控制鼠标状态及事件。

我先给大家展示一下效果图。

鼠标移到画布范围内就会出现下方的操作栏，每次以90度选择。

1.在引入js的时候一定要注意了，由于在使用画布canvas时，需要等图片加载完成后才可以执行画布里的内容。js要在最后引入。

2.js中要在图片加载完成之后在方法

主要的地方就是这个啦，其它就是js方法了，我就不一一解释了，有js功底的能看懂，如果有地方不懂，或者需要改进的就在下面评论出来，大家一起学习。

下面我就贴出代码了，需要演示项目源码的小伙伴也评论出来，我把演示项目发出来。

这是目录结构，也不需要什么jar包。image下面就是图片啦。

html页面代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js">

css样式代码


@CHARSET "UTF-8";
 
* {
 margin: 0px;
 padding: 0px;
}
 
#pandiv {
 width: 700px;
 height: 500px;
}
 
#control {
 background: #ccc;
 opacity: 0.7;
 width: 200px;
 height: 30px;
 display: none;
 padding-top: 5px;
 position: absolute;
 left: 250px;
 top: 450px;
}
 
#canvas {
 border: 1px solid black;
}
 
#left {
 float: left;
 display: block;
}
 
#right {
 float: right;
 display: block;
}



核心重点js代码：


/**
 *
 */
var canvas = document.getElementById("canvas");
var pandiv = document.getElementById("pandiv");
var cxt = canvas.getContext("2d");
var control = document.getElementById("control");
var imgScale = 1;
var img;
var imgX = 0;
var imgY = 0;
var currentRate = 0;
/**当前的旋转角度*/
var mouseDownLocation;
var isMouseDown = false;
 
window.onload = function() {
 var bbox = canvas.getBoundingClientRect();
 var imageUrl = $("#pandiv>img").attr("src");
 img = new Image();
 img.src = imageUrl;
 img.id = "pic";
 
 loadImage();
 drawImage();
}
 
function reLoadImage() {
 loadImage();
}
function loadImage() {
 if (img.width <= canvas.width && img.height <= canvas.height) {
  imgX = (canvas.width - img.width * imgScale) / 2
  imgY = (canvas.height - img.height * imgScale) / 2;
 } else {
  var ratio = img.width / img.height;
  widthTime = img.width / canvas.width;
  heightTime = img.height / canvas.height;
 
  if (widthTime > heightTime) {
   img.width = canvas.width;
 
   img.height = canvas.width / ratio;
  } else {
   img.height = canvas.height;
   img.width = canvas.height * ratio;
 
  }
 
  imgX = (canvas.width - img.width * imgScale) / 2
  imgY = (canvas.height - img.height * imgScale) / 2
 }
}
 
//var backGroundColor = ['#223344', '#445566', '#667788', '#778899'];
//var backGroundColorIndex = 0;
function drawImage() {
 
 var bbox = canvas.getBoundingClientRect();
 
 //cxt.clearRect(0, 0, canvas.width, canvas.height);
 cxt.clearRect(-200, -200, canvas.width * 2, canvas.height * 2);
 
 // cxt.fillStyle = backGroundColor[backGroundColorIndex++ % backGroundColor.length];
 //cxt.fillRect(0, 0, canvas.width, canvas.height);
 
 cxt.drawImage(img, imgX, imgY, img.width * imgScale, img.height * imgScale);
}
 
// windowToCanvas此方法用于鼠标所在点的坐标切换到画布上的坐标
function windowToCanvas(canvas, x, y) {
 var bbox = canvas.getBoundingClientRect();
 return {
  x : x - bbox.left - (bbox.width - canvas.width) / 2,
  y : y - bbox.top - (bbox.height - canvas.height) / 2
 };
}
 
function isPointInImageArea(point) {
 return true;
 //return (point.x > imgX && point.x < imgX + img.width * imgScale &&
 //point.y > imgY && point.y < imgY + img.height * imgScale);
}
function isPointInCanvasArea(point) {
 return true;
 //var bbox = canvas.getBoundingClientRect();
 //return (point.x > bbox.left && point.x < bbox.right && point.y > bbox.//top && point.y < bbox.bottom);
}
function isDivArea(point) {
 return true;
 //var bbox =pandiv.getBoundingClientRect();
 //return (point.x > bbox.left && point.x < bbox.right && point.y > bbox.//top && point.y < bbox.bottom);
}
 
canvas.onmousewheel = canvas.onwheel = function(event) {
 
 var pos = windowToCanvas(canvas, event.clientX, event.clientY);
 event.wheelDelta = event.wheelDelta "放大");
  if (isPointInImageArea(pos)) {
   imgScale *= 2;
   //imgX = imgX * 2 - pos.x;
   // imgY = imgY * 2 - pos.y;
   imgX = (canvas.width - img.width * imgScale) / 2
   imgY = (canvas.height - img.height * imgScale) / 2
  } else {
   imgScale *= 2;
   //imgX = (canvas.width - img.width * imgScale) / 2;
   //imgY = (canvas.height - img.height * imgScale) / 2;
   imgX = (canvas.width - img.width * imgScale) / 2
   imgY = (canvas.height - img.height * imgScale) / 2
  }
 } else {
  //alert("缩小");
  if (isPointInImageArea(pos)) {
   imgScale /= 2;
   //imgX = imgX * 0.5 + pos.x * 0.5;
   // imgY = imgY * 0.5 + pos.y * 0.5;
   imgX = (canvas.width - img.width * imgScale) / 2
   imgY = (canvas.height - img.height * imgScale) / 2
  } else {
   imgScale /= 2;
   // imgX = (canvas.width - img.width * imgScale) / 2;
   // imgY = (canvas.height - img.height * imgScale) / 2;
   imgX = (canvas.width - img.width * imgScale) / 2
   imgY = (canvas.height - img.height * imgScale) / 2
  }
 }
 
 drawImage();
 
 return false;
}
 
/**旋转angle度*/
function rateImage(angle) {
 currentRate = (currentRate + angle) % 360;
 
 cxt.clearRect(0, 0, canvas.width, canvas.height);
 //cxt.save();
 cxt.translate(canvas.width / 2, canvas.height / 2);
 cxt.save();
 cxt.rotate(angle * Math.PI / 180);
 cxt.translate(-canvas.width / 2, -canvas.height / 2);
 imgScale = 1;
 reLoadImage();
 
 drawImage();
 //cxt.restore();
}
 
/**鼠标按下*/
pandiv.onmousedown = function(event) {
 mouseDownLocation = windowToCanvas(canvas, event.clientX, event.clientY);
 if (isPointInImageArea(mouseDownLocation)) {
  isMouseDown = true;
  document.title = 'mouse down';
 }
}
/**鼠标弹起*/
document.body.onmouseup = function() {
 isMouseDown = false;
 canvas.style.cursor = "default";
 document.title = 'mouse up';
}
/**鼠标移动*/
pandiv.onmousemove = function(event) {
 if (isMouseDown) {
  canvas.style.cursor = "move";
  var newMouseLocation = windowToCanvas(canvas, event.clientX,
    event.clientY);
  if (isDivArea({
   x : event.clientX,
   y : event.clientY
  })) {
   var x = newMouseLocation.x - mouseDownLocation.x;
   var y = newMouseLocation.y - mouseDownLocation.y;
   mouseDownLocation = newMouseLocation;
   /**根据角度，计算图片偏移*/
   if (0 == currentRate) {
    imgX += x;
    imgY += y;
   } else if (90 == currentRate) {
    imgX += y;
    imgY -= x;
   } else if (180 == currentRate) {
    imgX -= x;
    imgY -= y;
   } else if (270 == currentRate) {
    imgX -= y;
    imgY += x;
   }
  } else {
   /** 鼠标移动至画布范围外，置鼠标弹起 */
   isMouseDown = false;
   canvas.style.cursor = "default";
   document.title = 'mouse up';
  }
  drawImage();
 }
}
pandiv.onmouseover = function() {
 //alert("1");
 control.style.display = "block";
 
}
canvas.onmouseout = function() {
 //alert("1");
 control.style.display = "none";
}　　



这就是实现这个图片旋转，放大，缩小的演示代码。
由于这几天在做一个切换图片的功能，点击上一页，下一页实现图片切换，这个功能以及快全部实现了，到时候我搭建一个框架的演示项目，来给大家展示图片切换上一张，下一张，也包括旋转，放大缩小功能。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,图片旋转,放大缩小

标签：

js,图片旋转,放大缩小

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“js实现图片旋转 js滚动鼠标中间对图片放大缩小”

js实现图片旋转 js滚动鼠标中间对图片放大缩小

暂无“js实现图片旋转 js滚动鼠标中间对图片放大缩小”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

20240727

js实现图片旋转 js滚动鼠标中间对图片放大缩小

js,图片旋转,放大缩小

Angular 2父子组件数据传递之@Input和@Output详解 (上)

vue2.X组件学习心得(新手必看篇)

评论“js实现图片旋转 js滚动鼠标中间对图片放大缩小”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

js实现图片旋转 js滚动鼠标中间对图片放大缩小

js,图片旋转,放大缩小

Angular 2父子组件数据传递之@Input和@Output详解 (上)

vue2.X组件学习心得(新手必看篇)

评论“js实现图片旋转 js滚动鼠标中间对图片放大缩小”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存