圆月山庄资源网 Design By www.vgjia.com
本文实例为大家分享了小程序实现图片移动缩放效果的具体代码,供大家参考,具体内容如下
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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]