您的位置：首页 > 其它

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

2017-11-30 21:46 267 查看

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 b
4000
lue;
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航