layer.photos放大缩小以及旋转(修复缩放中心点偏移)

原文地址：​​​​​​​https://blog.csdn.net/qq_35031260/article/details/118786216​​​​​​

 在使用layer.photos 时，同事们说，要加个旋转和缩放的功能，在网上寻找了下实现方法，最后参考了上面这个文章的代码。

但是上面的代码，在使用过程中，发现有如下问题

1、缩放时，图片始终是绕图片中心点偏移

2、旋转时，长方形图片，会偏移出屏幕范围

于是自行魔改了下，代码如下：

// layer.photos 的旋转和缩放tab方法
function photosTab(){
    $("#layui-layer-photos").append('<div class="pootosIcon" style="position:absolute;width:100%;text-align:center;bottom:0px;cursor:pointer;">\n' +
        '\t\t<img src="/static/index/images/xuanzhuan2.png" style="width:30px;height:30px;margin-left: -50px">\n' +
        '\t</div>');
}

let current=0
// 旋转
//相册里点击旋转按钮旋转图片
$(document).on("click", ".pootosIcon", function (e) {
    current = (current + 90) % 360;
    let imglayer = $(".layui-layer-phimg img");
    // 创建对象
    var img = new Image();

    // 改变图片的src
    img.src = imglayer.attr("src");
    var width = img.width;
    var height = img.height;
    var imagep = $(".layui-layer-phimg").parent().parent();

    // 宽高比
    let bl = width/height;
    if (current == 90 || current == 270) {
        // 限制旋转后的最大宽高
        if(width>height && width>window.innerWidth){
            width = window.innerHeight*0.9;
            height = width / bl;
        }else if(height>width && height> window.innerHeight){
            height = window.innerWidth*0.9;
            width = height * bl;
        }
        $(".layui-layer.layui-layer-page.layui-layer-photos").css("width",height);
        $(".layui-layer.layui-layer-page.layui-layer-photos").css("height",width);
        imagep.css("top", (window.innerHeight - width) / 2);
        imagep.css("left", (window.innerWidth - height) / 2);
        $("#layui-layer-photos").css("width",height);
        $("#layui-layer-photos").css("height",width);
        imglayer.css("margin-top",-(height-width)/2);
        if(height<width){
            imglayer.css("margin-left",(height-width)/2);
        }
        imglayer.css("width",width);
    }else{
        // 限制旋转后的最大宽高
        if(width>height && width>window.innerWidth){
            width = window.innerWidth*0.9;
            height = width / bl;
        }else if(height>width && height> window.innerHeight){
            height = window.innerHeight*0.9;
            width = height * bl;
        }
        $(".layui-layer.layui-layer-page.layui-layer-photos").css("height",height);
        $(".layui-layer.layui-layer-page.layui-layer-photos").css("width",width);
        imagep.css("top", (window.innerHeight - height) / 2);
        imagep.css("left", (window.innerWidth - width) / 2);
        $("#layui-layer-photos").css("height",height);
        $("#layui-layer-photos").css("width",width);
        imglayer.css("margin-top",0);
        if(height<width){
            imglayer.css("margin-left",0);
        }
        imglayer.css("width",width);
    }
    imglayer.css('transform', 'rotate(' + current + 'deg)');
});

// 缩放
$(document).on("mousewheel DOMMouseScroll", ".layui-layer-phimg img", function (e) {
    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
        (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
    var imagep = $(".layui-layer-phimg").parent().parent();
    var image = $(".layui-layer-phimg").parent();
    var h = image.height();
    var w = image.width();
    let offset = imagep.offset();
    let oldTop = (offset.top - (window.innerHeight - h ) / 2)
    let oldLeft = (offset.left - (window.innerWidth - w ) / 2)

    if (delta > 0) {
        oldTop *= 1.05
        oldLeft *= 1.05
        h = h * 1.05;
        w = w * 1.05;
    } else if (delta < 0) {
        if (h > 100) {
            oldTop *= 0.95
            oldLeft *= 0.95

            h = h * 0.95;
            w = w * 0.95;
        }
    }
    // 校正缩放位置偏移
    imagep.css("top", (window.innerHeight - h ) / 2 + oldTop);
    imagep.css("left", (window.innerWidth - w ) / 2 + oldLeft);
    image.height(h);
    image.width(w);
    imagep.height(h);
    imagep.width(w);
    let imglayer = $(".layui-layer-phimg img");
    if (current == 90 || current == 270) {
        let top = -(w-h)/2
        imglayer.css("margin-top",top);
        imglayer.css("width",h);
    }else{
        imglayer.css("margin-top",0);
        imglayer.css("width",w);
    }
});

将上面三段js代码 保存在一个js文件中，然后 在页面中引入进来，使用的时候 即可这样使用它

layer.photos({
                    photos: json
                    ,anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                    tab:photosTas,
                });

噢，对了，要记得替换原layer.js 代码中的最后一个 content

content: '<input type="hidden" id="current"><div class="layui-layer-phimg"><img id="imglayer" src="' + u[d].src + '" alt="' + (u[d].alt || "") + '" layer-pid="' + u[d].pid + '"><div class="layui-layer-imgbar" style="width:100%;height: 100%; background-color:rgba(0, 0, 0, 0)"></div><div class="layui-layer-imgsee">' + (u.length > 1 ? '<span class="layui-layer-imguide"><a href="javascript:;" class="layui-layer-iconext layui-layer-imgprev"></a><a href="javascript:;" class="layui-layer-iconext layui-layer-imgnext"></a></span>' : "") + '<div class="layui-layer-imgbar" style="display:' + (a ? "block" : "") + '"><span class="layui-layer-imgtit"><a href="javascript:;">' + (u[d].alt || "") + "</a><em>" + s.imgIndex + "/" + u.length + "</em></span></div></div></div>"

最后，效果如下：

 

 不足之处：因为存储旋转状态是用的一个全局变量 current，所以当旋转了第一张图片到90度后，切换到第二张图片，再旋转，会导致第二张图片直接旋转到180度，这个问题，因为使用体验影响不是很大，所以就没有去想办法修正了，有兴趣的小伙伴可以修复后贴代码在评论区哦