html页面代码:
<!DOCTYPE html>
<html>
<head>
<title>Rubber bands with layerd elements</title>
<style>
body {
background: rgba(100, 145, 250, 0.3);
}
#canvas {
margin-left: 20px;
margin-right: 0;
margin-bottom: 20px;
border: thin solid #aaa;
cursor: pointer;
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="rubberbanding.js"></script>
</body>
</html>
js代码如下:
// 使用div元素实现橡皮筋式选取框
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
rubberbandDiv = document.getElementById('rubberbandDiv'),
resetButton = document.getElementById('resetButton'),
image = new Image(),
mousedown = {},
rubberbandRectangle = {},
dragging = false;
// functions ..........
function rubberbandStart(x, y ) {
mousedown.x = x;
mousedown.y = y;
rubberbandRectangle.left = mousedown.x;
rubberbandRectangle.top = mousedown.y;
moveRubberbandDiv();
showRubberbandDiv();
dragging = true;
}
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();
}
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) {
}
resetRubberbandRectangle();
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 resetRubberbandRectangle() {
rubberbandRectangle = {top: 0, left: 0, width: 0, height: 0};
}
// event handles......
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);
}
// initialization
image.src = 'timg.jpeg';
文章中需要用的图片,可以自行配置。
效果图如下
最终效果如下: