uniapp 做一个查看图片的组件,图片可缩放移动

因为是手机端,所以需要触摸可移动,双指放大缩小。

首先在components里建个组件

查看图片使用 uni-popup 弹窗

要注意 transform的translate和scale属性在同一标签上不会一起生效

移动就根据触摸效果进行偏移图片

缩放就根据双指距离的变大变小进行缩放

<template><view><uni-popup style="z-index: 99998;" ref="showImage" type="center"><view :style="{'transform':'translate('+x+'px,'+y+'px)'}"><img:style="{'transform':'scale(' + scale +')','height': height + 'px'}"@touchstart="touchstart"@touchmove="touchmove"@touchend="touchend"@touchcancel="touchcancel"mode="aspectFit":src="src"></img></view><view class="closePopup" @click="close"><uni-icons type="closeempty" size="32" color="#fff"></uni-icons></view></uni-popup></view>
</template><script>export default {name:"selectImage",data() {return {height: 0,src: '',x: 0,y:0,clientX: 0,clientY: 0,moveX: 0,moveY: 0,touchType: 0, // 0为单指触摸  1为双指// 初始双指距离distance: 0,// 初始缩放比例scale: 1};},created() {const me = thisuni.getSystemInfo({success(res) {// 默认图片高度占屏幕一半展示me.height = res.windowHeight / 2}})},methods: {// 获取两点距离getDistance (point1, point2) {const x = point1.clientX - point2.clientXconst y = point1.clientY - point2.clientYreturn Math.sqrt(x*x + y*y)},// 触摸开始touchstart (e) {// 当触摸事件为一个时if (e.touches.length === 1) {// 记录开始触摸位置this.clientX = e.changedTouches[0].clientXthis.clientY = e.changedTouches[0].clientYthis.touchType = 0} else if (e.touches.length === 2) {// 双指进行放大缩小操作this.touchType = 1// 获取双指距离this.distance = this.getDistance(e.touches[0], e.touches[1])}},// 触摸移动中touchmove (e) {// 当触摸事件为一个时if (this.touchType === 0) {// 记录移动的距离 const moveX = e.changedTouches[0].clientX - this.clientXconst moveY = e.changedTouches[0].clientY - this.clientY// 最终偏移距离为初始偏移距离+当前偏移距离this.x = this.moveX + moveXthis.y = this.moveY + moveY} else if (this.touchType === 1) {// 双指进行放大缩小操作if (e.touches.length === 2) {// 获取移动后的双指距离const le = this.getDistance(e.touches[0], e.touches[1])// 最终放大 缩小效果为 初始放大缩小比例 * 当前放大缩小比例const bl = le / this.distanceconst scale = this.scale * blthis.scale = scale > 0.1 ? scale : 0.1// 随着移动将开始的位置重置 不然会一次性放很大 或者缩很小,不好控制this.distance = le}}},// 触摸结束touchend (e) {// 当触摸事件为一个时if (this.touchType === 0) {// 记录最终移动距离const moveX = e.changedTouches[0].clientX - this.clientXconst moveY = e.changedTouches[0].clientY - this.clientY// 最终偏移距离为初始偏移距离+当前偏移距离this.x = this.moveX + moveXthis.y = this.moveY + moveY// 当前偏移距离设置为当前位置this.moveX = this.xthis.moveY = this.y} else if (this.touchType === 1) {// 当双指松开后console.log(e)}},// 因电话等打断时触发touchcancel (e) {if (this.touchType === 0) {this.x = 0this.y = 0} else {this.clientX = 0this.clientY = 0this.moveX = 0this.moveY = 0this.touchType = 0 // 0为单指触摸  1为双指// 初始双指距离this.distance = 0// 初始缩放比例this.scale = 1}},open () {this.$refs.showImage.open()},close () {this.x = 0this.src = ''this.y = 0this.clientX = 0this.clientY = 0this.moveX = 0this.moveY = 0this.touchType = 0 // 0为单指触摸  1为双指// 初始双指距离this.distance = 0// 初始缩放比例this.scale = 1this.$refs.showImage.close()}}}
</script><style>.closePopup {position: fixed;top: 40px;right: 40px;width: 50px;height: 50px;text-align: center;line-height: 50px;z-index: 99999;}
</style>

外面组件调用时引用或者全局注册后使用

外面图片上加个点击事件

 @click="look(url)"

方法直接调用组件open方法就OK了。

look (url) {this.$refs.showImg.src = urlthis.$refs.showImg.open()},

效果图:

---------------查看-------------------------------移动------------------------------缩放

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/422863.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DFS算法专题(二)——穷举vs暴搜vs深搜vs回溯vs剪枝【OF决策树】

目录 1、决策树 2、算法实战应用【leetcode】 2.1 题一&#xff1a;全排列 2.2.1 算法原理 2.2.2 算法代码 2.2 题二&#xff1a;子集 2.2.1 算法原理【策略一】 2.2.2 算法代码【策略一】 2.2.3 算法原理【策略二&#xff0c;推荐】 2.2.4 算法代码【策略二&#x…

浅谈基于负荷时空均衡和弹性响应的电动汽车快充电价定价策略

摘要&#xff1a;为了引导电动汽车有序充电&#xff0c;提出了一种考虑负荷时空均衡和弹性响应的电动汽车快充电价定价策略。引入交通流理论描述交通路网&#xff0c;建立电动汽车快充负荷时空分布模型&#xff1b;考虑配电网调度和电动汽车快充负荷的弹性需求&#xff0c;构建…

React Native 0.76,New Architecture 将成为默认模式,全新的 RN 来了

关于 React Native 的 New Architecture 概念&#xff0c;最早应该是从 2018 年 RN 团队决定重写大量底层实现开始&#xff0c;因为那时候 React Native 面临各种结构问题和性能瓶颈&#xff0c;最终迫使 RN 团队开始进行重构。 而从 React Native 0.68 开始&#xff0c;New A…

轻松搞定Arduino开发环境,像玩积木一样简单!

朋友们,有没有人和我一样,曾经对Arduino望而却步?说到“开发环境”这几个字,感觉脑子就要爆炸了,光是想象安装各种软件、调试环境就能把人吓跑。相信我,我也曾有过这样的感觉。但是,当我真正开始玩Arduino后,我发现一切都不像想象中那么复杂!其实,搭建Arduino开发环境…

光耦合器的工作原理和故障诊断

光耦合器&#xff0c;也称为光隔离器&#xff0c;是现代电子设备中必不可少的组件&#xff0c;尤其是在确保系统不同部分之间的电气隔离方面。它们通过使用光传输信号来防止高压或不需要的信号影响敏感组件。在本文中&#xff0c;我们将讨论光耦合器的工作原理、故障诊断和识别…

安泰功率放大器有哪些特点呢

功率放大器是电子设备中的重要组成部分&#xff0c;其作用是将输入信号的电功率放大到足够的水平&#xff0c;以驱动负载&#xff0c;如扬声器或天线。功率放大器有一些独特的特点&#xff0c;这些特点对于各种应用至关重要。下面将详细介绍功率放大器的特点&#xff0c;以更好…

Unity教程(十五)敌人战斗状态的实现

Unity开发2D类银河恶魔城游戏学习笔记 Unity教程&#xff08;零&#xff09;Unity和VS的使用相关内容 Unity教程&#xff08;一&#xff09;开始学习状态机 Unity教程&#xff08;二&#xff09;角色移动的实现 Unity教程&#xff08;三&#xff09;角色跳跃的实现 Unity教程&…

前端JS必用工具【js-tool-big-box】学习,获取全球热点城市当前时间、时区以及令时

js-tool-big-box工具库&#xff0c;之前也添加了几个热点城市的当前时间显示&#xff0c;但当时城市较少&#xff0c;功能也比较简单&#xff0c;只是显示了时分秒。 最近有使用者说&#xff0c;光有时分秒&#xff0c;功能太少&#xff0c;所以对js-tool-big-box工具库做了改进…

windows vscode ssh 连接远程服务器

1.在 PowerShell 中运行以下命令&#xff0c;查看 OpenSSH 客户端是否已安装 Get-WindowsCapability -Online | Where-Object Name -like OpenSSH.Client*如果有安装的话&#xff0c;如下图 2.如果没有安装&#xff0c;那么用下面的命令进行安装 Get-WindowsCapability -On…

科研绘图系列:R语言宏基因组PCoA图(PCoA plot)

介绍 PCoA(主坐标分析,也称为主轴分析)是一种多维统计技术,用于分析和可视化高维数据集,如宏基因组数据。在宏基因组学中,PCoA图用于展示样本之间的相似性和差异性,通常基于样本之间的距离或相似度矩阵。PCoA图说明: 样本间关系:PCoA图通过降维技术将高维数据投影到二…

(不用互三)AI绘画工具大比拼:Midjourney VS Stable Diffusion该如何选择?

文章目录 &#x1f4af;如何选择合适的AI绘画工具根据个人需求选择1. 您喜欢什么风格的绘画&#xff1f;2. 您想要创作什么主题的内容&#xff1f;3. 您对绘画工具的使用经验如何&#xff1f; 比较工具特点1. 工具的易用性和功能性如何&#xff1f;易用性&#xff1a;功能性&am…

【机器学习】分类与回归——掌握两大核心算法的区别与应用

【机器学习】分类与回归——掌握两大核心算法的区别与应用 1. 引言 在机器学习中&#xff0c;分类和回归是两大核心算法。它们广泛应用于不同类型的预测问题。分类用于离散的输出&#xff0c;如预测图像中的对象类型&#xff0c;而回归则用于连续输出&#xff0c;如预测房价。…

Linux | 进程控制(上):进程终止(strerror函数、errno宏、_exit() 与 exit())

文章目录 进程控制1、进程终止1.1进程常见退出方法退出码1.1.1 strerror函数 & errno宏1.1.1 _exit函数_exit和exit的区别结合现象分析&#xff1a; 进程控制 1、进程终止 1.1进程常见退出方法 进程退出场景 代码运行完毕&#xff0c;结果正确代码运行完毕&#xff0c;结…

Redis 集群高可用详解及配置

关型数据库 关系型数据库&#xff1a; 是建立在关系模型基础上的数据库&#xff0c;其借助于集合代数等数学概念和方法来处理数据库中的数据 主流的 MySQL、Oracle、MS SQL Server 和 DB2 都属于这类传统数据库 关型数据库的优缺点 特点&#xff1a; 1、数据关系模型基于关系…

学生请假管理系统

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 学生请假管理系统拥有两种角色 管理员&#xff1a;班级管理、课程管理、学生管理、审核请假信息、导出请假单 学生&#xff1a;填写请假单、查看请假审核情况 1.1 背景描述 学生请假管…

音视频入门基础:WAV专题(11)——FFmpeg源码中计算WAV音频文件每个packet的pts_time、dts_time的实现

音视频入门基础&#xff1a;WAV专题系列文章&#xff1a; 音视频入门基础&#xff1a;WAV专题&#xff08;1&#xff09;——使用FFmpeg命令生成WAV音频文件 音视频入门基础&#xff1a;WAV专题&#xff08;2&#xff09;——WAV格式简介 音视频入门基础&#xff1a;WAV专题…

C++速通LeetCode第6题-环形链表

快慢指针真的很好用&#xff01; /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode(int x) : val(x), next(NULL) {}* };*/ class Solution { public:bool hasCycle(ListNode *head) {//快慢指针ListNode* fast…

高效Flutter应用开发:GetX状态管理实战技巧

探索GetX状态管理的使用 前言 在之前的文章中&#xff0c;我们详细介绍了 Flutter 应用中的状态管理&#xff0c;setState、Provider库以及Bloc的使用。 本篇我们继续介绍另一个实现状态管理的方式&#xff1a;GetX。 一、GetX状态管理 基础介绍 GetX 是一个在 Flutter 中…

Ubuntu 20.04/22.04无法连接网络(网络图标丢失、找不到网卡)的解决方案

问题复述&#xff1a; Ubuntu 20.04无法连接到网络&#xff0c;网络连接图标丢失&#xff0c;网络设置中无网络设置选项。 解决方案 对于Ubuntu 20.04而言&#xff1a;逐条执行 sudo service network-manager stopsudo rm /var/lib/NetworkManager/NetworkManager.statesudo…

C# 使用Socket通信,新建WinForm服务端、客户端程序

一、新建WinForm Socket服务端程序 注&#xff1a;rtbReceviceMsg为RichTextBox控件 服务端程序、界面 服务端代码 public partial class Form1 : Form {public Form1(){InitializeComponent();}public virtual void TriggerOnUpdateUI(string message){if (this.InvokeRequir…