canvas 多层弹框

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_29099209/article/details/80617886

思路是创建两个画布,隐藏弹出的画布,在基础画布点击元素时,创建一个矩形或圆形,判断点击位置是否在区域内,实现点击判断,初始化弹出层并控制弹出层显示/隐藏

1:创建两个canvas画布

HTML

<canvas id="worksite_schema" width="100" height="800"></canvas>

<canvas id="detail_schema" width="400" height="800"></canvas>

CSS

 #worksite_schema {
        border: 1px solid #ADACB0;
        display: block;
        z-index: 1;
    }

    #detail_schema {
        z-index: 2;
        border-radius: 10px;
        position: absolute;
        display: none;
        background-color: #f5f5f5;
        border: 5px solid #ffffff;
    }

2:初始化画布

$('#worksite_schema').attr('width', $('#canvasBox').width() );
$('#worksite_schema').attr('height', $('#tree').height());
$('#detail_schema').attr('width', $('#canvasBox').width() / 2);
$('#detail_schema').attr('height', $('#tree').height() / 2);
$('#detail_schema').css('margin-top', -$('#tree').height() * 4 / 5);
$('#detail_schema').css('margin-left', $('#canvasBox').width() / 3);


// 获取画布资源以及图像绘制上下文
var canvas = document.getElementById("worksite_schema");
var detail_canvas = document.getElementById("detail_schema");
var context = canvas.getContext("2d");
var detail_context = detail_canvas.getContext("2d");
var contextWidth = $('#worksite_schema').width();
var contextHeight = $('#worksite_schema').height();
var activeObject = 0;
var deviceType = 2;
var elements = [];
var selectSite = 0;
init();
function initSketchMap(guid) {
    selectSite = guid;
    requestDataViaAjax("/queryData", {
        'queryType': 35,
        'guid_list': guid
    }, function (e) {
        elements = e;
        elements = initResource(elements);
        init();
    }, function (e) {
        console.log(e);
    });

}


// 初始化图片元素
function initResource(element) {
    for (var i in element) {
        var icon = new Image();
        icon.onload = function () {
            console.log("img is loaded")
        };
        icon.onerror = function () {
            console.log("img is loaded error!")
        };
        icon.src = element[i].icon_path;
        element[i]['icon_dom'] = icon;
        if (element[i]['detail'] != false) {
            initResource(element[i]['detail'])
        }
    }
    return element;
}

// 设置图像源
function init() {
    var icon = new Image();
    icon.src = 'img/sketchMap/worksite_bkg.png';
    icon.onload = function () {
        context.drawImage(icon, 0, 0, contextWidth, contextHeight);
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].type == deviceType) {
                context.drawImage(elements[i].icon_dom, elements[i].x, elements[i].y, elements[i].width, elements[i].height);
            }
        }

    }
}

设置监听

canvas.addEventListener('click', function (event) {
    console.log(elements);
    //标准的获取鼠标点击相对于canvas画布的坐标公式
    var x = event.pageX - canvas.getBoundingClientRect().left;
    var y = event.pageY - canvas.getBoundingClientRect().top;
    for (var i = 0; i < elements.length; i++) {
        context.beginPath();
        context.rect(elements[i].x, elements[i].y, elements[i].width, elements[i].height);
        if (context.isPointInPath(x, y) && elements[i].type == deviceType) {
            detail_context.clearRect(0, 0, detail_canvas.width, detail_canvas.height);
            activeObject = i;
            for (var j = 0; j <= elements[i].detail.length - 1; j++) {
                detail_context.drawImage(elements[i].detail[j].icon_dom, 0, 0, $('#detail_schema').width() / 2, $('#detail_schema').height() / 2);
                detail_context.font = "bold 15px Arial";
                detail_context.fillStyle = "#058";

                for (var k in elements[i].detail[j].detail) {
                    var parametersHeight = $('#detail_schema').height() / elements[i].detail[j].detail.length;
                    var parametersWidth = $('#detail_schema').width();
                    detail_context.drawImage(elements[i].detail[j].detail[k].icon_dom, parametersWidth * 7 / 12, parametersHeight * k, 30, 30);
                    detail_context.fillText(
                        elements[i].detail[j].detail[k].name + ':' +
                        elements[i].detail[j].detail[k].value +
                        elements[i].detail[j].detail[k].unit,
                        parametersWidth * 8 / 12,
                        20 + parametersHeight * k);
                }
                detail_context.fillRect(15, $('#detail_schema').height() / 2 + 10, $('#detail_schema').width() / 2 - 30, $('#detail_schema').height() / 6 - 20);
                detail_context.fillStyle = "#ffffff";
                detail_context.fillText(
                    '模块号:' + elements[i].id,
                    $('#detail_schema').width() / 6,
                    $('#detail_schema').height() * 7 / 12);
                detail_context.fillStyle = "#058";

                detail_context.fillRect(15, $('#detail_schema').height() * 2 / 3 + 10, $('#detail_schema').width() / 2 - 30, $('#detail_schema').height() / 6 - 20);
                detail_context.fillStyle = "#ffffff";
                detail_context.fillText(
                    '状态:' + elements[i].status,
                    $('#detail_schema').width() / 6,
                    $('#detail_schema').height() * 9 / 12);
                detail_context.fillStyle = "#058";

                detail_context.fillRect(15, $('#detail_schema').height() * 5 / 6 + 10, $('#detail_schema').width() / 2 - 30, $('#detail_schema').height() / 6 - 20);
                detail_context.fillStyle = "#ffffff";
                detail_context.fillText(
                    '查看详情',
                    $('#detail_schema').width() / 5,
                    $('#detail_schema').height() * 11 / 12);
            }
            $('#detail_schema').show();
            break;
        } else {
            $('#detail_schema').hide();
        }
    }
});

//点击二级画布
detail_canvas.addEventListener('click', function (event) {
    var x = event.pageX - detail_canvas.getBoundingClientRect().left;
    var y = event.pageY - detail_canvas.getBoundingClientRect().top;
    detail_context.rect(15, $('#detail_schema').height() * 5 / 6 + 10, $('#detail_schema').width() / 2 - 30, $('#detail_schema').height() / 6 - 20);
    detail_context.stroke();
    if (detail_context.isPointInPath(x, y)) {
        window.location.href = elements[activeObject].href + '?guid='+selectSite;
    }
});
//修改查看的设备类型 控制设备显示/隐藏
function changeType(e) {
    deviceType = e;
    context.clearRect(0, 0, canvas.width, canvas.height);
    init();
}




展开阅读全文

没有更多推荐了,返回首页