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