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

本文实例为大家分享了小程序实现图片移动缩放效果的具体代码，供大家参考，具体内容如下

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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。