小程序实现图片移动缩放效果


Posted in Javascript onMay 26, 2020

本文实例为大家分享了小程序实现图片移动缩放效果的具体代码,供大家参考,具体内容如下

git地址 , 如果对您有帮助给个start呗

尝试了movable-view标签是很方便, 但是我想有个拉伸按钮去缩放图片, 于是尝试自己写了.
思想利用catchtouchmove属性计算偏移量, 实时更新坐标

小程序实现图片移动缩放效果

以下是完整代码

js

/**
 * All right by NieYinlong
 */

Page({

 /**
 * 页面的初始数据
 */
 data: {
 bgBoxHeight: 400, // 背景的高度
 bgBoxWidth: 320, // 背景的宽度
 
 moveImgLeft: 40,
 moveImgTop: 80,
 moveImgH: 100,
 moveImgW: 100,

 scaleIconFixWidth: 30,
 scaleLeft: 0,    // 拉伸按钮默认x坐标 (拉伸按钮默认宽高30)
 scaleTop: 0,    // 拉伸按钮默认y坐标
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 const halfWidth = this.data.scaleIconFixWidth / 2
 this.setData({
  scaleLeft: this.data.moveImgLeft + this.data.moveImgW - halfWidth,
  scaleTop: this.data.moveImgTop + this.data.moveImgH - halfWidth
 })
 },

 // 图片移动
 moveImgTouchmove: function(e) {
 console.log(e)
 let pageX = e.changedTouches[0].pageX
 let pageY = e.changedTouches[0].pageY
 
 
 // (this.data.moveImgW / 2)是因为触摸放到中间位置
 let toLeft = pageX - this.data.moveImgW / 2; 
 let toTop = pageY - this.data.moveImgH / 2;

 const halfWidth = this.data.scaleIconFixWidth / 2

 // 限制x左边不能出边框
 if (pageX - (this.data.moveImgW / 2) <= 0) {
  return;
 }
 
 // 限制右边不能出超过边框
 if ((pageX + (this.data.moveImgW / 2)) >= (this.data.bgBoxWidth)) {
  return;
 }

 // 限制top
 if (pageY - (this.data.moveImgH / 2) <= 1) {
  return;
 }

 // 限制bottom
 if ((pageY + (this.data.moveImgH / 2)) >= this.data.bgBoxHeight) {
  return;
 }


 this.setData({
  moveImgLeft: toLeft,
  moveImgTop: toTop,
  scaleLeft: toLeft + this.data.moveImgW - halfWidth,
  scaleTop: toTop + this.data.moveImgH - halfWidth
 })
 },
 
 // 拉伸按钮移动
 scaleTouchmove: function (e) {
 console.log(e)
 let pageX = e.changedTouches[0].pageX
 let pageY = e.changedTouches[0].pageY
 const halfWidth = this.data.scaleIconFixWidth / 2
 let toLeft = pageX - halfWidth // 减去halfWidth是拉伸按钮宽度的一半
 let toTop = pageY - halfWidth

 
 let changedW = pageX - this.data.moveImgLeft
 let changedH = pageY - this.data.moveImgTop

 // 限制最moveImg小尺寸
 if (toLeft <= (this.data.moveImgLeft + halfWidth)) {
  return;
 }
 if (toTop <= (this.data.moveImgTop + halfWidth)) {
  return;
 }

 // 限制moveImg最大尺寸
 if(pageX - this.data.moveImgLeft > 250) {
  // 宽度达到最大值
  return;
 }
 if (pageY - this.data.moveImgTop > 250) {
  // 高度达到最大值
  return;
 }

 // 限制拉伸按钮的right
 if(this.data.scaleLeft + this.data.scaleIconFixWidth >= this.data.bgBoxWidth) {
  return;
 }
 // 限制拉伸按钮的bottom
 if (this.data.scaleTop + this.data.scaleIconFixWidth >= this.data.bgBoxHeight) {
  return;
 }

 this.setData({
  scaleLeft: toLeft,
  scaleTop: toTop,
  moveImgW: pageX - this.data.moveImgLeft,
  moveImgH: pageY - this.data.moveImgTop,
 })
 },

})

wxml

<view 
 class='bgBox' 
 style="height:{{bgBoxHeight}}px; width:{{bgBoxWidth}}px"
>
 <image 
 class='movedImg'
 src='../../image/moveImg.png'
 catchtouchmove='moveImgTouchmove'
 style="width:{{moveImgW}}px;height:{{moveImgH}}px; left:{{moveImgLeft}}px;top:{{moveImgTop}}px"
 />
 
 <image 
 src='../../image/spreadIcon.png'
 class='scaleIcon'
 catchtouchmove='scaleTouchmove'
 style="width:{{scaleIconFixWidth}}px;height:{{scaleIconFixWidth}}px; left:{{scaleLeft}}px; top:{{scaleTop}}px"
 />
</view>

wxss

.bgBox {
 border: 2px solid green;
 height: 400px;
 width: 99vw;
}

.movedImg {
 position: absolute;
 border: 3px dotted rgb(255, 166, 0);
}

.scaleIcon {
 position: absolute;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
React实现轮播效果
Aug 25 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
jQuery实现的分页插件完整示例
May 26 #jQuery
js实现时间日期校验
May 26 #Javascript
Node.js API详解之 assert模块用法实例分析
May 26 #Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 #Javascript
js校验开始时间和结束时间
May 26 #Javascript
vue实现简单跑马灯效果
May 25 #Javascript
Js和VUE实现跑马灯效果
May 25 #Javascript
You might like
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
任意位置显示html菜单
2007/02/01 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现求一个集合所有子集的示例
2018/05/04 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
python调试神器PySnooper的使用
2019/07/03 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
flask 实现token机制的示例代码
2019/11/07 Python
如何理解python中数字列表
2020/05/29 Python
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
租房协议书
2014/04/10 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
革命电影观后感
2015/06/18 职场文书
老干部座谈会主持词
2015/07/03 职场文书
学术研讨会主持词
2015/07/04 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
关于nginx 实现jira反向代理的问题
2021/09/25 Servers