当前位置: 首页 > news >正文

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()},

效果图:

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

相关文章:

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

因为是手机端&#xff0c;所以需要触摸可移动&#xff0c;双指放大缩小。 首先在components里建个组件 查看图片使用 uni-popup 弹窗 要注意 transform的translate和scale属性在同一标签上不会一起生效 移动就根据触摸效果进行偏移图片 缩放就根据双指距离的变大变小进行缩…...

卡车配置一键启动无钥匙进入手机控车

‌ 卡车智能一键启动无钥匙进入手机控车&#xff0c;通过手机应用程序与汽车内置硬件、软件的无线通信&#xff0c;实现对汽车的远程控制‌。 卡车改装一键启动的步骤包括安装门把手的感应装置、拆卸仪表台和门板&#xff0c;取出内部的待接线束&#xff0c;并将一键启动…...

计算机网络基础概念 交换机、路由器、网关、TBOX

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、VLAN是什么&#xff1f;二 、交换机三、路由器四、网关五、TBOX六、问题1 、网关和交换机的区别2、网关和路由器的区别 总结 前言 工作有感而发&#xff0…...

labview禁用8080端口

需求背景 最近电脑上安装了labview全家桶,发现idea的8080端口项目启动报错,一直提示8080端口被占用。最简单的办法就是找到8080端口的服务,然后关闭这个服务。但是我不想这么做,我想把labview的web服务器的端口给修改了。 操作教程 1、cmd查看8080端口 2、windows进程 同…...

字符串的KMP算法详解及C/C++代码实现

1. 原由 紧接上文&#xff0c;我们知道了暴力匹配的算法在时间运行上的缺陷&#xff0c;假设字符串T的长度为n&#xff0c;字符串P的长度为m&#xff0c;则整个算法的时间复杂度为O( n * m )&#xff0c;而对于一个复杂的现实情况而言 n >> m >> 2 &#xff08;即…...

2024年数学建模比赛题目及解题代码

目录 一、引言 1. 1竞赛背景介绍 1.1.1数学建模竞赛概述 1.1.2生产过程决策问题在竞赛中的重要性 1.2 解题前准备 1.2.2 工具与资源准备 1.2.3 心态调整与策略规划 二、问题理解与分析 三、模型构建与求解 3.1 模型选择与设计 3.1.1 根据问题特性选择合适的数学模型类…...

BERT 论文逐段精读【论文精读】

BERT: 近 3 年 NLP 最火 CV: 大数据集上的训练好的 NN 模型&#xff0c;提升 CV 任务的性能 —— ImageNet 的 CNN 模型 NLP: BERT 简化了 NLP 任务的训练&#xff0c;提升了 NLP 任务的性能 BERT 如何站在巨人的肩膀上的&#xff1f;使用了哪些 NLP 已有的技术和思想&#xff…...

在Flask中实现跨域请求(CORS)

在Flask中实现跨域请求&#xff08;CORS&#xff0c;Cross-Origin Resource Sharing&#xff09;主要涉及到对Flask应用的配置&#xff0c;以允许来自不同源的请求访问服务器上的资源。以下是在Flask中实现CORS的详细步骤和方法&#xff1a; 一、理解CORS CORS是一种机制&…...

在桌面商业分析应用程序中启用高级 Web UI

挑战 Mercur Business Control 应用程序在企业界&#xff0c;尤其是金融领域&#xff0c;拥有悠久的应用历史。它帮助企业处理、可视化和分析海量数据&#xff0c;从而做出明智的商业决策。 随着产品的不断演进和现代化&#xff0c;Mercur Solutions AB 为该应用创建了 Web 客…...

CentOS Stream 8 通过 Packstack 安装开源 OpenStack(V版)

1、环境规划以及网卡配置 controller IP&#xff1a;192.168.235.101 compute IP&#xff1a;192.168.235.102 控制节点 [rootluck ~]# cd /etc/sysconfig/network-scripts/ [rootluck network-scripts]# vi ifcfg-ens160 [rootluck network-scripts]# cat ifcfg-ens160 TYP…...

