• 记一次根据图片原尺寸设置样式,并进行缩放和拖拽


    话不多说直接上代码,注释很详细,有不懂的可以直接问我

    <template>
      <!--分窗满窗--照片查看组件-->
      <div :id="currentId"
           @mousewheel.stop="wheelToScalingTheImage"
           class="image-viewer-in-segmentation-model segmentation-image-viewer">
          <img @load="getImageNaturalSize()"
               @mousedown.stop="dragTheImage"
               @mousemove.stop="imageMoveStarts"
               @mouseup.stop="imageMoveEnds"
               class="image-con"
               :id="currentImgId"
               :src="imageSourceUrl" alt="照片查看">
      </div>
    </template>
    
    <script>
        export default {
            data() {
                return {
                  natural_ 0,//图片资源的原始宽度
                  natural_height: 0,//图片资源的原始高度
                  client_ 0,//初始时图片的预设宽度
                  client_height: 0,//初始时图片的预设高度
                  min_0,//最小可缩放至
                  maxScale:0,//最大缩放程度
                  offset_x:0,//拖动时鼠标指针x方向的偏移量
                  offset_y:0,//拖动时鼠标指针y方向的偏移量
                  is_movable: false,//当前是否可拖动
                }
            },
            props:['imageSourceUrl','currentLoad'],
            methods: {
              //获取图片原始宽高
              getImageNaturalSize(){
                debugger
                let image_con = document.getElementById(this.currentImgId);
                // let image_con = document.querySelector('.image-con');
                this.natural_width = image_con.naturalWidth;
                this.natural_height = image_con.naturalHeight;
                this.client_width = image_con.clientWidth;
                this.client_height = image_con.clientHeight;
                let CLIENT_WIDTH, CLIENT_HEIGHT ;
                if(this.natural_width > this.natural_height){
                  image_con.style.height = 'auto';
                  image_con.style.width = '100%';
                }
                CLIENT_WIDTH = image_con.clientWidth / 16 + 'rem'
                CLIENT_HEIGHT = image_con.clientHeight / 16 + 'rem'
                image_con.style.left = `calc((100% - ${CLIENT_WIDTH}) / 2)`;
                image_con.style.top = `calc((100% - ${CLIENT_HEIGHT}) / 2)`;
                this.maxScale = this.natural_height / this.client_height;
                this.min_width = this.natural_width / this.maxScale;
                let minScale = 0.5;
                console.log("照片的原始尺寸是:",this.natural_width+ 'x'+ this.natural_height);
              },
              //滚动鼠标滚轮对图片进行缩放
              wheelToScalingTheImage(event){
                let _this = this;
                let direction = _this.handleScrollDirection(event);
                let image_con = document.getElementById(this.currentImgId);
                // let image_con = document.querySelector('.image-con');
                let out_count = 0,in_count = 0;
                if(direction === 'up'){
                  if(out_count < this.maxScale - 1){
                    out_count ++;
                    in_count = out_count
                    image_con.style.height = this.natural_height * ((out_count + 1) / this.maxScale) / 16 +'rem';
                    image_con.style.width = this.natural_width * ((out_count + 1) / this.maxScale) / 16 +'rem';
                  }
                  else if(out_count >= this.maxScale - 1){
                    out_count = this.maxScale;
                    in_count = out_count;
                    image_con.style.height = this.natural_height / 16 + 'rem';
                    image_con.style.width = this.natural_width / 16 + 'rem';
                  }
                }
                else if(direction === 'down'){
                  if(in_count > 1){
                    in_count--;
                    out_count = in_count;
                    image_con.style.height = this.natural_height * ((in_count + 1) / this.maxScale) / 16 +'rem';
                    image_con.style.width = this.natural_width * ((in_count + 1) / this.maxScale) / 16 +'rem';
                  }
                  else if(in_count <= 1){
                    in_count = 1;
                    out_count = in_count;
                    image_con.style.height = this.client_height / 16 +'rem';
                    image_con.style.width = 'auto';
                  }
                }
              },
              //判断滚轮的滚动方向,以判断是放大或是缩小行为
              handleScrollDirection(e) {
                let direction = e.deltaY > 0 ? 'down' : 'up';
                return direction;
              },
              //拖拽图片到指定位置
              dragTheImage(event){
                if(event.button == 0){
                  this.is_movable = true;
                  //获取被拖动的元素
                  let image_con = document.getElementById(this.currentImgId);
    //为了兼容IE8  下面这行代码表示你有这个就执行
                  //浏览器有一个默认行为 就是你选种的元素有一个拖拽的效果 拉到导航栏中可以搜索的那个捕获ta(保证可获取连续拖动的事件对象)
                  image_con.setCaptue && image_con.setCaptue();
                  //也是为了兼容IE8 window.event(IE8) 它的事件对象属性在window中
                  event = event || window.event;
                  //获取偏移量 保持鼠标的指针 不动  offsetLeft返回当前元素左上角相对于 HTMLElement.offsetParent节点的左边界偏移的像素值。
                  //偏移量 offset
                  this.offset_x = event.clientX - image_con.offsetLeft;
                  this.offset_y = event.clientY - image_con.offsetTop;
                }
              },
              //当图片开始跟随鼠标指针移动时
              imageMoveStarts(event){
                console.log(event.action,"打印的拖动的action")
                if(this.is_movable){
                  let image_con = document.getElementById(this.currentImgId);
                  event = event ||window.event;
                  //当鼠标移动时 被拖拽元素跟移动
                  //获取鼠标的二维坐标(无偏移的)
                  this.unbiased_left = event.clientX - this.offset_x;
                  this.unbiased_top = event.clientY - this.offset_y;
                  //修改图片的位置
                  image_con.style.left = this.unbiased_left / 16 + 'rem';
                  image_con.style.top = this.unbiased_top / 16 + 'rem';
                }
              },
              //当松开鼠标,图片移动终止
              imageMoveEnds(event){
                debugger
                this.is_movable = false;
              },
              //干掉h5原生事件,防止在拖动时mouse-up不能触发
              cancelNativeH5Event(){
                document.ondragstart = function(ev) {
                  ev.preventDefault();
                };
                document.ondragend = function(ev) {
                  ev.preventDefault();
                }
              },
            },
            components: {},
            watch: {},
            computed: {
              currentId(){
                return 'segmentationImageViewer'+ this.currentLoad
              },
              currentImgId(){
                return 'imageConId' + this.currentLoad
              },
            },
            mounted() {
              this.cancelNativeH5Event();
            },
            created() {
            },
            beforeDestroy() {
            },
    
        }
    </script>
    
    <style lang="less" scoped>
    .segmentation-image-viewer{
      width: 100%;
      height:100%;
      position: absolute;
      left: 0rem;
      top:0rem;
      z-index: 999;
      /*display: flex;
      align-items: center;
      justify-content: center;*/
      overflow: hidden;
      .image-con{
        width: auto;
        height: 100%;
        object-fit:cover;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    </style>
  • 相关阅读:
    nyoj 599-奋斗的小蜗牛 (double ceil(); (temp
    nyoj 596-谁是最好的Coder (greater, less)
    nyoj 517-最小公倍数 (python range(start, end) range(length))
    用深度学习预测专业棋手走法
    阿里AI设计师一秒出图,小撒连连惊呼,真相是...
    想成为数据科学家?先做到这6点吧!
    Kubernetes 弹性伸缩全场景解析 (一)- 概念延伸与组件布局
    机器学习基础:(Python)训练集测试集分割与交叉验证
    Data Lake Analytics + OSS数据文件格式处理大全
    聊聊Flexbox布局中的flex的演算法
  • 原文地址:https://www.cnblogs.com/jjSunyet/p/14663048.html
Copyright © 2020-2023  润新知