小编nor*_*ana的帖子

我有一个有趣的CSS/JavaScript问题.我正在构建一个用户友好的网络地图,其中包括自愿提供的地理信息,并且需要能够以多种纸张尺寸打印,最大可达海报尺寸.对于接口,我正在使用Leaflet.js,Mapbox.js和jQuery.我接近打印的方法是设置一个预览窗口,该窗口仅在具有白色背景的全新L.Map上显示叠加(无tileLayer),其中标记与用户选择的纸张大小成比例缩放.我们的想法是地图将填充页面,标记将始终以相同的尺寸打印(圆形标记为8 mm,图标为10 mm).这是Firefox中预览窗口的屏幕截图:

有一些复杂的代码.可以这样说,每当用户改变窗口大小或纸张方向时,预览框和图标都会相应地调整大小.每当用户更改纸张尺寸时,图标会调整大小,但预览框不会,以便表示正确的尺寸比率.以下是我用来执行此操作的功能:

function adjustPreviewBox(){
    //set preview box dimensions based on print window size and paper orientation
    if ($("#paperOrientation option[value=portrait]").prop("selected")){
        var height = $("#printBox").height() - 61;
        var width = height / Math.sqrt(2);
        $("#printPreview").height(height);
        $("#printPreview").width(width);
    } else {
        //first set by horizontal dimension
        var width = $("#printBox").width() - 300;
        var height = width / Math.sqrt(2);
        //check for vertical overflow
        if (height > $("#printBox").height() - 61){
            height = $("#printBox").height() - 61;
            width = height * Math.sqrt(2);
        };
        $("#printPreview").height(height);
        $("#printPreview").width(width);
    }
}; …