OpenSSL工具验证RSA证书

openssl x509 是一个用于处理 X.509 证书的命令行工具。常用的 openssl x509 命令&#xff1a; -in <file>&#xff1a;指定输入文件。-out <file>&#xff1a;指定输出文件。-noout&#xff1a;不输出证书信息。-text&#xff1a;以文本格式输出证书信息。-pubke…...

架构师白话分布式系统

对于分布式系统的定义,大致可以理解为如下的两个点 分布式系统从整体的体量来说,它内部是由很多的服务器、服务实例组成。所提供的用户服务是由一组相互独立运行的服务器来提供。对于用户来说,这个多服务器的系统就跟一个服务器一样,感觉不到每个单独的服务器实例的存在。从…...

C++ 中 vector 的常用功能介绍

在 C 中&#xff0c;vector 是一种常用的动态数组容器&#xff0c;提供了方便的自动扩展、内存管理以及各种便捷的操作方法。它是 C 标准模板库&#xff08;STL&#xff09;的一部分&#xff0c;适用于需要动态存储和管理大量元素的场景。 在本文中&#xff0c;我们将简要介绍…...

[QT] QT事件与事件重写

一.事件 事件(event)是由系统或者 Qt本身在不同的场景下发出的。当用户按下鼠标、敲下键盘&#xff0c;或者是窗口关闭等都会发出一个相应的事件。 一些事件在用户操作时发出(如鼠标/键盘事件); 另一些事件则是由系统自动发出(如计时器事件)。 Qt窗口中对于产生的一系列事件都…...

c# 视觉识别图片文字 二维码

1.二维码识别 插件 ZXing.Net using System; using System.Drawing; // 如果你使用的是System.Drawing.Common using ZXing;class Program {static void Main(){string imagePath "path_to_your_qr_code_image.png";var barcodeBitmap (Bitmap)Image.FromFile(im…...

UEFI——访问PCI/PCIE设备(二)

一、支持访问PCI/PCIE设备的Protocol UEFI中提供了两个主要的模块来支持PCI总线&#xff0c;一是PCI Host Bridge&#xff08;PCI主桥&#xff09;控制器驱动&#xff0c;另一个是PCI总线驱动。这两个模块是和特定的平台硬件绑定的&#xff0c;在这种机制下&#xff0c;屏蔽了…...

决策树算法的介绍与应用

目录 引言 决策树算法的基本原理 表格总结&#xff1a;决策树的构建步骤 决策树算法的 MATLAB 实现 示例&#xff1a;使用决策树进行分类预测 决策树的应用场景 表格总结&#xff1a;决策树的主要应用领域 决策树的优势与局限 结论 引言 决策树是一种广泛应用于数据挖掘…...

杰发科技Bootloader(3)—— 基于7801的APP切到Boot

为了方便在APP中跳转到Boot重新进行升级&#xff0c;有两种办法&#xff0c;7840同样可以使用。 1. 调用reset接口进行复位&#xff0c;复位后会先进Boot&#xff0c;再自动跳转到App。 NVIC_SystemReset(); 2. 直接使用跳转指令&#xff0c;参考Boot跳转到App代码&#xff0…...

Leetcode面试经典150题-138.随机链表的复制

题目比较简单&#xff0c;重点是理解思想&#xff0c;random不管&#xff0c;copy一定要放在next 而且里面的遍历过程不能省略 解法都在代码里&#xff0c;不懂就留言或者私信 /* // Definition for a Node. class Node {int val;Node next;Node random;public Node(int val…...

freemarker模板学习笔记

文章目录 freemarker常用指令if-elseif-else指令switch, case, default, break指令list, else, items, sep, break 指令<#list>指令语法<#else> 指令<#items> 指令<#sep> 指令<#break> 指令 include 指令<#include> 基础知识<#include&…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...