小程序中拖拽和缩放图片

需求:点击元素后选中,出现缩放按钮,拖动缩放按钮可实现元素的缩放;并且元素本身是可以拖动的。

html:

  <block wx:for="{{imageControls}}" wx:key="index"><view hidden="{{item.hiddenModel}}" class='insertImg_item' style='transform: scale({{item.scale}});top:{{item.insertImgTop}}px;left:{{item.insertImgLeft}}px;z-index:{{levelNum[index]}}'><view class='insertImg_box {{currentImgIndex == index ? "insertImg_active":""}}'><image src='{{item.url}}' data-index='{{index}}' style='width:{{item.insertImgWidth}}px;height:{{item.insertImgHeight}}px;' bindtouchstart='imgTouchStart' catchtouchmove='imgTouchMove' bindtouchend='imgTouchEnd'></image><image wx:if="{{currentImgIndex == index}}" class='delete_icon' src='/image/state_icon3.png' style='transform: scale({{item.oScale}});transform-origin:center;' data-index='{{index}}' bindtap='toDeleteImg'></image><image wx:if="{{currentImgIndex == index}}" class='drag_icon' src='/image/scale_icon.png' style='transform: scale({{item.oScale}});transform-origin:center;' data-index='{{index}}' bindtouchstart='scaleTouchStart' catchtouchmove='scaleTouchMove' bindtouchend='scaleTouchEnd'></image></view></view></block>

css:

.insertImg_item {transform-origin: center;position: absolute;z-index: 100;
}
.insertImg_box {width: 100%;transform-origin: center;float: left;box-sizing: border-box;position: relative;
}
.insertImg_active {border: 4rpx solid #4672FF;
}
/* 删除按钮 */
.delete_icon {position: absolute;top: -20rpx;left: -20rpx;width: 40rpx;height: 40rpx;z-index: 99;
}
/* 缩放按钮 */
.drag_icon {position: absolute;bottom: -25rpx;right: -25rpx;width: 50rpx;height: 50rpx;z-index: 99;
}

js:

  // 开始拖拽imgTouchStart(e) {let index = e.currentTarget.dataset.indexthis.activateComponent(index)initialImgArray[index].lx = e.touches[0].clientX;  // 记录点击时的坐标值initialImgArray[index].ly = e.touches[0].clientY;this.setData({imageControls: initialImgArray})},// 拖拽中imgTouchMove(e) {let index = e.currentTarget.dataset.indexconst { clientX, clientY } = e.touches[0];const dx = clientX - initialImgArray[index].lx;const dy = clientY - initialImgArray[index].ly;// 更新图片位置initialImgArray[index].insertImgLeft += dx;initialImgArray[index].insertImgTop += dy;initialImgArray[index].x += dx;initialImgArray[index].y += dy;// 更新 lx 和 lyinitialImgArray[index].lx = clientX;initialImgArray[index].ly = clientY;// 更新数据this.setData({imageControls: initialImgArray});},// 拖拽结束imgTouchEnd(e) {console.log(e)let index = e.currentTarget.dataset.index//重新计算左上角的坐标(如果没有缩放需求,不需要写这段代码)const imageWidth = initialImgArray[index].insertImgWidth * initialImgArray[index].scale;const imageHeight = initialImgArray[index].insertImgHeight * initialImgArray[index].scale;initialImgArray[index].newInsertImgLeft = Math.round(initialImgArray[index].x - imageWidth / 2);initialImgArray[index].newInsertImgTop = Math.round(initialImgArray[index].y - imageHeight / 2);this.setData({imageControls: initialImgArray})},//开始缩放scaleTouchStart: function (e) {let index = e.currentTarget.dataset.index;let clientX = e.touches[0].clientX;let clientY = e.touches[0].clientY;// 记录触摸初始位置initialImgArray[index].touchX = clientX;initialImgArray[index].touchY = clientY;},//缩放中scaleTouchMove: function (e) {let index = e.currentTarget.dataset.index;let clientX = e.touches[0].clientX;let clientY = e.touches[0].clientY;// 获取当前元素的位置和大小信息let element = initialImgArray[index];// 计算手指移动的距离变化let diffX = clientX - element.touchX;let diffY = clientY - element.touchY;// 计算移动距离与初始元素宽高的比例变化let scaleChangeX = diffX / element.insertImgWidth;let scaleChangeY = diffY / element.insertImgHeight;// 设置缩放的灵敏度,根据需要调整let sensitivity = 0.9;// 计算新的缩放比例,这里可以根据X和Y方向的缩放变化来综合计算let newScale = element.scale + (scaleChangeX + scaleChangeY) * sensitivity;// 限制最小缩放比例if (newScale < 0.2) {newScale = 0.2;}// 更新元素的缩放比例element.scale = newScale;// 更新手指位置element.touchX = clientX;element.touchY = clientY;// 更新视图this.setData({imageControls: initialImgArray});},// 缩放完成scaleTouchEnd(e) {let index = e.currentTarget.dataset.index// 计算缩放后的图片宽高const imageWidth = initialImgArray[index].insertImgWidth * initialImgArray[index].scale;const imageHeight = initialImgArray[index].insertImgHeight * initialImgArray[index].scale;initialImgArray[index].scaleInsertImgWidth = imageWidthinitialImgArray[index].scaleInsertImgHeight = imageHeight// 计算缩放后图片的坐标initialImgArray[index].newInsertImgLeft = Math.round(initialImgArray[index].x - imageWidth / 2);initialImgArray[index].newInsertImgTop = Math.round(initialImgArray[index].y - imageHeight / 2);this.setData({imageControls: initialImgArray})console.log(this.data.imageControls)},// 删除图片toDeleteImg(e) {let index = e.currentTarget.dataset.indexinitialImgArray.splice(index, 1);that.setData({imageControls: initialImgArray})},

