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


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用图作提交按钮或超连接
Mar 26 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
vue中渲染对象中属性时显示未定义的解决
Jul 31 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
javascript 隔行换色函数代码
2010/10/24 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
Python缩进和冒号详解
2016/06/01 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
django用户登录和注销的实现方法
2018/07/16 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
Python实战之制作天气查询软件
2019/05/14 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
python实现人机猜拳小游戏
2020/02/03 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
django的autoreload机制实现
2020/06/03 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
python和go语言的区别是什么
2020/07/20 Python
python 深度学习中的4种激活函数
2020/09/18 Python
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
高分子材料与工程专业推荐信
2013/12/01 职场文书
会计出纳岗位职责
2013/12/25 职场文书
大学生军训广播稿
2014/01/24 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
售房协议书
2014/08/19 职场文书
实习指导教师评语
2014/12/30 职场文书
初中语文教师研修日志
2015/11/13 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书