小程序實現 縮放 移動 旋轉圖片

想要在小程序上實現 縮放 移動 旋轉 着實是不容易啊
百度了很久 跳了很多坑 話不多說 直接上代碼 助大家儘快脫坑

注意頭髮 小心禿頂哦

JS部分

 //index.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    bgPic:null,
    imgList:[1,2,3,4,5,6,7,8,9,10],	<!-- 這裏是圖片哦 -->
    currentHatId:1,

    hatCenterX:wx.getSystemInfoSync().windowWidth/2,
    hatCenterY:150,
    cancelCenterX:wx.getSystemInfoSync().windowWidth/2-50-2,
    cancelCenterY:100,
    handleCenterX:wx.getSystemInfoSync().windowWidth/2+50-2,
    handleCenterY:200,

    hatSize:100,

    scale:1,
    rotate:0
  },
  onLoad(){
    this.setData({
      bgPic: app.globalData.bgPic
    })
    },
  
  onReady(){
    this.hat_center_x=this.data.hatCenterX;
    this.hat_center_y=this.data.hatCenterY;
    this.cancel_center_x=this.data.cancelCenterX;
    this.cancel_center_y=this.data.cancelCenterY;
    this.handle_center_x=this.data.handleCenterX;
    this.handle_center_y=this.data.handleCenterY;

    this.scale=this.data.scale;
    this.rotate=this.data.rotate;
    
    this.touch_target="";
    this.start_x=0;
    this.start_y=0;
  },
  touchStart(e){
    if(e.target.id=="hat"){
      this.touch_target="hat";
    }else if(e.target.id=="handle"){
      this.touch_target="handle"
    }else{
      this.touch_target=""
    };
    
    if(this.touch_target!=""){
      this.start_x=e.touches[0].clientX;
      this.start_y=e.touches[0].clientY;
    }
  },
  touchEnd(e){
      this.hat_center_x=this.data.hatCenterX;
      this.hat_center_y=this.data.hatCenterY;
      this.cancel_center_x=this.data.cancelCenterX;
      this.cancel_center_y=this.data.cancelCenterY;
      this.handle_center_x=this.data.handleCenterX;
      this.handle_center_y=this.data.handleCenterY;
    // }
    this.touch_target="";
    this.scale=this.data.scale;
    this.rotate=this.data.rotate;
  },
  touchMove(e){
      var current_x=e.touches[0].clientX;
      var current_y=e.touches[0].clientY;
      var moved_x=current_x-this.start_x;
      var moved_y=current_y-this.start_y;
      if(this.touch_target=="hat"){
        this.setData({
          hatCenterX:this.data.hatCenterX+moved_x,
          hatCenterY:this.data.hatCenterY+moved_y,
          cancelCenterX:this.data.cancelCenterX+moved_x,
          cancelCenterY:this.data.cancelCenterY+moved_y,
          handleCenterX:this.data.handleCenterX+moved_x,
          handleCenterY:this.data.handleCenterY+moved_y
        })
      };
      if(this.touch_target=="handle"){
        this.setData({
          handleCenterX:this.data.handleCenterX+moved_x,
          handleCenterY:this.data.handleCenterY+moved_y,
          cancelCenterX:2*this.data.hatCenterX-this.data.handleCenterX,
          cancelCenterY:2*this.data.hatCenterY-this.data.handleCenterY
        });
        let diff_x_before=this.handle_center_x-this.hat_center_x;
        let diff_y_before=this.handle_center_y-this.hat_center_y;
        let diff_x_after=this.data.handleCenterX-this.hat_center_x;
        let diff_y_after=this.data.handleCenterY-this.hat_center_y;
        let distance_before=Math.sqrt(diff_x_before*diff_x_before+diff_y_before*diff_y_before);
        let distance_after=Math.sqrt(diff_x_after*diff_x_after+diff_y_after*diff_y_after);
        let angle_before=Math.atan2(diff_y_before,diff_x_before)/Math.PI*180;
        let angle_after=Math.atan2(diff_y_after,diff_x_after)/Math.PI*180;
        this.setData({
          scale:distance_after/distance_before*this.scale,
          rotate:angle_after-angle_before+this.rotate,
        })
      }
      this.start_x=current_x;
      this.start_y=current_y;
  },
  

  chooseImg(e){
    console.log(e);
    this.setData({
      currentHatId:e.target.dataset.hatId
    })
  },
  combinePic(){
    app.globalData.scale=this.scale;
    app.globalData.rotate = this.rotate;
    app.globalData.hat_center_x = this.hat_center_x;
    app.globalData.hat_center_y = this.hat_center_y;
    app.globalData.currentHatId = this.data.currentHatId;
    wx.navigateTo({
      url: '../combine/combine',
    })
  }
})

WXML部分

<!--index.wxml-->
<view  wx:if="{{!combine}}">
    <view class="container" 
          id="container"
          bind:touchstart="touchStart" 
          bind:touchend="touchEnd"
          bind:touchmove="touchMove">
    <image class="bg" src="{{bgPic}}"></image>
    <icon type="cancel" class="cancel" id="cancel"
            style="top:{{cancelCenterY-10+'px'}};left:{{cancelCenterX-10+'px'}}"></icon>
    <icon type="waiting" class="handle"  id="handle"  color="green"
            style="top:{{handleCenterY-10+'px'}};left:{{handleCenterX-10+'px'}}"></icon>
    <image class="hat" id='hat' src="../../image/{{currentHatId}}.png"
    style="top:{{hatCenterY-hatSize/2-2+'px'}};left:{{hatCenterX-hatSize/2-2+'px'}};transform:rotate({{rotate+'deg'}}) scale({{scale}})"
    ></image>
    </view>
    
  <button bind:tap="combinePic">確定</button>
   <scroll-view class="scrollView" scroll-x="true" >
    <image class="imgList" 
        wx:for="...imgList" wx:key="{{index+1}}" 
        src="../../image/{{index+1}}.png"
        data-hat-id="{{index+1}}"
        bind:tap="chooseImg"></image>
  </scroll-view> 
</view>

WXSS部分

  .container{
  height:300px;
  width:100%;
}
.bg{
  position: absolute;
  z-index:0;
  height: 300px;
  width:300px;
}
button{
  margin-top:10px;

}
.hat{ 
  height: 100px;
  width: 100px;
  position: absolute;
  border: dashed 2px yellow;
  top:100px;
}
.handle,.cancel{
  position: absolute;
  z-index: 1;
  width:20px;
  height:20px;
}
.scrollView{
   width: 100%; 
   position: absolute;
   bottom: 5px;
   white-space: nowrap;
}
.imgList{
  height: 70px;
  width: 70px;
  border:2px solid;
  margin: 5px;
}