效果图:
在这里插入图片描述

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

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

相关文章

对SPI总线上挂接多个X5045的读写操作

#include<reg51.h> //包含单片机寄存器的头文件 #include<intrins.h> //包含_nop_()函数定义的头文件 sbit SCKP3^4; //将SCK位定义为P3.4引脚 sbit SIP3^5; //将SI位定义为P3.5引脚 sbit SOP3^6; //将SO位定义为P3.6引脚 sbit CS1P3^7; …

华为发布的工业软件三大难题:面向CAE分析的高质量曲面贴体网格的生成问题

以下内容转载&#xff1a; 网格生成&#xff0c;是把一个特定的研究区域分割成由许多很小的子区域(元素)&#xff0c;以满足一些特定的要求。在理想的情况下&#xff0c;网格中的每个元素的形状和分布可以通过一种自动的网格生成算法来确定。 结构网格生成的代数网格生成法和…

【GIT操作】git如何合并多个commit

【GIT操作】如何合并多个commit 场景 在单个分支中有着多次commit&#xff0c;并push到了远程分支上。假设分支的commit如下图&#xff0c;一共有5次commit。 #mermaid-svg-IjwKybWlOuc5GrQp {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px…

Spring Cloud Alibaba之RocketMQ

大家好&#xff0c;我是升仔 简介 RocketMQ是一款高性能、高可用性、可扩展的分布式消息和流媒体平台&#xff0c;由阿里巴巴开发并开源。它广泛应用于大数据处理、分布式事务、消息通知等场景。整合到Spring Cloud Alibaba后&#xff0c;RocketMQ可以在Spring应用中更加方便…

10.Go 映射

映射&#xff08;map&#xff09;是一种特殊的数据结构&#xff0c;用于存储一系列无序的键值对&#xff0c;映射基于键来存储数据。映射功能强大的地方是&#xff0c;能够基于键快速检索数据。键就像索引一样&#xff0c;指向与该键关联的值。与C、Java中的映射的不同之处在于…

大模型系列课程学习

AI 大模型时代的奠基石-transformer模型 Transformer及其变体的出现为大模型的研究和实践提供了基础的模型支持&#xff0c;并持续性地在处理复杂序列任务中发挥着关键作用。 1.自然语言处理任务介绍 自然语言处理&#xff08;NLP&#xff09;是通过计算机对自然语言文本进行…

挑战Python100题(7)

100+ Python challenging programming exercises 7 Question 61 Print a unicode string "hello world". Hints: Use ustrings format to define unicode string. 打印一个unicode字符串“helloworld”。 提示:使用u“字符串”格式定义unicode字符串。 Solution…

提升Windows系统安全性的一些有效的策略

假设一个杀猪的机器人感染了病毒&#xff0c;把人识别成了猪&#xff0c;&#xff0c;&#xff0c;&#xff0c;&#xff0c; 1&#xff1a;我偶然发现的&#xff1a;把所有向外的UDP都禁止&#xff0c;但是要开放53号端口&#xff0c;因为这是DNS通讯端口&#xff0c;没有这个…

Vue - 使用Element UI Upload / importExcelJs进行文件导入

