建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
js實(shí)現(xiàn)圖片旋轉(zhuǎn)js滾動鼠標(biāo)中間對圖片放大縮小
從開通博客園到今天，有兩個多月了。我發(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í)，同時自己也從新回顧一下。
這個圖片放大，縮小和旋轉(zhuǎn)，我采用canvas畫布這個來做的，核心點(diǎn)就在js中去控制鼠標(biāo)狀態(tài)及事件。
我先給大家展示一下效果圖。
鼠標(biāo)移到畫布范圍內(nèi)就會出現(xiàn)下方的操作欄，每次以90度選擇。
1.在引入js的時候一定要注意了，由于在使用畫布canvas時，需要等圖片加載完成后才可以執(zhí)行畫布里的內(nèi)容。js要在最后引入。
2.js中要在圖片加載完成之后在方法
主要的地方就是這個啦，其它就是js方法了，我就不一一解釋了，有js功底的能看懂，如果有地方不懂，或者需要改進(jìn)的就在下面評論出來，大家一起學(xué)習(xí)。
下面我就貼出代碼了，需要演示項(xiàng)目源碼的小伙伴也評論出來，我把演示項(xiàng)目發(fā)出來。
這是目錄結(jié)構(gòu)，也不需要什么jar包。image下面就是圖片啦。
html頁面代碼
Insert title here 
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)移動*/
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)移動至畫布范圍外，置鼠標(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)這個圖片旋轉(zhuǎn)，放大，縮小的演示代碼。
由于這幾天在做一個切換圖片的功能，點(diǎn)擊上一頁，下一頁實(shí)現(xiàn)圖片切換，這個功能以及快全部實(shí)現(xiàn)了，到時候我搭建一個框架的演示項(xiàng)目，來給大家展示圖片切換上一張，下一張，也包括旋轉(zhuǎn)，放大縮小功能。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
文章題目：js實(shí)現(xiàn)圖片旋轉(zhuǎn)js滾動鼠標(biāo)中間對圖片放大縮小
文章源于：http://www.dlmjj.cn/article/ihhcie.html
