js實(shí)現(xiàn)圖片旋轉(zhuǎn)js滾動(dòng)鼠標(biāo)中間對(duì)圖片放大縮小

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

創(chuàng)新互聯(lián)公司于2013年開始，先為平?jīng)龅确?wù)建站，平?jīng)龅鹊仄髽I(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為平?jīng)銎髽I(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

現(xiàn)在一點(diǎn)一點(diǎn)把自己所做的功能以博客的形式記錄下來，一方面可以給大家分享，大家一起學(xué)習(xí)，同時(shí)自己也從新回顧一下。

這個(gè)圖片放大，縮小和旋轉(zhuǎn)，我采用canvas畫布這個(gè)來做的，核心點(diǎn)就在js中去控制鼠標(biāo)狀態(tài)及事件。

我先給大家展示一下效果圖。

js實(shí)現(xiàn)圖片旋轉(zhuǎn) js滾動(dòng)鼠標(biāo)中間對(duì)圖片放大縮小

鼠標(biāo)移到畫布范圍內(nèi)就會(huì)出現(xiàn)下方的操作欄，每次以90度選擇。

1.在引入js的時(shí)候一定要注意了，由于在使用畫布canvas時(shí)，需要等圖片加載完成后才可以執(zhí)行畫布里的內(nèi)容。js要在最后引入。

js實(shí)現(xiàn)圖片旋轉(zhuǎn) js滾動(dòng)鼠標(biāo)中間對(duì)圖片放大縮小

2.js中要在圖片加載完成之后在方法

js實(shí)現(xiàn)圖片旋轉(zhuǎn) js滾動(dòng)鼠標(biāo)中間對(duì)圖片放大縮小

主要的地方就是這個(gè)啦，其它就是js方法了，我就不一一解釋了，有js功底的能看懂，如果有地方不懂，或者需要改進(jìn)的就在下面評(píng)論出來，大家一起學(xué)習(xí)。

下面我就貼出代碼了，需要演示項(xiàng)目源碼的小伙伴也評(píng)論出來，我把演示項(xiàng)目發(fā)出來。

這是目錄結(jié)構(gòu)，也不需要什么jar包。image下面就是圖片啦。

js實(shí)現(xiàn)圖片旋轉(zhuǎn) js滾動(dòng)鼠標(biāo)中間對(duì)圖片放大縮小

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" >
  <canvas id="canvas" width="700" height="500" > </canvas>
  <div id="control" >
  <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;
}

核心重點(diǎn)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;
/**當(dāng)前的旋轉(zhuǎn)角度*/
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此方法用于鼠標(biāo)所在點(diǎn)的坐標(biāo)切換到畫布上的坐標(biāo)
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;
}
 
/**旋轉(zhuǎn)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();
}
 
/**鼠標(biāo)按下*/
pandiv.onmousedown = function(event) {
 mouseDownLocation = windowToCanvas(canvas, event.clientX, event.clientY);
 if (isPointInImageArea(mouseDownLocation)) {
  isMouseDown = true;
  document.title = 'mouse down';
 }
}
/**鼠標(biāo)彈起*/
document.body.onmouseup = function() {
 isMouseDown = false;
 canvas.style.cursor = "default";
 document.title = 'mouse up';
}
/**鼠標(biāo)移動(dòng)*/
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;
   /**根據(jù)角度，計(jì)算圖片偏移*/
   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 {
   /** 鼠標(biāo)移動(dòng)至畫布范圍外，置鼠標(biāo)彈起 */
   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";
}

這就是實(shí)現(xiàn)這個(gè)圖片旋轉(zhuǎn)，放大，縮小的演示代碼。

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前文章：js實(shí)現(xiàn)圖片旋轉(zhuǎn)js滾動(dòng)鼠標(biāo)中間對(duì)圖片放大縮小
分享路徑：http://aaarwkj.com/article4/ihhcie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站改版、網(wǎng)站收錄、品牌網(wǎng)站建設(shè)、搜索引擎優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

js實(shí)現(xiàn)圖片旋轉(zhuǎn)js滾動(dòng)鼠標(biāo)中間對(duì)圖片放大縮小