小程序实现 缩放 移动 旋转

想要在小程序上实现 缩放 移动 旋转 着实是不容易啊
百度了很久 跳了很多坑 话不多说 直接上代码 助大家尽快脱坑

JS部分

// pages/index/index.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    bgPic:null,
    picChoosed:false
  },

  assignPicChoosed() {
    if (this.data.bgPic) {
      this.setData({
        picChoosed: true
      })
    } else {
      this.setData({
        picChoosed: false
      })
    }
  },
  getAvatar() {
    if (app.globalData.userInfo) {
      this.setData({
        bgPic: app.globalData.userInfo.avatarUrl,
      });
      this.assignPicChoosed();
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo;
          this.setData({
            userInfo: res.userInfo,
            bgPic: res.userInfo.avatarUrl
          });
          this.assignPicChoosed();
        }
      })
    }
  },
  chooseImage(from){
    wx.chooseImage({
      count: 1,
      sizeType: ["original", "compressed"],
      sourceType: [from.target.dataset.way],
      success:(res)=> {
        var tempFilePaths = res.tempFilePaths;
        this.setData({
          bgPic:res.tempFilePaths[0]
        });
        this.assignPicChoosed();
      },
      fail: (res)=>{
        this.assignPicChoosed();
        },
      complete: (res)=>{
        this.assignPicChoosed();
        },
    })
  },
  nextPage(){
      app.globalData.bgPic=this.data.bgPic;
      wx.navigateTo({
        url: '../imageeditor/imageeditor',
      })
  }
})

WXML部分

<view class="container">
  <image class="bgPic" wx:if="{{bgPic}}" src="{{bgPic}}"></image>
  <view class="emptyBg" wx:else></view>
</view>
<view class="btnContainer">
  <button data-way="avatar" bind:tap="getAvatar">使用头像</button>
  <button data-way="camera" bind:tap="chooseImage">使用相机</button>
  <button data-way="album" bind:tap="chooseImage">相册选择</button>
  <button bind:tap="nextPage" disabled="{{!picChoosed}}">下一步</button>
</view>

WXSS部分

.btnZoom{
  position: relative;
  width:100%;
  height:300px;
}
button{
  margin: 10px 20px 0px 20px;
}
.container{
  width:100%;
  height:300px;
}
.bgPic,.emptyBg{
  height:300px;
  width:300px;
}
.emptyBg{
  border: 2px solid;
}