框选位置（一个、多个）

// 框选一个
// data(左上角坐标：leftTopX，leftTopY 右下角坐标：rightBottomX，rightBottomY )
function drawLine(data) {
    var image = new Image();
    //原图片原始地址（用于获取原图片的真实宽高，当<img>标签指定了宽、高时不受影响）
    if ($("#carScenePic").attr("isLoad") == "true") {
        var w = $("#carScenePic").width();
        var h = $("#carScenePic").height();
        image.src = $("#carScenePic").attr("src");
        var rectWidth = w / image.width * (data.rightBottomX - data.leftTopX);
        var rectHeight = h / image.height * (data.rightBottomY - data.leftTopY);
        var rectLeft = w / image.width * data.leftTopX + $("#carScenePic").offset().left;
        var rectTop = h / image.height * data.leftTopY + $("#carScenePic").offset().top;
        $(".kLine").css({ "width": rectWidth, "height": rectHeight, "top": rectTop, "left": rectLeft });
        $("#carScenePic").attr("isLoad", true);
    } else {
        $("#carScenePic").on("load", function () {
            var w = $(this).width();
            var h = $(this).height();
            image.src = $(this).attr("src");
            var rectWidth = w / image.width * (data.rightBottomX - data.leftTopX);
            var rectHeight = h / image.height * (data.rightBottomY - data.leftTopY);
            var rectLeft = w / image.width * data.leftTopX + $("#carScenePic").offset().left;
            var rectTop = h / image.height * data.leftTopY + $("#carScenePic").offset().top;
            $(".kLine").css({ "width": rectWidth, "height": rectHeight, "top": rectTop, "left": rectLeft });
            $("#carScenePic").attr("isLoad", true);
        });
    }
}

// 框选多个
var picObj = {
functions: {
// data(x:左上角x轴坐标 y：左上角y轴坐标 w：框选宽度 h：框选高度)
        myDrawLine: function (data) {
            var image = new Image();
            for (let i = 0; i < data.length; i++) {
                var width = $("#add-image-nocro").width();
                var height = $("#add-image-nocro").height();
                image.src = $("#add-image-nocro").attr("src");
                var rectWidth = width / image.width * data[i].w;
                var rectHeight = height / image.height * data[i].h;
                var rectLeft = width / image.width * data[i].x + $("#add-image-nocro").offset().left;
                var rectTop = height / image.height * data[i].y + $("#add-image-nocro").offset().top;
                if (i == 0) {
                    var myDrawImg = '<img src="../../../../static/vias/images/pic_target.png" style="float: right">';
                    var myDraw1 = '<div class="kLine0 myDrawActive" onclick="searchcarObj.functions.myDrawLineClickHanlder(this,' + i + ')" style="left: 0px;top: 0px;width: 0px;height: 0px; position: absolute; border: 2px solid rgb(76, 145, 191);z-index:4;"></div>';
                    $("#drawArea").append(myDraw1);
                    $(".kLine0").append(myDrawImg);
                    $(".kLine0").css({ "width": rectWidth, "height": rectHeight, "top": rectTop, "left": rectLeft });
                } else if (i > 0) {
                    var myDraw = '<div class="kLine' + i + '" style="left: 0px;top: 0px;width: 0px;height: 0px; position: absolute; border: 2px solid rgb(76, 145, 191);z-index:4;" onclick="searchcarObj.functions.myDrawLineClickHanlder(this,' + i + ')"></div>';
                    $("#drawArea").append(myDraw);
                    $(".kLine" + i).css({ "width": rectWidth, "height": rectHeight, "top": rectTop, "left": rectLeft });
                }
            }
        },
        myDrawLineClickHanlder: function (eleData, index) {
            $(eleData).empty();
            var myDrawImg = '<img src="../../../../static/vias/images/pic_target.png" style="float: right">';
            $(eleData).siblings().removeClass("myDrawActive");
            $(eleData).siblings().empty();
            $(eleData).addClass("myDrawActive");
            $(eleData).append(myDrawImg);
            $('#choosecar').val(searchcarObj.carInfo[index].brandName + '/' + searchcarObj.carInfo[index].modelName + '/' + searchcarObj.carInfo[index].yearName);
        }
        myDrawLine: function (data) {
            var image = new Image();
            for (let i = 0; i < data.length; i++) {
                var width = $("#add-image-nocro").width();
                var height = $("#add-image-nocro").height();
                image.src = $("#add-image-nocro").attr("src");
                var rectWidth = width / image.width * data[i].w;
                var rectHeight = height / image.height * data[i].h;
                var rectLeft = width / image.width * data[i].x + $("#add-image-nocro").offset().left;
                var rectTop = height / image.height * data[i].y + $("#add-image-nocro").offset().top;
                if (i == 0) {
                    var myDrawImg = '<img src="../../../../static/vias/images/pic_target.png" style="float: right">';
                    var myDraw1 = '<div class="kLine0 myDrawActive" onclick="searchcarObj.functions.myDrawLineClickHanlder(this,' + i + ')" style="left: 0px;top: 0px;width: 0px;height: 0px; position: absolute; border: 2px solid rgb(76, 145, 191);z-index:4;"></div>';
                    $("#drawArea").append(myDraw1);
                    $(".kLine0").append(myDrawImg);
                    $(".kLine0").css({ "width": rectWidth, "height": rectHeight, "top": rectTop, "left": rectLeft });
                } else if (i > 0) {
                    var myDraw = '<div class="kLine' + i + '" style="left: 0px;top: 0px;width: 0px;height: 0px; position: absolute; border: 2px solid rgb(76, 145, 191);z-index:4;" onclick="searchcarObj.functions.myDrawLineClickHanlder(this,' + i + ')"></div>';
                    $("#drawArea").append(myDraw);
                    $(".kLine" + i).css({ "width": rectWidth, "height": rectHeight, "top": rectTop, "left": rectLeft });
                }
            }
        },
        myDrawLineClickHanlder: function (eleData, index) {
            $(eleData).empty();
            var myDrawImg = '<img src="../../../../static/vias/images/pic_target.png" style="float: right">';
            $(eleData).siblings().removeClass("myDrawActive");
            $(eleData).siblings().empty();
            $(eleData).addClass("myDrawActive");
            $(eleData).append(myDrawImg);
            $('#choosecar').val(searchcarObj.carInfo[index].brandName + '/' + searchcarObj.carInfo[index].modelName + '/' + searchcarObj.carInfo[index].yearName);
        }
}
}