从开通博客园到今天，有两个多月了。我发现之前没有开通博客记录自己所做的东西，真是后悔啊。
现在一点一点把自己所做的功能以博客的形式记录下来，一方面可以给大家分享，大家一起学习，同时自己也从新回顾一下。
这个图片放大，缩小和旋转，我采用canvas画布这个来做的，核心点就在js中去控制鼠标状态及事件。
我先给大家展示一下效果图。
鼠标移到画布范围内就会出现下方的操作栏，每次以90度选择。
1.在引入js的时候一定要注意了，由于在使用画布canvas时，需要等图片加载完成后才可以执行画布里的内容。js要在最后引入。
主要的地方就是这个啦，其它就是js方法了，我就不一一解释了，有js功底的能看懂，如果有地方不懂，或者需要改进的就在下面评论出来，大家一起学习。
下面我就贴出代码了，需要演示项目源码的小伙伴也评论出来，我把演示项目发出来。
这是目录结构，也不需要什么jar包。image下面就是图片啦。
css样式代码
- {
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 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,canvas.width,canvas.height);
cxt.clearRect(-200,-200,canvas.width 2,canvas.height 2);
// cxt.fillStyle = backGroundColor[backGroundColorIndex++ % backGroundColor.length];
//cxt.fillRect(0,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,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.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.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";
}
由于这几天在做一个切换图片的功能，点击上一页，下一页实现图片切换，这个功能以及快全部实现了，到时候我搭建一个框架的演示项目，来给大家展示图片切换上一张，下一张，也包括旋转，放大缩小功能。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
