图片缩放

public/index.html

@@ -13,6 +13,7 @@
   <meta name="renderer" content="webkit">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <script src="/js/hammer.js"></script>
   <title>
     国家烟草识别培训系统
   </title>

src/components/Image/ImageZoom.vue

+<template>
+    <div class="pinch-zoom-container">
+        <img id="pinch-zoom-image-id" class="pinch-zoom-image"  :src="src">
+    </div>
+</template>
+  <script>
+  export default {
+    name: 'ImageZoom',
+    props: ['src'],
+    data() {
+      return {
+        MIN_SCALE : 1, // 1=scaling when first loade,
+        MAX_SCALE : 64,
+        imgWidth : null,
+        imgHeight : null,
+        viewportWidth : null,
+        viewportHeight : null,
+        scale : null,
+        lastScale : null,
+        container : null,
+        img : null,
+        x : 0,
+        lastX : 0,
+        y : 0,
+        lastY : 0,
+        curWidth:null,
+        curHeight:null,
+        pinchCenter : null,
+      }
+
+    },
+    computed: {
+     
+    },
+    created(){
+
+    },
+    methods: {
+        disableImgEventHandlers() {
+            var _that=this
+            var events = ['onclick', 'onmousedown', 'onmousemove', 'onmouseout', 'onmouseover',
+                        'onmouseup', 'ondblclick', 'onfocus', 'onblur'];
+
+            events.forEach(function (event) {
+                _that.img[event] = function () {
+                    return false;
+                };
+            });
+        },
+        absolutePosition(el){
+            var x = 0,
+                y = 0;
+
+            while (el !== null) {
+                x += el.offsetLeft;
+                y += el.offsetTop;
+                el = el.offsetParent;
+            }
+            return { x: x, y: y };
+        },
+        restrictScale(scale) {
+            if (scale < this.MIN_SCALE) {
+                scale = this.MIN_SCALE;
+            } else if (scale > this.MAX_SCALE) {
+                scale = this.MAX_SCALE;
+            }
+            return scale;
+        },
+        restrictRawPos(pos, viewportDim, imgDim) {
+            if (pos < viewportDim/this.scale - imgDim) { // too far left/up?
+                pos = viewportDim/this.scale - imgDim;
+            } else if (pos > 0) { // too far right/down?
+                pos = 0;
+            }
+            return pos;
+        },
+        updateLastPos(deltaX, deltaY) {
+            this.lastX = this.x;
+            this.lastY = this.y;
+        },
+        translate(deltaX, deltaY) {
+        // We restrict to the min of the viewport width/height or current width/height as the
+        // current width/height may be smaller than the viewport width/height
+
+            var newX = this.restrictRawPos(this.lastX + deltaX/this.scale,
+                                        Math.min(this.viewportWidth, this.curWidth), this.imgWidth);
+            this.x = newX;
+            this.img.style.marginLeft = Math.ceil(newX*this.scale) + 'px';
+
+            var newY = this.restrictRawPos(this.lastY + deltaY/this.scale,
+                                        Math.min(this.viewportHeight, this.curHeight), this.imgHeight);
+            this.y = newY;
+            this.img.style.marginTop = Math.ceil(newY*this.scale) + 'px';
+        },
+        zoom(scaleBy) {
+            this.scale = this.restrictScale(this.lastScale*scaleBy);
+
+            this.curWidth = this.imgWidth*this.scale;
+            this.curHeight = this.imgHeight*this.scale;
+
+            this.img.style.width = Math.ceil(this.curWidth) + 'px';
+            this.img.style.height = Math.ceil(this.curHeight) + 'px';
+
+            // Adjust margins to make sure that we aren't out of bounds
+            this.translate(0, 0);
+        },
+        rawCenter(e) {
+            var pos = this.absolutePosition(this.container);
+            // We need to account for the scroll position
+            var scrollLeft = window.pageXOffset ? window.pageXOffset : document.body.scrollLeft;
+            var scrollTop = window.pageYOffset ? window.pageYOffset : document.body.scrollTop;
+
+            var zoomX = -this.x + (e.center.x - pos.x + scrollLeft)/this.scale;
+            var zoomY = -this.y + (e.center.y - pos.y + scrollTop)/this.scale;
+            return { x: zoomX, y: zoomY };
+        },
+        updateLastScale() {
+            this.lastScale = this.scale;
+        },
+        zoomAround(scaleBy, rawZoomX, rawZoomY, doNotUpdateLast) {
+            this.zoom(scaleBy);
+            // New raw center of viewport
+            var rawCenterX = -this.x + Math.min(this.viewportWidth, this.curWidth)/2/this.scale;
+            var rawCenterY = -this.y + Math.min(this.viewportHeight, this.curHeight)/2/this.scale;
+
+            // Delta
+            var deltaX = (rawCenterX - rawZoomX)*this.scale;
+            var deltaY = (rawCenterY - rawZoomY)*this.scale;
+
+            // Translate back to zoom center
+            this.translate(deltaX, deltaY);
+
+            if (!doNotUpdateLast) {
+                this.updateLastScale();
+                this.updateLastPos();
+            }
+        },
+        zoomCenter(scaleBy) {
+            // Center of viewport
+            var zoomX = -this.x + Math.min(this.viewportWidth, this.curWidth)/2/this.scale;
+            var zoomY = -this.y + Math.min(this.viewportHeight, this.curHeight)/2/this.scale;
+
+            this.zoomAround(scaleBy, zoomX, zoomY);
+        },
+        onLoad() {
+            this.img = document.getElementById('pinch-zoom-image-id');
+            this.container = this.img.parentElement;
+            this.disableImgEventHandlers();
+            this.imgWidth = this.img.width;
+            this.imgHeight = this.img.height;
+            this.viewportWidth = this.img.offsetWidth;
+            this.scale = this.viewportWidth/this.imgWidth;
+            this.lastScale = this.scale;
+            this.viewportHeight = this.img.parentElement.offsetHeight;
+            this.curWidth = this.imgWidth*this.scale;
+            this.curHeight = this.imgHeight*this.scale;
+
+            var hammer = new Hammer(this.container, {
+                domEvents: true
+            });
+            var _that=this
+            hammer.get('pinch').set({
+                enable: true
+            });
+
+            hammer.on('pan', function (e) {
+                _that.translate(e.deltaX, e.deltaY);
+            });
+
+            hammer.on('panend', function (e) {
+                _that.updateLastPos();
+            });
+
+            hammer.on('pinch', function (e) {
+                // We only calculate the pinch center on the first pinch event as we want the center to
+                // stay consistent during the entire pinch
+                if (_that.pinchCenter === null) {
+                    _that.pinchCenter = _that.rawCenter(e);
+                    var offsetX = _that.pinchCenter.x*_that.scale - (-_that.x*_that.scale + Math.min(_that.viewportWidth, _that.curWidth)/2);
+                    var offsetY = _that.pinchCenter.y*_that.scale - (-_that.y*_that.scale + Math.min(_that.viewportHeight, _that.curHeight)/2);
+                    _that.pinchCenterOffset = { x: offsetX, y: offsetY };
+                }
+               
+                var newScale = _that.restrictScale(_that.scale*e.scale);
+                var zoomX = _that.pinchCenter.x*newScale - _that.pinchCenterOffset.x;
+                var zoomY = _that.pinchCenter.y*newScale - _that.pinchCenterOffset.y;
+                var zoomCenter = { x: zoomX/newScale, y: zoomY/newScale };
+                
+                _that.zoomAround(e.scale, zoomCenter.x, zoomCenter.y, true);
+            });
+
+            hammer.on('pinchend', function (e) {
+                _that.updateLastScale();
+                _that.updateLastPos();
+                _that.pinchCenter = null;
+            });
+
+            hammer.on('doubletap', function (e) {
+                var c = _that.rawCenter(e);
+                _that.zoomAround(2, c.x, c.y);
+            });
+
+        }
+    },
+    mounted(){
+        this.onLoad()
+    },
+    
+  }
+  </script>
+<style scoped>
+    .c-zoom__wrapper {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+    .pinch-zoom-container {
+        overflow: hidden;
+        height:80vh;
+    }
+
+    .pinch-zoom-image {
+        width: 100%;
+    }
+
+</style>
\ No newline at end of file

src/views/analysis/index.vue

@@ -116,10 +116,11 @@
                               v-if="e.image && e.image != '/'"
                               class="image_box"
                             >
+                            <!-- :preview-src-list="[IP + e.image]" -->
                               <el-image
                                 style="width: 200px"
                                 :src="IP + e.image"
-                                :preview-src-list="[IP + e.image]"
+                                @click="ImageZoomUrl=IP + e.image;is_ImageZoom=true"
                               >
                               </el-image>
                               <!-- <img :src="IP + e.image" alt="" /> -->
@@ -187,20 +188,22 @@
       </el-card>
     </div>
 
-    <el-dialog title="提示" :visible.sync="is_dialogVisible" width="60%">
+    <el-dialog title="" :visible.sync="is_ImageZoom" top="0" style="height:100vh" width="100%">
       <div class="table_box">
         <!--  -->
+        <ImageZoom :src="ImageZoomUrl"></ImageZoom>
       </div>
-      <span slot="footer" class="dialog-footer">
+      <!-- <span slot="footer" class="dialog-footer">
         <el-button>取 消</el-button>
         <el-button type="primary">确 定</el-button>
-      </span>
+      </span> -->
     </el-dialog>
   </div>
 </template>
 
 <script>
 import TestInfo from '@/components/TestInfo/index.vue';
+import ImageZoom from '@/components/Image/ImageZoom.vue';
 import { viewExamResults } from '@/api/user';
 import { array_conversion } from '@/utils/tool';
 import Summary from './components/summary-view';
@@ -209,9 +212,11 @@ import OverallAppraisal from './components/overall_appraisal_view.vue';
 
 export default {
   name: '',
-  components: { TestInfo, Summary, StudentComments, OverallAppraisal },
+  components: { ImageZoom,TestInfo, Summary, StudentComments, OverallAppraisal },
   data() {
     return {
+      ImageZoomUrl:null,
+      is_ImageZoom:false,
       IP: process.env.VUE_APP_BASE_API,
 
       //初始化请求参数