手写图片放大、缩小、旋转、拖拽

HTML部分：

  <div class="look-image-content">
    <div class="show-image">
      <img :ref="'img' + imgItem.id" class="imgSty" :src="imgItem.url" alt="" :style="styleObj" @mousedown="start" @mouseup="stop" @mousemove="move" @mouseout="stop" @error="errLoad" />
      
      <!-- 底部按钮 -->
      <div class="btns">
        <div class="look-image-footer">
          <div class="enlargement" @click="magnify">
            <i class="el-icon-zoom-in"></i>
            <!-- <span>放大</span> -->
          </div>
          <div class="shrink" @click="shrink">
            <i class="el-icon-zoom-out"></i>
            <!-- <span>缩小</span> -->
          </div>
          <div class="rotate" @click="rotate">
            <i class="el-icon-refresh-right"></i>
            <!-- <span>旋转</span> -->
          </div>
          <div class="rotate" @click="reBack">
            <i class="el-icon-time"></i>
            <!-- <span>复原</span> -->
          </div>
        </div>
      </div>
    </div>
    <div class="itemInfo">
      <div>
        <slot name="inputInfo"></slot>
      </div>
      <el-checkbox v-model="checked" @change="toChange">是否驳回</el-checkbox>
    </div>
 </div>

script部分：

    data() {
    return {
      multiples: 1, // 放大或者缩小
      deg: 0, // 旋转的角度
      styleObj: null, // 拖拽时修改图片的样式
      isDrag: false, // 是否开始拖拽
      startX: 0, // 鼠标的点击X轴
      startY: 0, // 鼠标的点击Y轴
      moveX: 0, // 鼠标移动的X轴
      moveY: 0, // 鼠标移动的Y轴
      endX: 0,
      endY: 0,
    };
  },
  
 methods: {
  // 放大
    magnify() {
      if (this.multiples >= 10) {
        return;
      }
      this.multiples += 0.25;
      this.styleObj = `transform: scale(${this.multiples}) rotateZ(${this.deg}deg);left:${this.endX}px;top:${this.endY}px`;
    },
    // 缩小
    shrink() {
      if (this.multiples < 0.5) {
        return;
      }
      this.multiples -= 0.25;
      this.styleObj = `transform: scale(${this.multiples}) rotateZ(${this.deg}deg);left:${this.endX}px;top:${this.endY}px`;
    },
    // 旋转
    rotate(e) {
      e.preventDefault();
      console.log(111);
      this.deg += 90;
      if (this.deg >= 360) {
        this.deg = 0;
      }
      this.styleObj = `transform: scale(${this.multiples}) rotateZ(${this.deg}deg);left:${this.endX}px;top:${this.endY}px`;
    },
    // 鼠标点击，开始拖拽
    start(e) {
      e.preventDefault();
      if (e.buttons) {
        this.isDrag = true;
        this.startX = e.clientX;
        this.startY = e.clientY;
        this.styleObj = `transform: scale(${this.multiples}) rotateZ(${this.deg}deg);left:${this.endX}px;top:${this.endY}px`;
      }
    },
    // 鼠标松开，停止拖拽
    stop() {
      this.isDrag = false;
      this.styleObj = `transform: scale(${this.multiples}) rotateZ(${this.deg}deg);left:${this.endX}px;top:${this.endY}px`;
    }, 
    // 拖拽
    move(e) {
      // 移动图片相对于父元素的位置
      if (this.isDrag) {
        // 鼠标移动的距离
        this.moveX = e.clientX;
        this.moveY = e.clientY;
        // 相对页面的距离
        let x = this.moveX - this.startX;
        let y = this.moveY - this.startY;
        let img = this.$refs['img' + this.imgItem.id];
        this.endX = img.offsetLeft + x;
        this.endY = img.offsetTop + y;
        this.styleObj = `left:${this.endX}px;top:${this.endY}px`;
        this.styleObj = `transform: scale(${this.multiples}) rotateZ(${this.deg}deg);left:${this.endX}px;top:${this.endY}px`;
        // 记录上次移动的距离
        this.startX = this.moveX;
        this.startY = this.moveY;
      }
    },
    // 点击复原
    reBack() {
      this.multiples = 1;
      this.deg = 0;
      this.endX = 0;
      this.endY = 0;
      this.styleObj = `transform: scale(${this.multiples}) rotateZ(${this.deg}deg);left:${this.endX}px;top:${this.endY}px`;
    },
  },

样式部分

    <style lang="less" scoped>
        .look-image-content {
          padding: 10px;
          width: 100%;
          box-sizing: border-box;
          display: flex;
          justify-content: space-around;
          .show-image {
            height: 500px;
            width: 60%;
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            border: 1px solid #eee;
            background-color: rgba(0, 0, 0, 0.1);
            > img {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
            }
            .imgSty {
              object-fit: cover;
              width: 100%;
              height: auto;
            }
            .btns {
              display: none;
              position: absolute;
              left: 0;
              bottom: 0;
              z-index: 999;
              width: 100%;
              height: 15%;
              transition: height 1s;

              .look-image-footer {
                background-color: rgba(0, 0, 0, 0.3);
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                height: 100%;
                > div {
                  width: 33%;
                  text-align: center;
                  color: #fff;
                  position: relative;
                  &::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 1px;
                    height: 100%;
                    background-color: rgba(223, 221, 221, 0.5);
                    opacity: 0.5;
                  }
                  &:last-child {
                    &::after {
                      display: none;
                    }
                  }
                  > i {
                    font-size: 26px;
                  }
                }
              }
            }
          }
          .itemInfo {
            width: 30%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .inpSty {
              margin-bottom: 15px;
            }
          }
        }
        .look-image-content .show-image:hover {
          .btns {
            display: block;
          }
}
</style>