实现图片旋转，滚动鼠标中键放大和缩小图片

从博客花园开放到今天，已经超过两个月了. 我发现我没有打开博客来记录以前的工作. 我真的很后悔.

现在，我将以博客的形式一点一点地记录我已经完成的功能. 一方面，我可以与所有人共享它，一起学习并亲自对其进行回顾.

此图片放大，缩小并旋转. 我用帆布做. 核心是控制js中的鼠标状态和事件.

让我先向您展示效果图.

将鼠标移到画布区域，将出现下面的操作栏，每次选择90度.

1. 引入js时一定要注意，因为使用画布时，您需要等待图片加载后才能在画布中执行内容. js应该在最后引入.

在2.js中，应在图片加载后使用该方法.

这是主要地点. 另一个是js方法. 我不会一一解释. 那些具有js知识的人可以理解它. 如果您不了解或需要改进，请在下面发表评论. 让我们一起学习.

我将在下面发布代码，需要演示项目源代码的朋友也会发表评论，然后我将发布演示项目.

这是目录结构，不需要jar包. 下图是图片.

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";
}

这是实现图片旋转，放大和缩小的演示代码.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-305298-1.html