使用浮动div元素来实现橡皮筋式截取选取框（鼠标监听事件）_vue canvas橡皮筋选框局部放大器-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_20725287/article/details/45461263

本文介绍了一种橡皮筋式选取框的实现方法，通过HTML5 Canvas元素和JavaScript编程，用户可以在画布上自由选择区域，并将所选区域放大显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一说明：橡皮筋式选取框是让用户在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';
}

结果如下：

选取前：