本文例項為大家分享了小程式實現圖片移動縮放效果的具體程式碼，供大家參考，具體內容如下

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。