小程序中图片的移动、旋转和缩放功能

先把代码放上来

js逻辑代码

图标移动开始事件start(e) {//记录移动触摸起点位置this.setData({x: e.touches[0].clientX,y: e.touches[0].clientY,iconIndex: e.currentTarget.dataset.index})},//图标移动中事件move(e) {if (flag) {flag = false;setTimeout(() => {flag = true;}, 100)let arr = Object.assign({}, this.data.images, {})//计算移动的距离  arr[e.currentTarget.dataset.index].position = {left: e.touches[0].clientX - this.data.x,top: e.touches[0].clientY - this.data.y}//这里是因为页面图片是遍历 images数组动态生成的，所以要修改images的值页面才会重新渲染，根据自身情况决定this.setData({images: arr})}},//图标移动结束end(e) {let arr = Object.assign({}, this.data.images, {})this.data.imgUrl[this.data.imgIndex].props[e.currentTarget.dataset.index].left = arr[e.currentTarget.dataset.index].left = arr[e.currentTarget.dataset.index].left + arr[e.currentTarget.dataset.index].position.left;this.data.imgUrl[this.data.imgIndex].props[e.currentTarget.dataset.index].top = arr[e.currentTarget.dataset.index].top = arr[e.currentTarget.dataset.index].top + arr[e.currentTarget.dataset.index].position.top;arr[e.currentTarget.dataset.index].position = {left: 0,top: 0};this.setData({images: arr})},//图标缩放，旋转开始scaleStart(e) {let p = 500/this.data.imgUrl[this.data.imgIndex].width;//这是为了计算图片的原始尺寸，可忽略x1 = ((125 + this.data.imgUrl[this.data.imgIndex].left * p + this.data.imgUrl[this.data.imgIndex].areaWidth / 2 * p) * this.data.p) + this.data.images[e.currentTarget.dataset.index].left;y1 = ((102 + this.data.imgUrl[this.data.imgIndex].top * p + this.data.imgUrl[this.data.imgIndex].areaHeight / 2 * p) * this.data.p) + this.data.images[e.currentTarget.dataset.index].top;//x1、y1是旋转或者缩放时图片的中心点坐标let x = e.touches[0].clientX - x1,y = e.touches[0].clientY - y1,s = 0;let cos = Math.abs(x) / Math.pow((Math.pow(x, 2) + Math.pow(y, 2)), 0.5);var radina = Math.acos(cos);var angle = Math.floor(180 / (Math.PI / radina));if (x > 0) {if (y > 0) {angle = 360 - angle}} else {if (y > 0) {angle += 180} else {angle = 180 - angle}}//上面的代码是计算旋转或者缩放开始时触摸点和中心坐标与水平X轴的角度this.setData({actionIndex: e.currentTarget.dataset.index,s: Math.pow((Math.pow(x, 2) + Math.pow(y, 2)), 0.5),deg1: angle})},//缩放，旋转scaleMove(e) {if (flag) {flag = false;setTimeout(() => {flag = true}, 100)//这个定时器是为了解决小程序中setData()使用频率太高导致代码阻塞，页面渲染延迟let x = e.touches[0].clientX - x1,y = e.touches[0].clientY - y1,s = 0;s = Math.pow((Math.pow(x, 2) + Math.pow(y, 2)), 0.5);let cos = Math.abs(x) / s;var radina = Math.acos(cos);var angle = Math.floor(180 / (Math.PI / radina));if (x > 0) {if (y > 0) {angle = 360 - angle}} else {if (y > 0) {angle += 180} else {angle = 180 - angle}}//计算旋转或者缩放进行中触摸点和中心坐标与水平X轴的角度，从而得到图片的旋转角度if (e.currentTarget.dataset.dragize !== 0) {obj.scale = s / this.data.s.toFixed(2)}obj.rotate = parseInt(this.data.deg1 - angle)this.setData(obj)}},//图标缩放，旋转结束scaleEnd(e) {let arr = Object.assign({}, this.data.images, {});this.data.imgUrl[this.data.imgIndex].props[e.currentTarget.dataset.index].scale = arr[e.currentTarget.dataset.index].scale = arr[e.currentTarget.dataset.index].scale * this.data.scale;this.data.imgUrl[this.data.imgIndex].props[e.currentTarget.dataset.index].rotate = arr[e.currentTarget.dataset.index].rotate = arr[e.currentTarget.dataset.index].rotate + this.data.rotate;this.setData({images: arr,actionIndex: -1,rotate: 0,scale: 1,});},

WXML页面代码

<view wx:for="{{images}}" wx:key="{{index}}" class='box {{index==iconIndex?"active":""}}' style='transform:translateX({{(item.left+item.position.left)/p}}rpx) translateY({{(item.top+item.position.top)/p}}rpx) rotateZ({{actionIndex==index?item.rotate+rotate:item.rotate}}deg) scale({{actionIndex==index?item.scale*scale:item.scale}}); left:{{imgUrl[imgIndex].areaWidth*500/imgUrl[imgIndex].width/2-(item.dragize==1?75:25)}}rpx;top:{{imgUrl[imgIndex].areaHeight/imgUrl[imgIndex].width*500/2-(item.dragize===1?75:25)}}rpx'data-index='{{index}}'><image class='boxImg {{item.dragize==1?"":"BADGE"}}' catchtouchstart='start' catchtouchend='end' catchtouchmove="move" data-index="{{index}}" src='{{item.url}}?x-oss-process=image/resize,m_lfit,w_100'></image><view class='moveclose' style='transform:scale({{1/(actionIndex==index?item.scale*scale:item.scale)}})' hidden='{{index!=iconIndex}}' catchtap='moveclose' catchtouchmove data-index="{{index}}"></view><view class='movescale' style='transform:scale({{1/(actionIndex==index?item.scale*scale:item.scale)}})' hidden='{{index!=iconIndex}}' data-dragize='{{item.dragize}}' catchtouchmove="scaleMove" catchtouchstart="scaleStart" catchtouchend='scaleEnd' data-index='{{index}}'></view></view>

代码很乱。。毕竟是撸了三四天才搞出来的= =；哈哈哈，希望能有点帮助

最后把用到的数据结构分享一下

    images: [{dragize:1,//该图片是否允许缩放height:960,//图片高度 初始值id:41,left:0,//图片的left值   相对于自己定义的初始位置rotate:0,//旋转角度scale:1,//缩放倍数top:0,//图片的top值   相对于自己定义的初始位置position:{left:0,// 图片在移动过程中的偏移量top:0// 图片在移动过程中的偏移量}url:"https://octopus-master.oss-cn-shenzhen.aliyuncs.com/sys/0fec4b1864b8341bb84d9216b2cc42df.png",width:960//图片宽度 初始值}],iconIndex: -1, //大图中选中的图标下标scale: 1, //缩放比例,图片在缩放过程中的倍数  缩放结束时应该用之前的倍数乘以该倍数rotate: 0,//图片在旋转过程中的旋转角度 旋转结束时应该用之前的角度加上该角度x: 0,y: 0,deg1: 0,x1和y1我用的全局变量。。。因为只有在开始的时候赋值就可以后面不用改变

首先感谢这么多人的评论；受宠若惊，始料未及= =！；
应大家的的要求我把这个功能做了一个组件；本来想做成第三方插件；你们可以直接使用的；但是第三方插件提交的时候遇到了点问题；好像个人开发不能提交第三方开发插件申请，所以暂时先把代码放到github上面了，封装后可以根据你们自己的需求进行设计；如有其它必要、合理的需求可以在本文或者github留言，下面附上github地址

小程序移动、缩放、选择组件

小程序中图片的移动、旋转和缩放功能相关推荐

小程序中图片太大应该怎么处理
在小程序中图片格式为png时任然特别大的时候应该先将图片放在服务器上,然后从服务器上选取所用的图片在小程序中有放置请求接口的配置文件config.js 在小程序页面中要使用大图时候 (1)先引入co ...
小程序中图片点击预览、长按识别图中二维码的问题
通过自己的测试以及各类博客资料的查询,总结如下: 1.小程序中的图片不能识别除小程序码以外的二维码 2.并且仅在 wx.previewImage 中支持长按识别官方文档(wx.previewImag ...
小程序中图片宽度实现100%,高度自适应
在做轮播图时放了几个图片,但是显示一直怪怪的,宽度没有占满,右边总是留一大块空白,怪难看的,开始试了所有的mode属性都不行,至于mode属性起什么作用可以查一下小程序组件的API说明,主要用于控制图 ...
微信小程序中图片占满整个屏幕实现方法
将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦. 但是在微信小程序中,是没有dom对象的,根节点是page,使用pag ...
微信小程序图片删除php,关于微信小程序中图片处理的问题总结
在小程序的开发过程中,页面布局中,我们经常会遇到一些图片处理的问题,比如,如果图片不是固定高度和高度,但image设置的是固定的高度和宽度,这时候原始图片相对image设置的固定高度和宽度不是等比例大 ...
微信小程序中图片高度被压扁的解决办法
微信小程序开发中使用image标签展示的长图因为太长,就会被压扁变形,让人看起来很难看,那如何才能让图片的高度自适应呢?使用css的height:auto也没办法实现. 翻看了小程序社区的问答,发现了 ...
微信小程序中图片下面出现空白区
小程序wxml中如果出现了这种结构:<view><image></view>,只需设置图片垂直居中的方式(vertical-align)为middle即可.
微信小程序中图片压缩的最佳实现与封装
一.概述在项目开发过程中遇到一个需要从小程序上传图片的需求,此需求实现起来并不难,只需要调用chooseImage接口拿到图片的临时路径然后调用uploadFile接口进行上传.到这里这个功能已经实 ...
微信小程序实现报表（表格）双指缩放功能
实现前提要景: 1.本次实现双指缩放是用css3中的scale配合translate 实现 2.小程序不支持动态改变scale的大小即使在写在行内样式中也不生效(在调试中不生效)故需借助小程序自 ...
解决微信小程序中图片闪烁的问题
被这个问题逼出了强迫症,到处找解决办法,最后自己用了这个方法算是解决了.在全局css中加这样的代码: Image{height: auto; } 我设置的是固定宽度,高度自适应用的是widthFix, ...

小程序中图片的移动、旋转和缩放功能

小程序中图片的移动、旋转和缩放功能相关推荐

最新文章

热门文章