dojo动态生成图片并按中心缩放

时间：2023-03-09 09:02:02
dojo动态生成图片并按中心缩放

首先，本人在项目动态加载图片是根据点击图片名称来获取图片所在地址，从而使其打开一个新的窗口显示图片的。这里根据每个人的也许需求进行更改（要么就是在本页面底下打开要么就是新建一个窗口打开），不做探讨。

这里先介绍一下HTML界面，只有两个<div>标签，如下：

<div class="preview-scene" data-dojo-attach-point="previewScene" id="previewScene">
    <div class="preview-scene-data" data-dojo-attach-point="previewSceneData" id="previewSceneData">

    </div>
</div>
previewScene指的是预览的总界面；previewSceneData指的是具体的预览照片放的位置。
接下来就是创建预览功能了。如下：_createPreview: function(fileRoute){    var container = this.previewSceneData;
    var imgContainer;
    html.empty(container);
    var fileType = fileRoute.split(".");
    var hzm = fileType[fileType.length - 1];
    //根据传过来的类型判定是图片还是文件创建
    if(hzm === "jpg" || hzm === "jpeg" || hzm === "png" || hzm === "gif" || hzm === "bmp"|| hzm === "tiff"|| hzm === "JPG"|| hzm === "JPEG"|| hzm === "PNG"|| hzm === "BMP" || hzm === "TIFF"){
        imgContainer = domCon.create('img',{src: fileRoute, style:'width: 560px; height:420px;position: absolute;left: 0; top: 0; right: 0; bottom: 0; margin:auto; display: block;cursor:pointer;'}, container);
    } else if(hzm === "docx" || hzm === "doc" || hzm === "pdf" || hzm === "xls" || hzm === "xlsx" || hzm === "txt" || hzm === "DOCX" || hzm === "DOC" || hzm === "PDF" ) {
        domCon.create('iframe',{src: fileRoute, style:'width: 560px; height:420px; margin: 0 auto; display: block'}, container);
    } else {
        alert("您的文件类型不支持预览！");
    }
    on(imgContainer,'mousewheel', lang.hitch(this, function(e){
        this._change(e, imgContainer);
    }));
},

_change: function (e, imgContainer) {
    var e = window.event || e;
    var oper = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));//wheelDelta和detail
    imgContainer.style.width = Math.max(80, Math.min(imgContainer.width*3, imgContainer.width + (80 * oper))) + "px";
    imgContainer.style.height = Math.max(60, Math.min(imgContainer.height*3, imgContainer.height + (60 * oper))) + "px";
    return false;
},

解释：fileRoute指图片所在的具体地址，用于放在创建的img标签中的src；container 指的是这个HTML中的data-dojo-attach-point；
那么实现放大缩小功能靠的是_change方法，这个方法监听着动态创建的imgContainer的‘mousewheel’事件。当鼠标滚轮发生滚动的时候，触发_change事件，然后再_change事件里定义
imgContainer的新的宽度和高度，并设置最小宽度和高度。
图片由中心进行缩小和放大，主要是要将图片置于外边框的中心，使其垂直和水平都居中，如设置它的style:'width: 560px; height:420px;position: absolute;left: 0; top: 0; right: 0; bottom: 0; margin:auto;
首先设置其高宽，再把position设为absolute，top、left、right、bottom均设为0，margin改为auto即可。

相关文章