温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

小程序如何实现图片移动缩放

发布时间:2020-07-22 10:00:38 来源:亿速云 阅读:332 作者:小猪 栏目:web开发

这篇文章主要为大家展示了小程序如何实现图片移动缩放,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。

尝试了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' 
 
>
 <image 
 class='movedImg'
 src='../../image/moveImg.png'
 catchtouchmove='moveImgTouchmove'
 
 />
 
 <image 
 src='../../image/spreadIcon.png'
 class='scaleIcon'
 catchtouchmove='scaleTouchmove'
 
 />
</view>

wxss

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

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

.scaleIcon {
 position: absolute;
}

以上就是关于小程序如何实现图片移动缩放的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI