Vue 3实现的移动端两指控制图片缩放功能

本文主要是介绍Vue 3实现的移动端两指控制图片缩放功能,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

使用Vue 3的Composition API来实现的图片缩放功能。这是一个使用touch事件来实现的简单双指缩放图片的功能。

  1. 模板部分(Template)

    • <div>:这是一个相对定位的容器,同时设置overflow: hidden;以防止图片超出范围。这个元素监听了touchstarttouchmovetouchend事件。
    • <img>:这是要显示的图片,通过:style绑定动态的宽度。这个元素的引用被存储在image变量中,以便在脚本部分进行操作。
  2. 脚本部分(Script)

    • const image = ref(null);:创建一个引用(ref),用于存储图片元素的引用。
    • let initialDistance = 0;:初始化两个触摸点的初始距离。
    • let baseWidth = 100;:图片的初始宽度。
    • const imageWidth = ref(baseWidth);:创建一个引用,存储图片的宽度。
    • const onTouchStart = (event) => {...}:当双指触摸开始时,记录当前两个触摸点的距离。
    • const onTouchMove = (event) => {...}:当双指触摸移动时,计算当前两个触摸点的距离并与初始距离比较,根据比较结果调整图片的宽度。
    • const onTouchEnd = () => {...}:当双指触摸结束时,重置初始距离。

此代码示例在用户使用双指在屏幕上滑动时,会根据滑动的方向来放大或缩小图片的尺寸。其中,每次调整的幅度是10px,这个值可以根据实际需求进行调整。

<template><div style="position: relative; overflow: hidden;"@touchstart="onTouchStart"@touchmove="onTouchMove"@touchend="onTouchEnd"><img ref="image" src="path_to_your_image.jpg" alt="My Image" :style="{ width: imageWidth + 'px' }"/></div>
</template><script setup>
import { ref } from 'vue';const image = ref(null);
let initialDistance = 0;
let baseWidth = 100; // 初始宽度
const imageWidth = ref(baseWidth);const onTouchStart = (event) => {if (event.touches.length === 2) {initialDistance = Math.hypot(event.touches[0].pageX - event.touches[1].pageX,event.touches[0].pageY - event.touches[1].pageY);}
};const onTouchMove = (event) => {if (event.touches.length === 2) {const currentDistance = Math.hypot(event.touches[0].pageX - event.touches[1].pageX,event.touches[0].pageY - event.touches[1].pageY);if (currentDistance > initialDistance) {// 放大图片imageWidth.value += 10;} else if (currentDistance < initialDistance) {// 缩小图片,可添加边界条件判断防止过小imageWidth.value -= 10;}initialDistance = currentDistance;}
};const onTouchEnd = () => {initialDistance = 0;
};
</script>

这篇关于Vue 3实现的移动端两指控制图片缩放功能的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/485303

相关文章

C/C++中OpenCV 矩阵运算的实现

《C/C++中OpenCV矩阵运算的实现》本文主要介绍了C/C++中OpenCV矩阵运算的实现,包括基本算术运算(标量与矩阵)、矩阵乘法、转置、逆矩阵、行列式、迹、范数等操作,感兴趣的可以了解一下... 目录矩阵的创建与初始化创建矩阵访问矩阵元素基本的算术运算 ➕➖✖️➗矩阵与标量运算矩阵与矩阵运算 (逐元

C/C++的OpenCV 进行图像梯度提取的几种实现

《C/C++的OpenCV进行图像梯度提取的几种实现》本文主要介绍了C/C++的OpenCV进行图像梯度提取的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录预www.chinasem.cn备知识1. 图像加载与预处理2. Sobel 算子计算 X 和 Y

C/C++和OpenCV实现调用摄像头

《C/C++和OpenCV实现调用摄像头》本文主要介绍了C/C++和OpenCV实现调用摄像头,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录准备工作1. 打开摄像头2. 读取视频帧3. 显示视频帧4. 释放资源5. 获取和设置摄像头属性

c/c++的opencv图像金字塔缩放实现

《c/c++的opencv图像金字塔缩放实现》本文主要介绍了c/c++的opencv图像金字塔缩放实现,通过对原始图像进行连续的下采样或上采样操作,生成一系列不同分辨率的图像,具有一定的参考价值,感兴... 目录图像金字塔简介图像下采样 (cv::pyrDown)图像上采样 (cv::pyrUp)C++ O

c/c++的opencv实现图片膨胀

《c/c++的opencv实现图片膨胀》图像膨胀是形态学操作,通过结构元素扩张亮区填充孔洞、连接断开部分、加粗物体,OpenCV的cv::dilate函数实现该操作,本文就来介绍一下opencv图片... 目录什么是图像膨胀?结构元素 (KerChina编程nel)OpenCV 中的 cv::dilate() 函

Python使用FFmpeg实现高效音频格式转换工具

《Python使用FFmpeg实现高效音频格式转换工具》在数字音频处理领域,音频格式转换是一项基础但至关重要的功能,本文主要为大家介绍了Python如何使用FFmpeg实现强大功能的图形化音频转换工具... 目录概述功能详解软件效果展示主界面布局转换过程截图完成提示开发步骤详解1. 环境准备2. 项目功能结

SpringBoot使用ffmpeg实现视频压缩

《SpringBoot使用ffmpeg实现视频压缩》FFmpeg是一个开源的跨平台多媒体处理工具集,用于录制,转换,编辑和流式传输音频和视频,本文将使用ffmpeg实现视频压缩功能,有需要的可以参考... 目录核心功能1.格式转换2.编解码3.音视频处理4.流媒体支持5.滤镜(Filter)安装配置linu

在Spring Boot中实现HTTPS加密通信及常见问题排查

《在SpringBoot中实现HTTPS加密通信及常见问题排查》HTTPS是HTTP的安全版本,通过SSL/TLS协议为通讯提供加密、身份验证和数据完整性保护,下面通过本文给大家介绍在SpringB... 目录一、HTTPS核心原理1.加密流程概述2.加密技术组合二、证书体系详解1、证书类型对比2. 证书获

Druid连接池实现自定义数据库密码加解密功能

《Druid连接池实现自定义数据库密码加解密功能》在现代应用开发中,数据安全是至关重要的,本文将介绍如何在​​Druid​​连接池中实现自定义的数据库密码加解密功能,有需要的小伙伴可以参考一下... 目录1. 环境准备2. 密码加密算法的选择3. 自定义 ​​DruidDataSource​​ 的密码解密3

使用Python实现Windows系统垃圾清理

《使用Python实现Windows系统垃圾清理》Windows自带的磁盘清理工具功能有限,无法深度清理各类垃圾文件,所以本文为大家介绍了如何使用Python+PyQt5开发一个Windows系统垃圾... 目录一、开发背景与工具概述1.1 为什么需要专业清理工具1.2 工具设计理念二、工具核心功能解析2.