igds-v4-whjl.git

<!DOCTYPE html>
<html lang="zh-cn" xmlns:th=http://www.thymeleaf.org>
<head>
<meta charset="UTF-8">
<title>粮情三维采集点展示</title>
<style type="text/css">
</style>
</head>
 
<body>
 
    <canvas id="canvas" width="650" height="450">
 
</canvas>
 
</body>
 
<!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" -->
<!--     type="text/javascript" charset="utf-8"></script> -->
 
<script th:src="@{./static/js/jquery.min.js}"></script>
 
<script type="text/javascript">
    (function () {
        //定义变量
        var numX = 8;//列
        var numZ = 4;//层
        var numY = 5;//行
        var blockWidth = 26;//色块宽度
        var blockHeight = 12;//色块高度
        var colorWidth = blockWidth * 1.2;//底色宽度
        var colorHeight = blockHeight * 1.2;//底色高度
        var curType = "lay";//显示类型 层显示默认
        var curVal = 0;
        
        var oneWidth = numX * blockWidth * getRatio();//一个分割快的宽度
        var oneHeight = numY * blockHeight * getRatio();//一个分割快的高度
 
        console.log("oneWidth="+oneWidth);
        console.log("oneHeight="+oneHeight);
 
        var back_height = oneHeight * 2.1 * (2 - numY / 20);//矩形高 行数最大10行
        var back_width = 3 * blockWidth * numX * (2 - numX / 20) / 2;////矩形长  最大列数 10列
 
        console.log("back_height="+back_height);
        console.log("back_width="+back_width);
 
        var rect_max_width = back_width + 0.5 * oneWidth;//最大宽
 
        var width = oneWidth * 4;
        var height = oneHeight * 5;
 
        var x = back_width/2 - rect_max_width / 2;
        var y = back_width/2 - oneHeight * 2.8;
        var z = 1;
 
        var rect_start_x = 0;
        var rect_start_y = 0;
        var clom_label_y = y + oneHeight * 2 + back_height + blockHeight; //‘第n行’标签显示y坐标
 
 
        var onlyCore  = {
            checked: false
        };
        var dm= [];
        var lb_dm= [];
        var rb_dm= [];
        var cb_dm= [];
 
       dm = [{"val":22.0,"col":1,"lay":1,"x":0,"y":0,"row":1},{"val":22.0,"col":2,"lay":1,"x":0,"y":0,"row":1},{"val":22.0,"col":3,"lay":1,"x":0,"y":0,"row":1},{"val":22.0,"col":4,"lay":1,"x":0,"y":0,"row":1},{"val":22.0,"col":5,"lay":1,"x":0,"y":0,"row":1},{"val":22.0,"col":6,"lay":1,"x":0,"y":0,"row":1},{"val":22.0,"col":7,"lay":1,"x":0,"y":0,"row":1},{"val":22.0,"col":1,"lay":1,"x":0,"y":0,"row":2},{"val":22.0,"col":2,"lay":1,"x":0,"y":0,"row":2},{"val":22.0,"col":3,"lay":1,"x":0,"y":0,"row":2},{"val":22.0,"col":4,"lay":1,"x":0,"y":0,"row":2},{"val":22.0,"col":5,"lay":1,"x":0,"y":0,"row":2},{"val":22.0,"col":6,"lay":1,"x":0,"y":0,"row":2},{"val":22.0,"col":7,"lay":1,"x":0,"y":0,"row":2},{"val":22.0,"col":1,"lay":1,"x":0,"y":0,"row":3},{"val":22.0,"col":2,"lay":1,"x":0,"y":0,"row":3},{"val":22.0,"col":3,"lay":1,"x":0,"y":0,"row":3},{"val":22.0,"col":4,"lay":1,"x":0,"y":0,"row":3},{"val":22.0,"col":5,"lay":1,"x":0,"y":0,"row":3},{"val":22.0,"col":6,"lay":1,"x":0,"y":0,"row":3},{"val":22.0,"col":7,"lay":1,"x":0,"y":0,"row":3},{"val":22.0,"col":1,"lay":1,"x":0,"y":0,"row":4},{"val":22.0,"col":2,"lay":1,"x":0,"y":0,"row":4},{"val":22.0,"col":3,"lay":1,"x":0,"y":0,"row":4},{"val":22.0,"col":4,"lay":1,"x":0,"y":0,"row":4},{"val":22.0,"col":5,"lay":1,"x":0,"y":0,"row":4},{"val":22.0,"col":6,"lay":1,"x":0,"y":0,"row":4},{"val":22.0,"col":7,"lay":1,"x":0,"y":0,"row":4},{"val":22.0,"col":1,"lay":1,"x":0,"y":0,"row":5},{"val":22.0,"col":2,"lay":1,"x":0,"y":0,"row":5},{"val":22.0,"col":3,"lay":1,"x":0,"y":0,"row":5},{"val":22.0,"col":4,"lay":1,"x":0,"y":0,"row":5},{"val":22.0,"col":5,"lay":1,"x":0,"y":0,"row":5},{"val":22.0,"col":6,"lay":1,"x":0,"y":0,"row":5},{"val":22.0,"col":7,"lay":1,"x":0,"y":0,"row":5},{"val":22.0,"col":1,"lay":2,"x":0,"y":0,"row":1},{"val":22.0,"col":2,"lay":2,"x":0,"y":0,"row":1},{"val":22.0,"col":3,"lay":2,"x":0,"y":0,"row":1},{"val":22.0,"col":4,"lay":2,"x":0,"y":0,"row":1},{"val":22.0,"col":5,"lay":2,"x":0,"y":0,"row":1},{"val":22.0,"col":6,"lay":2,"x":0,"y":0,"row":1},{"val":22.0,"col":7,"lay":2,"x":0,"y":0,"row":1},{"val":22.0,"col":1,"lay":2,"x":0,"y":0,"row":2},{"val":22.0,"col":2,"lay":2,"x":0,"y":0,"row":2},{"val":22.0,"col":3,"lay":2,"x":0,"y":0,"row":2},{"val":22.0,"col":4,"lay":2,"x":0,"y":0,"row":2},{"val":22.0,"col":5,"lay":2,"x":0,"y":0,"row":2},{"val":22.0,"col":6,"lay":2,"x":0,"y":0,"row":2},{"val":22.0,"col":7,"lay":2,"x":0,"y":0,"row":2},{"val":22.0,"col":1,"lay":2,"x":0,"y":0,"row":3},{"val":22.0,"col":2,"lay":2,"x":0,"y":0,"row":3},{"val":22.0,"col":3,"lay":2,"x":0,"y":0,"row":3},{"val":22.0,"col":4,"lay":2,"x":0,"y":0,"row":3},{"val":22.0,"col":5,"lay":2,"x":0,"y":0,"row":3},{"val":22.0,"col":6,"lay":2,"x":0,"y":0,"row":3},{"val":22.0,"col":7,"lay":2,"x":0,"y":0,"row":3},{"val":22.0,"col":1,"lay":2,"x":0,"y":0,"row":4},{"val":22.0,"col":2,"lay":2,"x":0,"y":0,"row":4},{"val":22.0,"col":3,"lay":2,"x":0,"y":0,"row":4},{"val":22.0,"col":4,"lay":2,"x":0,"y":0,"row":4},{"val":22.0,"col":5,"lay":2,"x":0,"y":0,"row":4},{"val":22.0,"col":6,"lay":2,"x":0,"y":0,"row":4},{"val":22.0,"col":7,"lay":2,"x":0,"y":0,"row":4},{"val":22.0,"col":1,"lay":2,"x":0,"y":0,"row":5},{"val":22.0,"col":2,"lay":2,"x":0,"y":0,"row":5},{"val":22.0,"col":3,"lay":2,"x":0,"y":0,"row":5},{"val":22.0,"col":4,"lay":2,"x":0,"y":0,"row":5},{"val":22.0,"col":5,"lay":2,"x":0,"y":0,"row":5},{"val":22.0,"col":6,"lay":2,"x":0,"y":0,"row":5},{"val":22.0,"col":7,"lay":2,"x":0,"y":0,"row":5},{"val":22.0,"col":1,"lay":3,"x":0,"y":0,"row":1},{"val":22.0,"col":2,"lay":3,"x":0,"y":0,"row":1},{"val":22.0,"col":3,"lay":3,"x":0,"y":0,"row":1},{"val":22.0,"col":4,"lay":3,"x":0,"y":0,"row":1},{"val":22.0,"col":5,"lay":3,"x":0,"y":0,"row":1},{"val":22.0,"col":6,"lay":3,"x":0,"y":0,"row":1},{"val":22.0,"col":7,"lay":3,"x":0,"y":0,"row":1},{"val":22.0,"col":1,"lay":3,"x":0,"y":0,"row":2},{"val":22.0,"col":2,"lay":3,"x":0,"y":0,"row":2},{"val":22.0,"col":3,"lay":3,"x":0,"y":0,"row":2},{"val":22.0,"col":4,"lay":3,"x":0,"y":0,"row":2},{"val":22.0,"col":5,"lay":3,"x":0,"y":0,"row":2},{"val":22.0,"col":6,"lay":3,"x":0,"y":0,"row":2},{"val":22.0,"col":7,"lay":3,"x":0,"y":0,"row":2},{"val":22.0,"col":1,"lay":3,"x":0,"y":0,"row":3},{"val":22.0,"col":2,"lay":3,"x":0,"y":0,"row":3},{"val":22.0,"col":3,"lay":3,"x":0,"y":0,"row":3},{"val":22.0,"col":4,"lay":3,"x":0,"y":0,"row":3},{"val":22.0,"col":5,"lay":3,"x":0,"y":0,"row":3},{"val":22.0,"col":6,"lay":3,"x":0,"y":0,"row":3},{"val":22.0,"col":7,"lay":3,"x":0,"y":0,"row":3},{"val":22.0,"col":1,"lay":3,"x":0,"y":0,"row":4},{"val":22.0,"col":2,"lay":3,"x":0,"y":0,"row":4},{"val":22.0,"col":3,"lay":3,"x":0,"y":0,"row":4},{"val":22.0,"col":4,"lay":3,"x":0,"y":0,"row":4},{"val":22.0,"col":5,"lay":3,"x":0,"y":0,"row":4},{"val":22.0,"col":6,"lay":3,"x":0,"y":0,"row":4},{"val":22.0,"col":7,"lay":3,"x":0,"y":0,"row":4},{"val":22.0,"col":1,"lay":3,"x":0,"y":0,"row":5},{"val":22.0,"col":2,"lay":3,"x":0,"y":0,"row":5},{"val":22.0,"col":3,"lay":3,"x":0,"y":0,"row":5},{"val":22.0,"col":4,"lay":3,"x":0,"y":0,"row":5},{"val":22.0,"col":5,"lay":3,"x":0,"y":0,"row":5},{"val":22.0,"col":6,"lay":3,"x":0,"y":0,"row":5},{"val":22.0,"col":7,"lay":3,"x":0,"y":0,"row":5},{"val":22.0,"col":1,"lay":4,"x":0,"y":0,"row":1},{"val":22.0,"col":2,"lay":4,"x":0,"y":0,"row":1},{"val":22.0,"col":3,"lay":4,"x":0,"y":0,"row":1},{"val":22.0,"col":4,"lay":4,"x":0,"y":0,"row":1},{"val":22.0,"col":5,"lay":4,"x":0,"y":0,"row":1},{"val":22.0,"col":6,"lay":4,"x":0,"y":0,"row":1},{"val":22.0,"col":7,"lay":4,"x":0,"y":0,"row":1},{"val":22.0,"col":1,"lay":4,"x":0,"y":0,"row":2},{"val":22.0,"col":2,"lay":4,"x":0,"y":0,"row":2},{"val":22.0,"col":3,"lay":4,"x":0,"y":0,"row":2},{"val":22.0,"col":4,"lay":4,"x":0,"y":0,"row":2},{"val":22.0,"col":5,"lay":4,"x":0,"y":0,"row":2},{"val":22.0,"col":6,"lay":4,"x":0,"y":0,"row":2},{"val":22.0,"col":7,"lay":4,"x":0,"y":0,"row":2},{"val":22.0,"col":1,"lay":4,"x":0,"y":0,"row":3},{"val":22.0,"col":2,"lay":4,"x":0,"y":0,"row":3},{"val":22.0,"col":3,"lay":4,"x":0,"y":0,"row":3},{"val":22.0,"col":4,"lay":4,"x":0,"y":0,"row":3},{"val":22.0,"col":5,"lay":4,"x":0,"y":0,"row":3},{"val":22.0,"col":6,"lay":4,"x":0,"y":0,"row":3},{"val":22.0,"col":7,"lay":4,"x":0,"y":0,"row":3},{"val":22.0,"col":1,"lay":4,"x":0,"y":0,"row":4},{"val":22.0,"col":2,"lay":4,"x":0,"y":0,"row":4},{"val":22.0,"col":3,"lay":4,"x":0,"y":0,"row":4},{"val":22.0,"col":4,"lay":4,"x":0,"y":0,"row":4},{"val":22.0,"col":5,"lay":4,"x":0,"y":0,"row":4},{"val":22.0,"col":6,"lay":4,"x":0,"y":0,"row":4},{"val":22.0,"col":7,"lay":4,"x":0,"y":0,"row":4},{"val":22.0,"col":1,"lay":4,"x":0,"y":0,"row":5},{"val":22.0,"col":2,"lay":4,"x":0,"y":0,"row":5},{"val":22.0,"col":3,"lay":4,"x":0,"y":0,"row":5},{"val":22.0,"col":4,"lay":4,"x":0,"y":0,"row":5},{"val":22.0,"col":5,"lay":4,"x":0,"y":0,"row":5},{"val":22.0,"col":6,"lay":4,"x":0,"y":0,"row":5},{"val":22.0,"col":7,"lay":4,"x":0,"y":0,"row":5}];
 
 
        function draw() {
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            ctx.strokeStyle = "black";
            ctx.lineWidth = 1;
            createBack(ctx);
 
            createLeft(ctx);
 
            createBottom(ctx, back_height);
 
            if (curType === 'lay') {
                createBottom(ctx, (curVal + 0.5) * back_height / numZ);
            }
 
 
            var start_x = oneWidth / 2 + back_width;
 
            ctx.beginPath();
            ctx.moveTo(start_x, 0 * oneHeight);
            ctx.lineTo(back_width, 2 * oneHeight);
            ctx.lineTo(0, 2 * oneHeight);
            ctx.moveTo(back_width, 2 * oneHeight + back_height);
            ctx.lineTo(back_width, 2 * oneHeight);
            ctx.stroke();
            ctx.closePath();
 
           // updateDisplay(curType,curVal);
 
            addPoint(curType,curVal,ctx);
        }
 
 
        function addPoint(type,curVal,ctx){
            for (var i = 0; i < dm.length; i++) {
                var c = Number(dm[i]['col']);
                var r = Number(dm[i]['row']);
                var l = Number(dm[i]['lay']);
 
                if (dm[i][type] === 1) {
                   // dm[i]['x']=(numX-c-1)*back_width/numX+r*oneWidth*0.5/numY+blockWidth*0.75+rect_start_x;
                  //  dm[i]['y']=(numY-r-1)*oneHeight*2/numY+(l+0.5)*(back_height/numZ)+blockHeight+rect_start_y;
                    dm[i]['x'] = rect_start_x +  1* (back_width / numX) + (r-1)*oneWidth*0.5/numY + blockWidth*0.75;
                    dm[i]['y'] = rect_start_y +  (back_height / numZ);
                    console.log("所在列"+c+"所在行"+r+"所在层"+l);
                    console.log(dm[i]);
                    ctx.fillStyle = "red";
                    ctx.fillRect(dm[i]['x'], dm[i]['y'], blockWidth, blockHeight);
                    ctx.fillStyle = "blue";
                    ctx.fillText("Hello", dm[i]['x'], dm[i]['y']+10);
                }
 
 
 
            }
        };
 
 
        function updateDisplay(type, val) {
            curType = type;
            curVal = val;
            var maxpos = [];
            var minpos = [];
            var max = -200;
            var min = 200;
            for (var i = 0; i < dm.length; i++) {
                var c = Number(dm[i]['col']);
                var r = Number(dm[i]['row']);
                var l = Number(dm[i]['lay']);
 
                if (type === 'lay') {
                    dm[i]['x'] = (numX - c - 1) * back_width / numX + r * oneWidth * 0.5 / numY + blockWidth * 0.75 + rect_start_x;
                    dm[i]['y'] = (numY - r - 1) * oneHeight * 2 / numY + (l + 0.5) * (back_height / numZ) + blockHeight + rect_start_y;
                } else if (type === 'row') {
                    dm[i]['x'] = (numX - c - 1) * back_width / numX + r * oneWidth * 0.5 / numY + blockWidth * 0.75 + rect_start_x;
                    dm[i]['y'] = (numY - r - 1) * oneHeight * 2 / numY + (l + 0.5) * (back_height / numZ) + blockHeight + rect_start_y;
                } else {
                    dm[i]['x'] = (numX - c - 1) * back_width / numX + r * oneWidth * 0.5 / numY + blockWidth * 1.1 + rect_start_x;
                    dm[i]['y'] = (numY - r - 1) * oneHeight * 2 / numY + (l + 0.5) * (back_height / numZ) + blockHeight * 1 + rect_start_y;
                }
                console.log("numX: "+numX+", numY: "+numY+",x: "+dm[i]['x']+", y: "+dm[i]['y']+", hb.oneWidth: "+oneWidth+", heigth: "+oneHeight);
                //console.log("blockWidth: "+blockWidth+", blockHeight: "+blockHeight+", b.x: "+houseBackgroud.x+", b.y: "+houseBackgroud.y+", numZ: "+numZ);
 
                if (dm[i][type] === val) {
                    if (onlyCore.checked) {
                        if ((c === 0 || c === (numX - 1)) && (type !== 'col')) {
                            dm[i]['show'] = false;
                            continue;
                        }
                        if ((r === 0 || r === (numY - 1)) && (type !== 'row')) {
                            dm[i]['show'] = false;
                            continue;
                        }
                        if ((l === 0 || l === (numZ - 1)) && (type !== 'lay')) {
                            dm[i]['show'] = false;
                            continue;
                        }
                    }
                    if (onlyEdge.checked) {
                        if ((l !== 0) && (l !== (numZ - 1)) && (r !== 0) && (r !== (numY - 1)) && (type === 'col')) {
                            dm[i]['show'] = false;
                            continue;
                        }
                        if ((l !== 0) && (l !== (numZ - 1)) && (c !== 0) && (c !== (numX - 1)) && (type === 'row')) {
                            dm[i]['show'] = false;
                            continue;
                        }
                        if ((r !== 0) && (r !== (numY - 1)) && (c !== 0) && (c !== (numX - 1)) && (type === 'lay')) {
                            dm[i]['show'] = false;
                            continue;
                        }
                    }
 
                    dm[i]['show'] = true;
                    if ((dm[i]['val'] > -200) && (dm[i]['val'] < 200)) {
                        if (max < dm[i]['val']) {
                            max = dm[i]['val'];
                            maxpos = [];
                            maxpos.push(i);
                        } else if (max === dm[i]['val']) {
                            maxpos.push(i);
                        }
                        if (min > dm[i]['val']) {
                            min = dm[i]['val'];
                            minpos = [];
                            minpos.push(i);
                        } else if (min === dm[i]['val']) {
                            minpos.push(i);
                        }
                    }
                    dm[i]['flash'] = false;
                } else {
                    dm[i]['show'] = false;
                }
            }
 
            for (i = 0; i < maxpos.length; i++) {
                dm[maxpos[i]]['flash'] = true;
            }
            for (i = 0; i < minpos.length; i++) {
                dm[minpos[i]]['flash'] = true;
            }
            rp.model = dm;
            lb_dm = [];
            for (l = 0; l < numZ; l++) {
                lb_dm.push({
                    'val': l + 1
                    , 'x': rect_start_x + rect_max_width + 5
                    , 'y': (l + 0.5) * (back_height / numZ) + rect_start_y
                    , 'c': false
                })
            }
            rb_dm = [];
            for (r = 0; r < numY; r++) {
                rb_dm.push({
                    'val': r + 1
                    , 'x': rect_start_x + back_width + blockWidth + r * houseBackgroud.oneWidth / 2 / numY
                    , 'y': rect_start_y + back_height + houseBackgroud.oneHeight * 2 * (1 - (r + 0.71) / numY)// 71(r+0.9)*houseBackgroud.oneHeight*2/numY
                    , 'c': false
                })
                //console.log("r: "+r+", hx: "+houseBackgroud.x+", hy: "+houseBackgroud.y+",oneW: "+houseBackgroud.oneWidth+",oneH:"+houseBackgroud.oneHeight)
            }
            cb_dm = [];
            for (c = 0; c < numX; c++) {
                cb_dm.push({
                    'val': c + 1
                    , 'x': rect_start_x + back_width - (c + 1) * back_width / numX
                    , 'y': clom_label_y + blockHeight * 1.2 * (c % 2)
                    , 'c': false
                })
                //console.log("c: "+c+", hx: "+houseBackgroud.x+", hy: "+houseBackgroud.y+",oneW: "+houseBackgroud.oneWidth+",oneH:"+houseBackgroud.oneHeight)
            }
            lb_dm[0]['c'] = true;
 
            rp_lb.model = lb_dm;
            rp_rb.model = rb_dm;
            rp_cb.model = cb_dm;
            requestPaint();
            parent.updateDisplay(type, val)
        }
 
        function createBottom(context, y) {
            var gra = context.createRadialGradient(oneWidth, oneHeight, 0, oneWidth, oneHeight, width);
            gra.addColorStop(0, "#333333");
            gra.addColorStop(1, "white");
            var start_x = oneWidth / 2
 
            context.fillStyle = gra;
            context.beginPath();
            context.moveTo(start_x, y);
            context.lineTo(start_x + back_width, y);
            context.lineTo(back_width, 2 * oneHeight + y);
            context.lineTo(0, 2 * oneHeight + y);
            context.lineTo(start_x, y);
            context.fill();
            context.stroke();
            context.closePath();
        }
 
        function createBack(context) {
            var gra = context.createRadialGradient(oneWidth, oneHeight, 0, oneWidth, oneHeight, width);
            gra.addColorStop(0, "#3333bb");
            gra.addColorStop(1, "white");
 
            var start_x = oneWidth / 2
            var start_y = 0
 
            context.fillStyle = gra;
            context.beginPath();
            context.moveTo(start_x, start_y);
            context.lineTo(start_x + back_width, start_y);
            context.lineTo(start_x + back_width, back_height);
            context.lineTo(start_x, back_height);
            context.lineTo(start_x, start_y);
            context.fill();
            context.stroke();
            context.closePath();
        }
 
        function createLeft(context) {
            var gra = context.createRadialGradient(oneWidth, oneHeight, 0, oneWidth, oneHeight, width);
            gra.addColorStop(0, "#3333bb");
            gra.addColorStop(1, "white");
            var start_x = 0;
            var start_y = 2 * oneHeight;
 
            context.fillStyle = gra;
            context.beginPath();
            context.moveTo(start_x, start_y);
            context.lineTo(start_x, start_y + back_height);
            context.lineTo(oneWidth / 2, back_height);
            context.lineTo(oneWidth / 2, start_x);
            context.lineTo(start_x, start_y);
            context.stroke();
            context.fill();
            context.closePath();
        }
 
        function getRatio() {
            var tmp = 1.3;
            if (Screen.height > 1050) {
                tmp = 1.05
                if (numY <= 5) tmp = 1.3
                else if ((numY >= 6) && (numY <= 7)) tmp = 1.2
                else if ((numY >= 8) && (numY <= 9)) tmp = 1.1
            } else if ((Screen.height <= 1050) && (Screen.height > 960)) {
                tmp = 1;
                if (numY <= 5) tmp = 1.3
                else if ((numY >= 6) && (numY <= 7)) tmp = 1.2
                else if ((numY >= 8) && (numY <= 9)) tmp = 1.1
            } else if ((Screen.height <= 960) && (Screen.height > 900)) {
                tmp = 0.9;
                if (numY <= 7) tmp = 1.2
                else if (numY === 8) tmp = 1.1
                else if (numY === 9) tmp = 1
            } else if ((Screen.height <= 900) && (Screen.height > 800)) {
                tmp = 0.8;
                if (numY <= 6) tmp = 1.2
                else if (numY === 7) tmp = 1.1
                else if (numY === 8) tmp = 1
                else if (numY === 9) tmp = 0.9
            } else if ((Screen.height <= 800) && (Screen.height > 768)) {
                tmp = 0.75;
                if (numY <= 6) tmp = 1.2
                else if (numY === 7) tmp = 1
                else if (numY === 8) tmp = 0.9
                else if (numY === 9) tmp = 0.8
            } else if ((Screen.height <= 768) && (Screen.height > 720)) {
                tmp = 0.75;
                if (numY <= 6) tmp = 1.1
                else if (numY === 7) tmp = 1
                else if (numY === 8) tmp = 0.9
                else if (numY === 9) tmp = 0.8
                back_height = oneHeight * 2.1 * (2 - numY / 10) * 0.7
            } else if (Screen.height <= 720) {
                tmp = 0.66;
                if (numY <= 6) tmp = 1
                else if (numY === 7) tmp = 0.9
                else if (numY === 8) tmp = 0.8
                else if (numY === 9) tmp = 0.7
            }
            return tmp;
        }
        
        draw();
    })();
 
</script>
</html>