Question

通过在jQuery和jQuery Mobile中开发Phonegap应用程序我遇到了这个：

该应用程序从服务器下载图像，并将其放入div中。 div的宽度和高度

取决于方向。在横向模式下，图像变小以适合

div，并且在纵向模式下从它的两侧切下一块以适合div。在这两种情况下

div的height属性设置为100％，因此这将是

的修复点

重新计算坐标，而不是div的宽度。在this主题中，我找到了一个有效的lib，

但仅限于该计划中的第一次。当我改变方向时，坐标

再也不好了。

lib基于以下代码：

function mapRebuild(scaleValue) {
    var map = $("map"); 
    map.find("area").each(function() { // select all areas
        var coords = $(this).attr("coords"); // extract coords
        coords = coords.split(","); // split to array
        var scaledCoords = "";
        for (var coord in coords) { // rebuild all coords with scaleValue
              scaledCoords += Math.floor(coords[coord] * scaleValue) + ",";
        }
        scaledCoords = scaledCoords.slice(0, -1); // last coma delete
        $(this).attr("coords", scaledCoords); // set new coords
    });
}

如果我想保持图像的宽高比并想要重新计算坐标

基于div的高度（在纵向模式13.9em和横向模式8.8em），什么

我应该这样做吗？原始图像尺寸为1000px * 750px。

编辑：我正在收听orientationchange事件，并在那里调用该函数：

function isOrientationPortrait(){
    if (screen.height > screen.width){ 
        return true; 
    } else { 
        return false; 
    }
}

$(window).on('orientationchange', function () {
    if(isOrientationPortrait()){    //Portrait mode
        $("#navbarul li img").removeClass("lips_landscape");
        $("#imgdiv").removeClass("imgdiv_landscape").addClass("imgdiv_portrait");
        $(".ui-grid-c > .ui-block-a, .ui-grid-c > .ui-block-b, .ui-grid-c > .ui-block-c, .ui-grid-c > .ui-block-d").removeClass("navbar_landscape").addClass("navbar_portrait");
        $("#imageID").removeClass("image_landscape").addClass("image_portrait"); 
        $('map').imageMapResize();
    } else {    //Landscape mode
        $("#navbarul li img").addClass("lips_landscape");
        $("#imgdiv").removeClass("imgdiv_portrait").addClass("imgdiv_landscape");
        $(".ui-grid-c > .ui-block-a, .ui-grid-c > .ui-block-b, .ui-grid-c > .ui-block-c, .ui-grid-c > .ui-block-d").removeClass("navbar_portrait").addClass("navbar_landscape");
        $("#imageID").removeClass("image_portrait").addClass("image_landscape"); 
        $('map').imageMapResize();
    }
});

图像地图坐标重新计算

0 个答案: