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


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面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
JavaScript 学习历程和心得分享
Dec 12 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
基本DOM节点操作
2017/01/17 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
一套软件测试笔试题
2014/07/25 面试题
家长会演讲稿范文
2014/01/10 职场文书
自荐信的基本格式
2014/02/22 职场文书
文明倡议书范文
2014/04/15 职场文书
委托书格式
2014/08/01 职场文书
社区活动策划方案
2014/08/21 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
小学教师读书笔记
2015/07/01 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
Python基础之元编程知识总结
2021/05/23 Python
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
PO模式在selenium自动化测试框架的优势
2022/03/20 Python