jyyhq/witDisplay/js/video/videoDrawArea.js

function initDrawReact(id, fn) {
    var drawArear = document.getElementById(id); // 获取画布元素
    // 创建矩形框
    var drawReact = document.createElement('div');
    drawReact.id = id + '_box'
    drawReact.style.boxSizing = 'border-box'
    drawReact.style.border = '1px solid red'
    drawReact.style.position = 'absolute'
    drawReact.style.display = 'none'
    drawArear.appendChild(drawReact)
    // 绑定鼠标事件--onmousedown
    drawArear.onmousedown = function ($event) {
        console.log($event.which);
        if($event.which!='1'){
            return ;
        }
        drawArear = document.getElementById(id); // 获取画布元素
        // 初始化
        var drawReact = document.getElementById(id + '_box'); // 获取矩形框元素
        var areaInfo = drawArear.getBoundingClientRect(); // 返回元素的大小及其相对于视口的位置
        var height = 1000 / areaInfo.height;//分为100分
        var width = 1000 / areaInfo.width;
        var reactWidth, reactHeight, reactTop, reactLeft; // 定义矩形框的宽、高、top、left
        // xy坐标是以画布的左上角为原点，方向矢量以向下和向右为正方向。
        var beginPoint = {}; // 标记起点
        var endPoint = {}; // 标记终点
        var is3dyun = localStorage.getItem(id + "_3d");//是否开启
        if (is3dyun == 'true') {
            drawReact.style.display = 'block'; // 进入画布按下鼠标显示默认矩形框
        }
        // 鼠标按下的位置作为矩形框的起点，横纵坐标记为 x0, y0
        beginPoint = {x: $event.clientX - areaInfo.x, y: $event.clientY - areaInfo.y}
        // 起点的横坐标
        var x0 = $event.clientX - areaInfo.x;
        // 起点的纵坐标
        var y0 = $event.clientY - areaInfo.y;
        // 绑定鼠标事件--onmousemove
        document.onmousemove = function ($event) {
            // 终点的横坐标
            var x1 = $event.clientX - areaInfo.x;
            // 终点的纵坐标
            var y1 = $event.clientY - areaInfo.y;
            // 对终点相对于起点的位置进行分类讨论
            if (x1 >= x0 && y1 < y0) {
                // x 越界处理
                reactWidth = $event.clientX >= areaInfo.right ? areaInfo.width - x0 : x1 - x0;
                reactLeft = x0;
                // y 越界处理
                reactHeight = $event.clientY <= areaInfo.top ? y0 : y0 - y1;
                reactTop = $event.clientY <= areaInfo.top ? 0 : y1;
                // 终点
                endPoint = {x: x0 + reactWidth, y: y0 - reactHeight};
            } else if (x1 < x0 && y1 < y0) {
                // x 越界处理
                reactWidth = $event.clientX <= areaInfo.left ? x0 : x0 - x1;
                reactLeft = $event.clientX <= areaInfo.left ? 0 : x1;
                // y 越界处理
                reactHeight = $event.clientY <= areaInfo.top ? y0 : y0 - y1;
                reactTop = $event.clientY <= areaInfo.top ? 0 : y1;
                // 终点
                endPoint = {x: x0 - reactWidth, y: y0 - reactHeight};
            } else if (x1 < x0 && y1 >= y0) {
                // x 越界处理
                reactWidth = $event.clientX <= areaInfo.left ? x0 : x0 - x1;
                reactLeft = $event.clientX <= areaInfo.left ? 0 : x1;
                // y 越界处理
                reactHeight = $event.clientY >= areaInfo.bottom ? areaInfo.height - y0 : y1 - y0;
                reactTop = y0;
                // 终点
                endPoint = {x: x0 - reactWidth, y: y0 + reactHeight};
            } else if (x1 >= x0 && y1 >= y0) {
                // x 越界处理
                reactWidth = $event.clientX >= areaInfo.right ? areaInfo.width - x0 : x1 - x0;
                reactLeft = x0
                // y 越界处理
                reactHeight = $event.clientY >= areaInfo.bottom ? areaInfo.height - y0 : y1 - y0;
                reactTop = y0;
                // 终点
                endPoint = {x: x0 + reactWidth, y: y0 + reactHeight};
            }
            drawReact.style.width = reactWidth + 'px'; // 宽
            drawReact.style.height = reactHeight + 'px'; // 高
            drawReact.style.top = reactTop + 'px';
            drawReact.style.left = reactLeft + 'px';
        }
        // 绑定鼠标事件--onmousedown
        document.onmouseup = function ($event) {
            if($event.which!='1'){
                return  false;
            }

            document.onmousemove = null
            document.onmouseup = null
            // 回调
            var options = {reactWidth, reactHeight, reactTop, reactLeft, beginPoint, endPoint, id, is3dyun}

            options.beginPoint.x = options.beginPoint.x * width;
            options.beginPoint.y = options.beginPoint.y * height;
            options.endPoint.x = options.endPoint.x * width;
            options.endPoint.y = options.endPoint.y * height;
            fn(options)
        }
    }
}