使用浮动div元素来实现橡皮筋式截取选取框（鼠标监听事件）

来源：互联网发布：知彼而知己打不开编辑：程序博客网时间：2024/05/01 13:55

一说明：橡皮筋式选取框是让用户在canvas之中选取某个区域，将该区域放大。起初该canvas会显示一幅图像，，当你选取某个区域，应用程序就会放大该区域。。

二总体思路：加载图像

onmousedown,获取用户开始选取的点（x,y）,

onmousemove获取用户鼠标拉动的点(x,y)并开始绘制选取的框

onmouseup 当用户鼠标不再是点击着的状态时结束选取

三：代码如下：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        #canvas{            border: 3px solid hotpink;        }        #rubberbandiv{            position: absolute;            border: 3px solid black;            cursor: crosshair;            display: none;        }    </style></head><body>    <div id="rubberbandiv"></div>    <canvas id="canvasx" width="700" height="600">        canvas is not support!    </canvas>    <script src="选取框.js"></script></body></html>

js代码如下：

/** * Created by Administrator on 2015/5/1. */canvas = document.getElementById('canvasx');context = canvas.getContext('2d');rubberbandiv = document.getElementById('rubberbandiv');rectangle = {};image = new Image();image.src='1.png';var dragging = false;image.onload = function(e){    context.drawImage(image,0,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();    rubberbandstrech(x,y);//鼠标移动的距离};window.onmouseup = function(e){    rubberbandend();//截图结束};function rubberbandstart(x,y){    mounsedownx =x;    mounsedowny = y;//get indexod x,y    rectangle.left = mounsedownx;    rectangle.top =mounsedowny;    moveRubberbanddiv();//定义选取框的起点    showRubberbanddiv();    dragging = true;}function moveRubberbanddiv(){    rubberbandiv.style.top = rectangle.top + 'px';    rubberbandiv.style.left = rectangle.left + 'px';}function showRubberbanddiv(){    rubberbandiv.style.display = 'inline'}function rubberbandstrech(x,y){    rectangle.left = x<mounsedownx?x:mounsedownx;    rectangle.top = y<mounsedowny?y:mounsedowny;    rectangle.width = Math.abs(x-mounsedownx) ;    rectangle.height = Math.abs(y-mounsedowny);    moveRubberbanddiv();//当移动的点在mounsedown的左边时，要从新定义left，top(选取框的起点)    resizeRubberbanddiv();//}function resizeRubberbanddiv(){    rubberbandiv.style.width = rectangle.width +'px';    rubberbandiv.style.height = rectangle.height +'px';}function rubberbandend(){    var bbox = canvas.getBoundingClientRect();    try{        context.drawImage(canvas,rectangle.left-bbox.left,rectangle.top-bbox.top,rectangle.width,rectangle            .height,0,0,canvas.width,canvas.height);    }    catch (e){    }    resetRubberbandRectangle();    rubberbandiv.style.width = 0;    rubberbandiv.style.height = 0;    hideRubberbanddiv();    dragging =false;}function resetRubberbandRectangle(){    rectangle = {top:0,left:0,width:0,height:0};}function hideRubberbanddiv(){    rubberbandiv.style.display = 'none';}

结果如下：

选取前：

选取框后

0 0