在单vue3+ts页面里使用hammerjs实现对图片的放大缩小和移动,且移动不能超出屏幕范围

你可以按照以下步骤在单个Vue 3 + TypeScript页面中使用Hammer.js来实现对图片的放大缩小和移动，同时确保移动不超出屏幕范围：

1. 安装Hammer.js：在项目目录下运行以下命令进行安装：

npm install hammerjs

2. 在Vue组件中引入Hammer.js：

import { createApp } from 'vue';
import Hammer from 'hammerjs';

export default {
  mounted() {
    const element = this.$refs.image; // 图片元素的引用

    // 使用Hammer.js创建一个Hammer实例
    const mc = new Hammer.Manager(element);

    // 启用缩放和平移识别器
    mc.add(new Hammer.Pinch());
    mc.add(new Hammer.Pan({ direction: Hammer.DIRECTION_ALL }));

    let lastScale = 1; // 上一次缩放比例
    let lastPosX = 0; // 上一次X轴平移距离
    let lastPosY = 0; // 上一次Y轴平移距离

    mc.on('pinchstart panstart', () => {
      // 缩放开始或平移开始时记录当前缩放比例和平移距离
      lastScale = element.style.transform ? parseFloat(element.style.transform.replace(/[^0-9.]/g, '')) : 1;
      lastPosX = element.offsetLeft;
      lastPosY = element.offsetTop;
    });

    mc.on('pinch pan', (event) => {
      // 缩放和平移过程中更新样式
      const currentScale = lastScale * event.scale;
      const currentPosX = lastPosX + event.deltaX;
      const currentPosY = lastPosY + event.deltaY;

      // 更新图片样式
      element.style.transform = `scale(${currentScale}) translate(${currentPosX}px, ${currentPosY}px)`;
    });

    mc.on('pinchend panend', () => {
      // 缩放结束或平移结束后检查是否超出屏幕范围
      const screenWidth = window.innerWidth;
      const screenHeight = window.innerHeight;
      const imageWidth = element.offsetWidth * parseFloat(element.style.transform.replace(/[^0-9.]/g, ''));
      const imageHeight = element.offsetHeight * parseFloat(element.style.transform.replace(/[^0-9.]/g, ''));
      const maxPosX = Math.max(screenWidth - imageWidth, 0);
      const maxPosY = Math.max(screenHeight - imageHeight, 0);

      // 限制平移范围
      let currentPosX = parseFloat(element.style.transform.replace(/[^0-9.]/g, ''));
      let currentPosY = parseFloat(element.style.transform.replace(/[^0-9.]/g, ''));
      currentPosX = Math.min(Math.max(currentPosX, maxPosX), 0);
      currentPosY = Math.min(Math.max(currentPosY, maxPosY), 0);

      // 更新图片样式
      element.style.transform = `scale(${lastScale}) translate(${currentPosX}px, ${currentPosY}px)`;
    });
  },
};

3. 在Vue模板中使用ref指令引用图片元素：

<template>
  <div>
    <img ref="image" src="path/to/image.jpg" alt="Image">
  </div>
</template>

这样，你就可以在Vue 3 + TypeScript页面中使用Hammer.js来实现对图片的放大缩小和移动，并且确保移动不超出屏幕范围。记得将"path/to/image.jpg"替换为你实际的图片路径。