<template>
  <div style="height: 90vh;">
    <div
      class="image-container"
      @mousedown="startDrag"
      @mouseup="stopDrag"
      @mousemove="drag"
      @wheel="handleWheel"
    >
      <img
        :src="imgSrc"
        :style="{ transform: `scale(${scale})`, cursor: isDragging ? 'grabbing' : 'grab' }"
        ref="image"
      />
      <!-- @click="toggleZoom"  點擊放大-->
    </div>
  </div>
</template>

<script>
import testImg from './testImg.jpeg'; // 導入圖片
 
export default {
  name: 'ImageView',
  props: {
    // 圖片路徑
    imgSrc: {
      type: String,
      default: () => testImg, // 沒有傳值時使用默認圖片
    }
  },
  data () {
    return {
      scale: 1, // 初始縮放比例
      isDragging: false, // 是否正在拖拽
      lastMouseX: 0, // 上一次鼠標 X 坐標
      lastMouseY: 0, // 上一次鼠標 Y 坐標
      offsetX: 0, // 圖片相對容器的 X 偏移量
      offsetY: 0, // 圖片相對容器的 Y 偏移量
      imageWidth: 0, // 圖片實際寬度
      imageHeight: 0, // 圖片實際高度
    };
  },
  mounted () {
    const img = this.$refs.image; // 獲取圖片元素
    this.imageWidth = img.naturalWidth; // 獲取圖片的實際寬度
    this.imageHeight = img.naturalHeight; // 獲取圖片的實際高度
    this.centerImage(); // 初始化時居中圖片
  },
  methods: {
    // 居中圖片的方法
    centerImage () {
      const container = this.$el.querySelector('.image-container'); // 獲取容器
      const containerWidth = container.clientWidth; // 容器寬度
      const containerHeight = container.clientHeight; // 容器高度
 
      // 計算居中后的 X 和 Y 偏移量
      const centeredX = (containerWidth - this.imageWidth * this.scale) / 2;
      const centeredY = (containerHeight - this.imageHeight * this.scale) / 2;
 
      this.offsetX = centeredX; // 更新 X 偏移量
      this.offsetY = centeredY; // 更新 Y 偏移量
 
      // 設(shè)置圖片的新位置
      this.$refs.image.style.left = `${centeredX}px`;
      this.$refs.image.style.top = `${centeredY}px`;
    },
 
    // 點擊圖片時切換縮放
    toggleZoom () {
      this.scale = this.scale === 1 ? 2 : 1; // 點擊圖片時切換縮放比例
    },
 
    // 鼠標按下事件
    startDrag (event) {
      this.isDragging = true; // 標記為正在拖拽
      this.lastMouseX = event.clientX; // 記錄當前鼠標 X 坐標
      this.lastMouseY = event.clientY; // 記錄當前鼠標 Y 坐標
      this.offsetX = this.$refs.image.offsetLeft; // 記錄當前左偏移
      this.offsetY = this.$refs.image.offsetTop; // 記錄當前上偏移
    },
 
    // 鼠標抬起事件
    stopDrag () {
      this.isDragging = false; // 停止拖拽
    },
 
    // 鼠標移動事件
    drag (event) {
      if (this.isDragging) { // 如果正在拖拽
        const dx = event.clientX - this.lastMouseX; // 計算 X 軸移動距離
        const dy = event.clientY - this.lastMouseY; // 計算 Y 軸移動距離
        const newLeft = this.offsetX + dx; // 計算新的左偏移
        const newTop = this.offsetY + dy; // 計算新的上偏移
 
        // 更新圖片的位置
        this.$refs.image.style.left = `${newLeft}px`; // 設(shè)置新的左偏移
        this.$refs.image.style.top = `${newTop}px`; // 設(shè)置新的上偏移
      }
    },
 
    // 鼠標滾輪事件處理縮放
    handleWheel (event) {
      event.preventDefault(); // 阻止默認的滾動行為
      const scaleChange = event.deltaY > 0 ? 0.1 : -0.1; // 根據(jù)滾動方向調(diào)整縮放
      this.scale = Math.max(0.2, this.scale + scaleChange); // 限制最小縮放比例為 0.2
    },
  },
};
</script>

<style scoped>
.image-container {
  position: relative; /* 使容器相對定位 */
  overflow: hidden; /* 防止內(nèi)容超出邊界 */
  cursor: grab; /* 默認光標樣式 */
  width: 100%; /* 容器寬度 */
  height: 100%; /* 容器高度 */
}
 
img {
  position: absolute; /* 使得 img 可以被拖拽 */
  transition: transform 0.3s; /* 平滑的縮放效果 */
}
</style>