1 情景一 需求背景&#xff1a;后端配合&#xff0c;点击"导入"按钮&#xff0c;弹出“导入”弹窗&#xff0c;将电脑本地Excel表格数据导入到页面中表格位置&#xff08;需要调用后端接口&#xff09;&#xff0c;而页面中表格通过后端接口获取最新数据。 实现思路…

从零开始部署CTF题目环境(docker容器)

本教程将教会大家如何安装一台可以部署docker容器形式的CTF题目的CentOS服务器。 操作步骤 1-下载操作系统镜像文件 虚拟操作系统&#xff1a;CentOS 8 &#xff08;CentOS 9 毛病多&#xff0c;先不装&#xff09; 镜像文件下载地址&#xff0c;点击X86_64即可 CentOS St…

Async Function: 异步编程的新时代

更新&#xff1a;2023-05-19 01:53 一、Async Function是什么&#xff1f; Async Function&#xff0c;即异步函数&#xff0c;是JavaScript中异步编程的一种全新方式。它的引入解决了回调地狱和Promise链式调用中的繁琐问题&#xff0c;使异步编程更加简洁和优雅。在ES2017&…

Linux: dev: gcc: --coverage 迷惑行为最终生成不了gcda文件?

前些天写的gcov相关的功能:https://mzhan017.blog.csdn.net/article/details/135140232; 最近和同事看一个问题,就是虽然将所需的选项–coverage加到了产品的编译环境里,但是还是没有生成所希望的文件。而且自己写小程序来验证这个选项,也是没问题,可以产生程序运行时的…

自定义docker镜像,ubuntu安装命令并导出

文章目录 问题现象解决步骤相关命令详细介绍docker save 与 docker loaddocker import 与 docker exportdocker commit 问题现象 我们的通讯服务&#xff0c;需要监测前端设备的在线情况&#xff08;是否在线、丢包率、延迟等&#xff09;&#xff0c;使用ping命令去实现此功能…

flutter是什么

“flutter” 是一种移动应用开发框架&#xff0c;由谷歌开发和维护。Flutter 可用于构建高性能、美观且跨平台的移动应用程序&#xff0c;它支持同时在多个平台上运行&#xff0c;包括&#xff1a; iOS&#xff1a;可以构建原生的iOS应用。 Android&#xff1a;可以构建原生的…

手把手教你配置Jenkins自动化邮件通知

完成基于Jenkins的持续集成部署后&#xff0c;自动化测试执行后&#xff0c;测试结果需要通知到相关人员&#xff0c;除了钉钉通知外我们还可以通过Email通知到对应负责人&#xff0c;这里记录一下测试结果通过Jenkins邮件通知的配置与部署 01、安装插件 方法1&#xff1a; 进…

Java:SpringBoot Invalid character found in the request target 特殊字符传参报错

1.原因&#xff1a;出现了特殊字符 SpringBoot 2.0.0 以上都采用内置tomcat8.0以上版本&#xff0c;而tomcat8.0以上版本遵从RFC规范添加了对Url的特殊字符的限制&#xff0c;url中只允许包含英文字母(a-zA-Z)、数字(0-9)、-_.~四个特殊字符以及保留字符( ! * ’ ( ) ; : &…

第P8周:YOLOv5-C3模块实现

>- **&#x1f368; 本文为[&#x1f517;365天深度学习训练营](https://mp.weixin.qq.com/s/rbOOmire8OocQ90QM78DRA) 中的学习记录博客** >- **&#x1f356; 原作者&#xff1a;[K同学啊 | 接辅导、项目定制](https://mtyjkh.blog.csdn.net/)** 一、 前期准备 1. 设…

c基础学习(一)

学习网站&#xff1a; C语言的过去与未来 - C语言教程 - C语言网 (dotcpp.com)https://www.dotcpp.com/course/c-intros/ C 语言简介 - C 语言教程 - 网道 (wangdoc.com)https://wangdoc.com/clang/intro 变量&#xff1a; #include<stdio.h> /*引入头文件-- 标准…

用g2o实现拟合曲线

文章目录 安装和编译g2o使用g2o拟合曲线主函数代码CMakeLists.txt编译和运行运行结果安装和编译g2o git clone -b 20200410_git https://github.com/RainerKuemmerle/g2o.git cd g2o mkdir build && cd build && cmake .. &&

python 选择题进阶

选择题&#xff08;每题只有一个正确答案&#xff09; Python 中用于定义函数的关键字是&#xff1f; A. defineB. functionC. defD. fun 在 Python 中&#xff0c;下列哪个不是可变数据类型&#xff1f; A. ListB. TupleC. StringD. Set 下列哪种循环更适合在不知道循环次数的…