HTML5学习记录-----canvas学习之鼠标选取放大图像

JavaSam

浏览: 951670 次
性别:
来自: 北京

最近访客更多访客>>

chyunfan

lversony

zwj1030711290

zl_dream1106

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5
canvas
javascript

canvas鼠标选取放大
欢迎大家有好点建议可以提。js高级扣扣群：170798851 欢迎来交流学习

git项目地址：https://github.com/Jonavin/HTML5_Study

/**
 * Created by wsf on 2014-11-23.
 */
;//分号为了保证代码合并时不出错
(function(win){
     "use strict";
      var doc = win.document,cvs = doc.querySelector("#canvas"),
       selector = doc.getElementById("selector"),
       restBtn = doc.getElementById("resetBtn"),
       ctx = cvs.getContext("2d"),
       img = new Image(),width = cvs.width,height = cvs.height,msdown = {},selectRect = {},dragging = false;

       var _functions = {
           //选取开始
           selectStart : function(x,y) {
               msdown.x = x;//鼠标按下横坐标
               msdown.y = y;
               selectRect.left = msdown.x;
               selectRect.top = msdown.y;//
               this.moveSelector();//移动选取框
               this.showSelector();//显示选取框
               dragging = true;//
           },
           //移动选取框
           moveSelector: function () {
               selector.style.top = selectRect.top + "px";
               selector.style.left = selectRect.left + "px";

           },
           //显示选取框
           showSelector:function(){
               selector.style.display = "inline";
           },
           //展开选取框
           selectorStretch:function(x,y){
               selectRect.left = Math.min(x,msdown.x);
               selectRect.top = Math.min(y,msdown.y);
               selectRect.width = Math.abs(x - msdown.x);
               selectRect.height = Math.abs(y-msdown.y);
               this.moveSelector();//移动选取框
               this.resizeSelector();//重设选取框

           },
           //重设选取框大小
           resizeSelector:function(){
               selector.style.width = selectRect.width + "px";
               selector.style.height = selectRect.height + "px";
           },
           //重置选取框
           resetSelector:function(){
              selectRect = {top:0,left:0,width:0,height:0};
           },
           //选取结束
           selectEnd:function(){
               var _box = cvs.getBoundingClientRect();
               try{
                   ctx.drawImage(cvs,selectRect.left-_box.left,selectRect.top-_box.top,selectRect.width,selectRect.height,0,0,width,height);
               }catch (e){
               }
               this.resetSelector();
               selector.style.width = 0;
               selector.style.height = 0;
               this.hideSelector();
               dragging = false;
           },
           hideSelector:function(){
               selector.style.display = "none";
           }
       }

       cvs.onmousedown = function(e){
           var x = e.clientX,y = e.clientY;
           e.preventDefault();//阻止浏览器默认事件
           _functions.selectStart.call(_functions,x,y);
       }
       win.onmousemove  = function(e){
           var x = e.clientX,y = e.clientY;
           e.preventDefault();
           if(dragging){
               _functions.selectorStretch.call(_functions,x,y);
           }
       }
       win.onmouseup = function(e){
           e.preventDefault();
           _functions.selectEnd.call(_functions);
       }
       img.onload = function(){
           ctx.drawImage(img,0,0,width,height);
       }
       restBtn.onclick = function(e){
           ctx.clearRect(0,0,width,height);
           ctx.drawImage(img,0,0,width,height);
       }
       img.src = "img.jpg";
})(window);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>鼠标选取canvas区域</title>
    <style>
        body{
            background: rgba(100,145,250,0.3);
        }
        #canvas{
            margin-left: 20px;
            margin-bottom: 10px;
            margin-right: 0;
            border:thin solid #aaa;
            padding: 0;
        }
        #controls{
            margin:20px 0 20px 20px;
        }
        #selector{
            position: absolute;
            border:3px solid blue;
            cursor: crosshair;
            display: none;
        }
    </style>
</head>
<body>
<div id="controls">
    <input type="button" id="resetBtn" value="重置"/>
</div>
<div id="selector"></div>
<canvas id="canvas" width="800" height="520">
    不支持canvas
</canvas>
<script src="mouseSelect.js"></script>
</body>
</html>