js實現圖片旋轉 js滾動鼠標中間對圖片放大縮小

2019-11-19 16:10:25

字體：大中小

來源：轉載

供稿：網友

從開通博客園到今天，有兩個多月了。我發現之前沒有開通博客記錄自己所做的東西，真是后悔啊。

現在一點一點把自己所做的功能以博客的形式記錄下來，一方面可以給大家分享，大家一起學習，同時自己也從新回顧一下。

這個圖片放大，縮小和旋轉，我采用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="../js/jquery.js"></script><link rel="stylesheet" type="text/css" href="../css/pictureCss.css" rel="external nofollow" /><link ></head><body><div id="pandiv">  <img src="../image/3.png" style="display: none;">  <canvas id="canvas" width="700" height="500" style="cursor: default;"> </canvas>  <div id="control" style="display: none;">  <img id="left" src="../image/left1.png" onclick="rateImage(270)">  <img id="right" src="../image/right1.png" onclick="rateImage(90)"> </div> </div> <script type="text/javascript" src="../js/pictureJs.js"></script></body></html>

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 ? event.wheelDelta   : (event.deltaY * (-40));  if (event.wheelDelta > 0) {  //alert("放大");  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";}

這就是實現這個圖片旋轉，放大，縮小的演示代碼。

由于這幾天在做一個切換圖片的功能，點擊上一頁，下一頁實現圖片切換，這個功能以及快全部實現了，到時候我搭建一個框架的演示項目，來給大家展示圖片切換上一張，下一張，也包括旋轉，放大縮小功能。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。

上一篇：Angular 2父子組件數據傳遞之@Input和@Output詳解 (上)

下一篇：vue2.X組件學習心得(新手必看篇)