Отрегулируйте размер и положение расположенных объектов в соответствии с пользовательским разрешением jquery - PullRequest
Новая
       51

Отрегулируйте размер и положение расположенных объектов в соответствии с пользовательским разрешением jquery

0 голосов
/ 21 декабря 2018

У меня есть страница, управляемая javascript, где я динамически размещаю рабочие столы на фоновом изображении плана этажа.Проблема, с которой я сталкиваюсь, заключается в том, что изображение плана этажа растягивается, чтобы соответствовать экрану пользователя.Теперь мне нужен способ изменить размер и положение стола (div с фоновым изображением), чтобы отразить новые размеры.

Что я сделал, так это создал функцию, которая дает мне соотношение регулировки плана этажа к размеру экрана: 

function getResolutionRatio(){
    var width=$(window).width();
    var height=$(window).height();

    var location=-1
    //get floorplan image height and width

    var img=$("#bgImg")[0];
    if(img.naturalWidth){
        var imgW=img.naturalWidth;
        var imgH=img.naturalHeight;
        var ratioH=height/imgH;
        var ratioW=width/imgW;
        ratio={'h':ratioH, 'w':ratioW};
    }

Это дает мне соотношение от 1,2 до 1,6.Что я пробовал с этими соотношениями, так это умножил или разделил (попробовал оба) размер и положение каждой парты.Все позиционируется абсолютно, но этот трек не работает.

//makeDesk snippet - positioning function
var d = $("<div />", {
        id: "desk_" + desk.id,
        style:  "background-image:url(./images/Desks/desk" + desk.deskType + ".png);transform:rotate(" + desk.rotation + "deg)"
    }); //var d=div...

//store size and position for adjusting according to zoom capture
    d.data("height",desk.height/ratio.h);
    d.data("width",desk.width/ratio.w);
    d.data("top",desk.y/ratio.h);
    d.data("left",desk.x/ratio.w);

    d.css({'left': d.data("left") + "px", 'top': + d.data("top") + "px",
                'height': d.data("height") + "px", 'width': d.data("width") + "px",
                "font-size": + d.data("width")/2 +"px"});
//end snippet

Я ищу какие-либо предложения о том, как изменить мой код или изменить мой подход, чтобы сделать эту работу.

Спасибо.

...