vue js 图片的缩放及移动

最新推荐文章于 2024-08-12 15:07:29 发布

卑微不讨喜

最新推荐文章于 2024-08-12 15:07:29 发布

阅读量485

点赞数

文章标签： html

本文链接：https://blog.csdn.net/BIGBIGBIGCAT/article/details/119906100

版权

该博客介绍了如何使用Vue.js和Element-UI库创建一个简单的图片编辑器，允许用户对图片进行缩放和移动操作。通过监听鼠标事件，实现了平移和缩放的功能，并提供了重置按钮以恢复原始状态。代码中详细展示了组件的设置和事件处理函数。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    #image-container {
      overflow: hidden;
      height: 100vh;
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="image-container">
      <div class="proportion-control">
        <el-input-number v-model="proportion" :step="10" :min="20" :max="200" @change="proportionChange">
        </el-input-number>
        <el-button icon="el-icon-refresh-left" style="margin-left: 5px" @click="resetTarget">
          重置
        </el-button>
      </div>
      <img src="./唐三1.png" id="target" draggable="false" />
    </div>
  </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data() {
      return {
        proportion: 100, // 放大缩小比例
        mouseFlag: false,
        mouseStart: [0, 0],
        mouseEnd: [0, 0],
        mouseOffset: [0, 0]
      };
    },
    mounted() {
      this.targetAddEvent();
    },
    methods: {
      // 初始化给节点添加事件
      targetAddEvent() {
        this.targetRef = document.querySelector("#target");
        this.targetRef.addEventListener("mouseup", this.handleMouseup);
        this.containerRef = document.querySelector("#image-container");
        this.containerRef.addEventListener("mousedown", this.handleMousedown);
        this.containerRef.addEventListener("mousemove", this.handleMousemove);
        this.containerRef.addEventListener("mouseup", this.handleMouseup);
        this.containerRef.addEventListener(
          "mousewheel",
          this.handleMousewheel
        );
        this.containerRef.addEventListener(
          "DOMMouseScroll",
          this.handleMousewheel
        );
      },
      // 放大或者缩小
      proportionChange(val) {
        this.targetRef.style.transform =
          `scale(${val / 100}) translate(${this.mouseEnd[0]}px, ${this.mouseEnd[1]}px)`;
      },
      // 鼠标按下
      handleMousedown(e) {
        this.mouseFlag = true;
        this.mouseStart = [e.clientX, e.clientY];
      },
      // 鼠标移动
      handleMousemove(e) {
        if (this.mouseFlag) {
          this.targetRef.style.transform =
            `scale(${this.proportion / 100}) 
            translate(${e.clientX - this.mouseStart[0] + this.mouseEnd[0]}px, ${e.clientY - this.mouseStart[1] + this.mouseEnd[1]}px)`;
        }
      },
      // 鼠标松开
      handleMouseup(e) {
        e.stopPropagation();
        this.mouseFlag = false;
        this.mouseOffset = [
          e.clientX - this.mouseStart[0],
          e.clientY - this.mouseStart[1],
        ];
        this.mouseEnd = [
          this.mouseEnd[0] + this.mouseOffset[0],
          this.mouseEnd[1] + this.mouseOffset[1],
        ];
      },
      // 鼠标滚轮滚动
      handleMousewheel(e) {
        if (e.wheelDelta !== undefined) {
          if (e.wheelDelta > 0) {
            this.proportion += 10;
          } else {
            this.proportion -= 10;
          }
        } else if (e.detail !== undefined) {
          if (e.detail < 0) {
            this.proportion += 10;
          } else {
            this.proportion -= 10;
          }
        } else {
          console.error("不支持鼠标滚轮滚动");
        }
        this.proportionChange(this.proportion);
      },
      // 还原位置和大小
      resetTarget() {
        this.proportion = 100;
        this.mouseStart = [0, 0];
        this.mouseEnd = [0, 0];
        this.mouseOffset = [0, 0];
        this.proportionChange(100);
      },
    },
  });
</script>

</html>