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


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 相关文章推荐
JS 的应用开发初探(mootools)
Dec 19 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
JS实现评价的星星功能
Aug 20 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
详解Vue之计算属性
Jun 20 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 Javascript
javascript实现下拉菜单效果
Feb 09 Javascript
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正确解析UTF-8字符串技巧应用
2012/11/07 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
Python文件和目录操作详解
2015/02/08 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
对python周期性定时器的示例详解
2019/02/19 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
python selenium 获取接口数据的实现
2020/12/07 Python
Python创建自己的加密货币的示例
2021/03/01 Python
实习教师自我鉴定
2013/12/09 职场文书
区域销售经理职责
2013/12/22 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
建筑安全生产责任书
2014/07/22 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
新人入职感言
2015/07/31 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
用Python生成会跳舞的美女
2022/01/18 Python
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js