小程序中拖拽和缩放图片

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

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.index
    this.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.index
    const { 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 和 ly
    initialImgArray[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 = imageWidth
    initialImgArray[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.index
    initialImgArray.splice(index, 1);
    that.setData({
      imageControls: initialImgArray
    })
  },

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue中 ref 和 reactive 的区别与联系

官方原文&#xff1a;Vue3 建议使用 ref() 作为声明响应式状态的主要API。 ref 用于将基本类型的数据&#xff08;如字符串、数字&#xff0c;布尔值等&#xff09;和引用数据类型(对象) 转换为响应式数据。使用 ref 定义的数据可以通过 .value 属性访问和修改。reactive 用于…

因mathtype原因导致word中ctrl+V复制功能失效的解决办法

因MathType导致Word中ctrlV复制功能失效的解决办法如下&#xff1a; 我们先解决&#xff01; 打开“文件”&#xff0c;找到“选项”&#xff0c;“加载项”。找到MathType安装目录下&#xff08;C:\Program Files (x86)\Microsoft Office\root\Office16\STARTUP&#xff09;…

大创项目推荐 深度学习YOLOv5车辆颜色识别检测 - python opencv

文章目录 1 前言2 实现效果3 CNN卷积神经网络4 Yolov56 数据集处理及模型训练5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习YOLOv5车辆颜色识别检测 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0…

SpringBoot的热部署

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…

超维空间S2无人机使用说明书——52、使用PID算法进行基于yolo的目标跟踪

引言&#xff1a;在实际工程项目中&#xff0c;为了提高系统的响应速度和稳定性&#xff0c;往往需要采用一定的控制算法进行目标跟踪。这里抛砖引玉&#xff0c;仅采用简单的PID算法进行目标的跟随控制&#xff0c;目标的识别依然采用yolo。对系统要求更高的&#xff0c;可以对…

【Redis】一文掌握Redis原理及常见问题

Redis是基于内存数据库&#xff0c;操作效率高&#xff0c;提供丰富的数据结构&#xff08;Redis底层对数据结构还做了优化&#xff09;&#xff0c;可用作数据库&#xff0c;缓存&#xff0c;消息中间件等。如今广泛用于互联网大厂&#xff0c;面试必考点之一&#xff0c;本文…

python3下载手机安卓版,python下载手机版最新

大家好&#xff0c;小编为大家解答python3下载手机安卓版的问题。很多人还不知道python下载手机版最新&#xff0c;现在让我们一起来看看吧&#xff01; 1、先去python官网下载python3的源码包&#xff0c;网址&#xff1a;https://www.python.org/ 1)进去之后点击导航栏的Down…

CentOS系统环境搭建(二十六)——使用nginx在无域名情况下使用免费证书设置https

centos系统环境搭建专栏&#x1f517;点击跳转 文章目录 使用nginx在无域名情况下使用免费证书设置https1.获取SSL证书1.1 生成SSL密钥1.2 生成SSL证书1.3 重命名密钥文件 2.nginx配置https2.1 放证书2.2 修改nginx.conf文件2.2.1 将80端口重定向到4432.2.2 端口443配置ssl证书…

【三维生成】稀疏重建、Image-to-3D方法(汇总)

系列文章目录 总结一下近5年的三维生成算法&#xff0c;持续更新 文章目录 系列文章目录一、LRM&#xff1a;单图像的大模型重建&#xff08;2023&#xff09;摘要1.前言2.Method3.实验 二、SSDNeRF&#xff1a;单阶段Diffusion NeRF的三维生成和重建&#xff08;ICCV 2023&am…

基于VUE3+Layui从头搭建通用后台管理系统(前端篇)十六:统计报表模块相关功能实现

一、本章内容 本章使用Echarts及DataV实现常用图表、特殊图表、地图及综合图表等图表展示功能。 1. 详细课程地址: https://edu.csdn.net/course/detail/38183 2. 源码下载地址: 点击下载 二、界面预览 三、开发视频 3.1 B站视频地址: 基于VUE3+Layui从

2023.12.25 关于 Redis 数据类型 Hash 常用命令、内部编码、应用场景

目录 Hash 数据类型 Hash 操作命令 HSET HGET HEXISTS HDEL HKEYS HVALS HGETALL HMGET HLEN HSETNX HINCRBY HINCRBYFLOAT HSTRLEN Hash 编码方式 理解什么是压缩 Hash 实际应用 Cache 缓存 Hash 数据类型 整体上来说 Redis 是键值对结构&#xff0c;其中 …

【C++高阶(九)】C++类型转换以及IO流

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习C   &#x1f51d;&#x1f51d; C高阶 1. 前言2. C语言类型转换的方式3. C的强制…

5G阅信在教研行业应用场景有哪些?

1、新生入学 新生录用通知、录用信息查看、注意事项&#xff08;入学指引&#xff09; 校园简介 资讯1 秒速达&#xff0c;让信息传达更高效便捷 2、校务服务 可作为校园微服务的新入口 提供学校各专业课表课程查看、校园卡办理、一卡通应…

怎样在win10命令行窗口跑起来mujava

MuJava简介 Java (muJava) 是 Java 程序的变异系统。 它自动生成用于传统突变测试和类级别突变测试的突变体。 Java 可以测试单个类和多个类的包。 用户以对封装在单独 JUnit 类的方法中的被测类的方法调用序列的形式提供测试。 官网地址&#xff1a;Java Home Page 需要下…

正则表达式与bs4选择器筛选论文数准确率之比较

一、正则爬取论文网首页论文标题的示例 import requests import re from bs4 import BeautifulSoupheaders {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36}def get_html(url):try:res…

C# 通过SharpCompress.Archives.Rar解压RaR文件

/// <summary>/// 解压一个Rar文件/// </summary>/// <param name"RarFile">需要解压的Rar文件&#xff08;绝对路径&#xff09;</param>/// <param name"TargetDirectory">解压到的目录</param>/// <param name&…

如何将图片(matlab、python)无损放入word论文

许多论文对插图有要求&#xff0c;直接插入png、jpg一般是不行的&#xff0c;这是一篇顶刊文章&#xff08;pdf&#xff09;的插图&#xff0c;放大2400%后依旧清晰&#xff0c;搜罗了网上的方法&#xff0c;总结了一下如何将图片无损放入论文中。 这里主要讨论的是数据生成的图…

渗透测试(Lab4.2)

配置WebDeveloper的时候遇到一个错误 导入失败&#xff0c;因为 E:…ovf 未通过 OVF 规范一致性或虚拟硬件合规性检查。 请单击“重试”放松 OVF 规范与虚拟硬件合规性检查&#xff0c;并重新尝试导入&#xff1b; 或单击“取消”以取消导入。如果重新尝试导入&#xff0c;可能…

[Angular] 笔记 10:服务与依赖注入

什么是 Services & Dependency Injection? chatgpt 回答&#xff1a; 在 Angular 中&#xff0c;Services 是用来提供特定功能或执行特定任务的可重用代码块。它们可以用于处理数据、执行 HTTP 请求、管理应用程序状态等。Dependency Injection&#xff08;依赖注入&#…

w16php系列之基础数组

一、索引数组 概念 索引数组 是指键名为整数的数组。默认情况下&#xff0c;索引数组的键名是从0开始&#xff0c;并依次递增。它主要适用于利用位置&#xff08;0、1、2……&#xff09;来标识数组元素的情况。另外&#xff0c;索引数组的键名也可以自己指定 示例代码 <…
最新文章