JS使用数学方法实现DIV层鼠标画线

Jamers · May 20, 2017

近期项目上需要使用到画线功能。花了差不多一整天的时间把功能实现并应用到项目上。方案完全使用数学方法，不会消耗太多的资源。思路：点击开始画线功能，弹出透明蒙板层，以避免点击到其它元素上，抓取两次鼠标点击事件，根据鼠标点击位置画出一个矩形透明DIV，将起始两点计算出各点的位置，画出具体的点，以达到画线的效果。

看代码：特记录一下，备忘。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Draw Line</title>
<style>
    #droppalbe {
        position: relative;
        width: 500px;
        height: 400px;
        background: yellow;
    }
    #droppalbe div[id^=yz_] {
        position: absolute;
        z-index: 100;
        /*background: #EEE;*/
    }
    #droppalbe div.pointer {
        z-index:101;
        width: 3px;
        height: 3px;
    }
    #droppalbe div#linemask {
        position: absolute;
        top: 0;
        left: 0;
        z-index:101;
        background: transparent;
        width: 100%;
        height: 100%;
    }
</style>
<script type="text/javascript" src="/jq/jquery-1.12.4.min.js"></script>
<script>
    var isdraw = false;
    var clickcount = 0;
    var pos = [];
    $(function(){
        $('#droppalbe').bind('click',function(e){
            if (isdraw) {
                var x=e.pageX,y=e.pageY;
                var px = $(this).offset().left;
                var py = $(this).offset().top;
                x = x - px;
                y = y - py;
                clickcount ++ ;
                var tmp = {'x':x,'y':y};
                pos.push(tmp);
                $('#offset').html('X:'+x+',Y:'+y);
                if (clickcount>=2) {
                    addLineDiv();
                    init();
                }
            }
        });

        $('#draw').bind('click',function(){
            $('#linemask').show();
            $('#linemask').css('cursor','crosshair');
            isdraw = true;
            clickcount = 0;
            pos = [];
        });
        $('#clear').bind('click',function(){
            $('div.line').each(function(i){
                $(this).remove();
            });
        });
    });
    function init() {
        isdraw = false;
        clickcount = 0;
        pos = [];
        $('#linemask').css('cursor','default');
        $('#linemask').hide();
    }
    
    function addLineDiv() {
        if (pos.length==2) {
            AddLine(pos,0,0,false);
        }
    }
    
    function AddLine(pobj,tp,fm,add,lock,show) {
        var id = 0;

        if (fm == undefined) fm = 1;
        if (show == undefined) show = 0;
        $('div[id^="yz_tmp_"]').each(function(){
            id++;
        });
        if (lock == undefined) {
            lock = false;
        }else{
            if (lock) {
                lock = true;
            }else{
                lock = false;
            }
        }
        var sl=st=sw=sh='';
        var x1 = pobj[0].x;
        var y1 = pobj[0].y;
        var x2 = pobj[1].x;
        var y2 = pobj[1].y;
        var pa = ' pa="'+x1+'|'+y1+'|'+x2+'|'+y2+'"';
        var l = x1<x2?x1:x2;
        var t = y1<y2?y1:y2;
        var el = x1>x2?x1:x2;
        var et = y1>y2?y1:y2;
        var w = el - l;
        var h = et - t;
        var otype;
        if (((l == x1) && (t == y1))||((l == x2) && (t == y2))) {
            otype = 0;  //左上角至右下角
        }else{
            otype = 1;  //左上角至右上角
        }
        if (l>0) {
            sl = "left:"+l+'px;';
        }
        if (t>0) {
            if (show) if ($('#LayerX').attr('id')) t = t - 86;
            st = "top:"+t+'px;';
        }
        sw = "width:"+w.toString()+"px;";
        sh = "height:"+h.toString()+"px;";
        var pd = ' otype="'+otype+'"';
        if (lock) {
            var tmp = $('<div class="lock line" style="'+sl+st+sw+sh+'" fm="'+fm+'"'+pd+'></div>');
        }else{
            var tmp = $('<div id="yz_tmp_'+id+'" class="line" style="'+sl+st+sw+sh+'" fm="'+fm+'"'+pd+pa+'></div>');
        }
        if (add == undefined || add == '') {
            $('#droppalbe').append(tmp);
        }else{
            $('#droppalbe-'+add).append(tmp);
        }
        eachLine();
        //$('div[id^="yz_tmp_"]').draggable();
    }
    function eachLine() {
        $('div.line').each(function(i){
            if ($(this).html().length == 0) {
                GernelLine(this);
            }
        });
    }
    function GernelLine(obj) {
        var type = $(obj).attr('otype');
        var w = $(obj).width();
        var h = $(obj).height();
        var x1,y1,x2,y2;
        if (type == '0') {
            x1 = 0;
            y1 = 0;
            x2 = w;
            y2 = h;
        }else{
            x1 = 0;
            y1 = h;
            x2 = w;
            y2 = 0;
        }
        var dx = Math.abs(x2 - x1);
        var dy = Math.abs(y2 - y1);
        //var d = Math.pow((dx*dx)+(dy*dy),0.5);
        if (dy>dx) {
            for(var i = 0;i<dy;i++) {
                var width = dx/dy*i;
                var nl = x1+width;
                if (y1<y2) {
                    var nt = i + y1;
                }else{
                    var nt = y1 - i;
                }
                addPointer(obj,nl,nt);
            }
        }else{
            for(var i = 0;i<dx;i++) {
                var height = dy/dx*i;
                var nl = i+x1;
                if (y1<y2) {
                    var nt = height + y1;
                }else{
                    var nt = y1 - height;
                }
                addPointer(obj,nl,nt);
            }
        }
    }
    
    function addPointer(obj,nl,nt) {
        $(obj).append('<div class="pointer" style="background:red;position:absolute;left:'+nl+'px;top:'+nt+'px;"></div>');
    }
</script>
</head>
<body>
<div id="droppalbe">
<div id="linemask" style="display:none;"></div>
<div><input type="text" value='input test'>
<input type="text" value='input test'>
<input type="text" value='input test'>
<input type="text" value='input test'>
<input type="text" value='input test'>
<input type="text" value='input test'></div>
<div style="width: 50%;height: 50%">测试内容</div>
</div>
<button id='draw'>画线</button>
<button id='clear'>清线</button>
<div id='offset'></div>
</body>
</html>

Sign In

JS使用数学方法实现DIV层鼠标画线

Recommended Posts

Jamers

Link to comment

Share on other sites

Please sign in to comment

Browse

Activity

Store