鼠标框选 下篇

接上篇，上篇写了大致的思路，其实还有很多问题，由于没写测试，在运行时出现了很多问题，比如绘制相关代码，会一直添加元素到dom，这主要因为我在考虑元素绘制和插入dom没有分开处理，本次主要增加了计算和绘制的代码逻辑，逻辑中有些代码还是需要优化的，比如dom访问次数过多,绘制过程做节流处理等，有需要各位自行优化即可，为了操作方便，直接封装成了jQuery插件。

完整代码如下，解释可直接看注释部分：

; (function ($) {

    $.fn.frameSelection = function (options) {
        var defaultOpts = {
            callback: function () { },
            mask: false,
            done: function (result) { console.log(result) }
        };
        var options = $.extend({}, defaultOpts, options);
        new FrameSelection($(this), options);
    }
    /**
     * 坐标点
     * @param {*} x 
     * @param {*} y 
     */
    function Point(x, y) {
        this.x = x;
        this.y = y;
    }
    /**
     * 框选构造函数
     * @param {*} $rangeEl 容器元素
     * @param {*} options 选择项
     */
    function FrameSelection($rangeEl, options) {
        this.$rangeEl = $rangeEl;
        this.options = options;

        this.init();
    }
    /**
     * 框选初始化
     */
    FrameSelection.prototype.init = function () {
        this.unbind();
        this.bind();
    }
    /**
     * 解除事件绑定
     */
    FrameSelection.prototype.unbind = function () {

        this.$rangeEl.off('mousedown');
        this.$rangeEl.off('mousemove');
        this.$rangeEl.off('mouseup');
    }
    /**
     * 绘制接口
     */
    FrameSelection.prototype.render = function (p1, p2) {
        this.options.mask && this.renderMask(p1, p2);
        this.renderRect(p1, p2);
    }
    /**
     * 清理元素
     */
    FrameSelection.prototype.clear = function () {
        this.$rangeEl.find('.rect,.mask').remove();
    }

    /**
     * 创建遮罩层
     */
    FrameSelection.prototype.renderMask = function (p1, p2) {
        var $rect = this.$rangeEl.find('div.rect');
        var $top = this.$rangeEl.find('div.mask:eq(0)'),
            $left = this.$rangeEl.find('div.mask:eq(1)'),
            $right = this.$rangeEl.find('div.mask:eq(2)'),
            $bottom = this.$rangeEl.find('div.mask:eq(3)');

        $top.css({
            top: this.$rangeEl.css('top'),
            left: this.$rangeEl.css('left'),
             this.$rangeEl.width(),
            height: $rect.css('top')
        });

        $left.css({
            top: $rect.css('top'),
            left: $top.css('left'),
             $rect.css('left'),
            height: $rect.height()
        });

        $right.css({
            top: $rect.css('top'),
            left: $left.width() + $rect.width(),
             this.$rangeEl.width() - ($left.width() + $rect.width()),
            height: $left.height()
        });

        $bottom.css({
            top: $top.height() + $left.height(),
            left: this.$rangeEl.css('left'),
             $top.width(),
            height: this.$rangeEl.height() - ($top.height() + $left.height())
        });

    }
    /**
     * 创建矩形选框
     */
    FrameSelection.prototype.renderRect = function (p1, p2) {
        var $rect = this.$rangeEl.find('div.rect');

        $rect.css({
            top: Math.min(p1.y, p2.y),
            left: Math.min(p1.x, p2.x),
             Math.abs(p1.x - p2.x),
            height: Math.abs(p1.y - p2.y)
        })

    }
    /**
     * 创建元素
     */
    FrameSelection.prototype.create = function (eleDes, n, callback) {
        var desArr = eleDes.split('.');
        var eleName = desArr[0], className = desArr[1] || '', eles = '';

        for (var i = 0; i < n; i++) {
            eles += `<${eleName} class="${className}"></${eleName}>`;
        }

        callback && typeof callback === "function" && callback($(eles));

    }
    FrameSelection.prototype.createElToDom = function () {
        //默认不绘制mask
        var fn = ($eles) => {
            $eles.appendTo(this.$rangeEl);
        }
        this.options.mask && this.create('div.mask', 4, fn);
        this.create('div.rect', 1, fn);

        typeof this.options.callback === 'function' && this.options.callback();
    }
    /**
     * 注册事件绑定
     */
    FrameSelection.prototype.bind = function () {
        var self = this;
        this.$rangeEl.bind('mousedown', function (event) {
            var start = new Point(event.pageX, event.pageY);
            //清理
            self.clear();
            self.createElToDom();

            self.$rangeEl.bind('mousemove', function (e) {
                var end = new Point(e.pageX, e.pageY);
                //绘制
                self.render(start, end);

            })
        });

        this.$rangeEl.bind('mouseup', function (e) {
            self.$rangeEl.off('mousemove');
        })
    }
})(window.jQuery);

直接在html中测试打开即可，css代码未独立处理，直接写入了html文件中，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>frame_selection</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="./frame_selection.js"></script>
    <script>
        $(document).ready(function(){
            $('.container').frameSelection({
                mask:true,
                callback:function(){
                    console.log('rendering!!!');
                },
                done:function(result){
                    console.log('rendering done',result);
                }
            }) ;
        })
    </script>
    <style>
        .container{
            width:600px;
            height: 400px;
            left:0;
            top:0;
        }
        .mask,
        .rect {
            position: absolute;
        }

        .mask {
            background-color: #000;
            opacity: 0.2;
        }

        .rect {
            background-color: #fff;
            opacity: 0.1;
            border:1px dashed #000;
        }
    </style>
</head>

<body>
    <div class="container">

    </div>
</body>

</html>

直接保存js代码到frame_selection.js文件，和index.html放在同一目录下，双击浏览器打开即可运行。运行效果如下