canvas（11/30）--------事件处理（局部图片放大）

时间：2021-08-15 20:31:30

example2.js

var canvas = document.getElementById('canvas');
	context = canvas.getContext('2d');
	rubberbandDiv = document.getElementById('rubberbandDiv');
	resetButton = document.getElementById('resetButton');
	image = new Image();
	mousedown = {};
	rubberbandRectangle = {};
	dragging = false;
//将div元素的左上角移动到鼠标按下的选点，并使div元素可见。
function rubberbandStart(x,y){
	mousedown.x = x;
	mousedown.y = y;

	rubberbandRectangle.left = mousedown.x;
	rubberbandRectangle.top = mousedown.y;

	moveRubberbandDiv();
	showRubberbandDiv();

	dragging = true;
}
//对代表橡皮筋式选矿的这个div元素进行移动与缩放操作
function rubberbandStretch(x,y) {
	rubberbandRectangle.left = x < mousedown.x ? x : mousedown.x;
	rubberbandRectangle.top = y < mousedown.y ? y : mousedown.y;

	rubberbandRectangle.width = Math.abs(x - mousedown.x);
	rubberbandRectangle.height = Math.abs(y - mousedown.y);

	moveRubberbandDiv();
	resizeRubberbandDiv();
}
//把选中的那部分图像方法，并绘制出来，同时将表示橡皮筋式选取框的那个div隐藏起来
function rubberbandEnd() {
	var bbox = canvas.getBoundingClientRect();

	try{
		context.drawImage(canvas,
						rubberbandRectangle.left - bbox.left,
						rubberbandRectangle.top = bbox.top,
						rubberbandRectangle.width,
						rubberbandRectangle.height,
						0,0,canvas.width,canvas.height);
	}
	catch(e){

	}

	resetBubberbandRectangle();

	rubberbandDiv.style.width = 0;
	rubberbandDiv.style.height = 0;

	hideRubberbandDiv();

	dragging = false;
}

function moveRubberbandDiv() {
	rubberbandDiv.style.top = rubberbandRectangle.top + 'px';
	rubberbandDiv.style.left = rubberbandRectangle.left + 'px';
}

function resizeRubberbandDiv() {
	rubberbandDiv.style.width = rubberbandRectangle.width + 'px';
	rubberbandDiv.style.height = rubberbandRectangle.height + 'px';
}

function showRubberbandDiv() {
	rubberbandDiv.style.display = 'inline';
}

function hideRubberbandDiv() {
	rubberbandDiv.style.display = 'none';
}

function resetBubberbandRectangle() {
	rubberbandRectangle = {top:0,left:0,width:0,height:0};
}

canvas.onmousedown = function(e) {
	var x = e.clientX;
		y = e.clientY;

	e.preventDefault();
	rubberbandStart(x,y);
};

window.onmousemove = function(e){
	var x = e.clientX;
		y = e.clientY;

	e.preventDefault();
	if (dragging) {
		rubberbandStretch(x,y);
	}
};

window.onmouseup = function(e){
	e.preventDefault();
	rubberbandEnd();
};

image.onload = function(){
	context.drawImage(image,0,0,canvas.width,canvas.height);
};

resetButton.onclick = function(e){
	context.clearRect(0,0,context.canvas.width,context.canvas.height);
	context,drawImage(image,0,0,canvas.width,canvas.height);
};

image.src = 'a.png'
html: 

<html>
<head>
<title>Rubber handas with layered elements</title>
<style>
	body {
		background: rgba(100,145,250,0.3);
	}

	#canvas {
		margin-left: 20px;
		margin-right: 0;
		margin-bottom: 20px;
		border: thin solid #aaaaaa;
		cursor: crosshair;
		padding: 0;
	}

	#controls {
		margin: 20px 0px 20px 20px;
	}

	#rubberbandDiv {
		position: absolute;
		border: 3px solid blue;
		cursor: crosshair;
		display: none;
	}
</style>
</head>
<body>
	<div id="controls">
	<input type="button" id="resetButton" value="Reset"/>
	</div>

	<div id="rubberbandDiv"></div>

	<canvas id="canvas" width="800" height="520">canvas not supported</canvas>

	<script src='example2.js'></script>
</body>
</html>



标签：

相关文章