split 'editor' to 'editor' and 'combine','next'button intelligentized…

… disable

app.js

@@ -35,6 +35,11 @@ App({
   },
   globalData: {
     userInfo: null,
-    bgPic:null
+    bgPic:null,
+    scale:1,
+    rotate:0,
+    hat_center_x:0,
+    hat_center_x:0,
+    currentHatId:1
   }
 })

app.json

@@ -1,7 +1,8 @@
 {
   "pages": [
     "pages/index/index",
-    "pages/imageeditor/imageeditor"
+    "pages/imageeditor/imageeditor",
+    "pages/combine/combine"
   ],
   "window": {
     "backgroundTextStyle": "light",

pages/combine/combine.js

@@ -0,0 +1,71 @@
+// pages/combine/combine.js
+const app=getApp();
+Page({
+
+  data: {
+
+  },
+
+  onLoad: function (options) {
+    wx.getImageInfo({
+      src:app.globalData.bgPic,
+      success: res => {
+          this.bgPic=res.path
+        this.draw();
+      }
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+
+  draw() {
+    let scale = app.globalData.scale;
+    let rotate = app.globalData.rotate;
+    let hat_center_x = app.globalData.hat_center_x;
+    let hat_center_y = app.globalData.hat_center_y;
+    let currentHatId = app.globalData.currentHatId;
+    const pc = wx.createCanvasContext('myCanvas');
+    const windowWidth = wx.getSystemInfoSync().windowWidth;
+    const hat_size = 100 * scale;
+
+
+    pc.clearRect(0, 0, windowWidth, 300);
+    pc.drawImage(this.bgPic, windowWidth / 2 - 150, 0, 300, 300);
+    pc.translate(hat_center_x,hat_center_y);
+    pc.rotate(rotate * Math.PI / 180);
+    pc.drawImage("../../image/" + currentHatId + ".png", -hat_size / 2, -hat_size / 2, hat_size, hat_size);
+    pc.draw();
+  },
+  savePic() {
+    const windowWidth = wx.getSystemInfoSync().windowWidth;
+    wx.canvasToTempFilePath({
+      x: windowWidth / 2 - 150,
+      y: 0,
+      height: 300,
+      width: 300,
+      canvasId: 'myCanvas',
+      success: (res) => {
+        wx.saveImageToPhotosAlbum({
+          filePath: res.tempFilePath,
+          success: (res) => {
+            wx.navigateTo({
+              url: '../index/index',
+              success: function(res) {},
+              fail: function(res) {},
+              complete: function(res) {},
+            })
+            console.log("success:" + res);
+          }, fail(e) {
+            console.log("err:" + e);
+          }
+        })
+      }
+    });
+  }
+})

pages/combine/combine.json

@@ -0,0 +1 @@
+{}

pages/combine/combine.wxml

@@ -0,0 +1,4 @@
+<view >
+  <canvas  class="myCanvas" canvas-id="myCanvas" style="height:300px;;width:100%;"/>
+  <button bind:tap="savePic">保存至相册</button>
+</view>

pages/combine/combine.wxss

@@ -0,0 +1 @@
+/* pages/combine/combine.wxss */

pages/imageeditor/imageeditor.js

@@ -91,14 +91,14 @@ Page({
           cancelCenterX:2*this.data.hatCenterX-this.data.handleCenterX,
           cancelCenterY:2*this.data.hatCenterY-this.data.handleCenterY
         });
-        var diff_x_before=this.handle_center_x-this.hat_center_x;
-        var diff_y_before=this.handle_center_y-this.hat_center_y;
-        var diff_x_after=this.data.handleCenterX-this.hat_center_x;
-        var diff_y_after=this.data.handleCenterY-this.hat_center_y;
-        var distance_before=Math.sqrt(diff_x_before*diff_x_before+diff_y_before*diff_y_before);
-        var distance_after=Math.sqrt(diff_x_after*diff_x_after+diff_y_after*diff_y_after);
-        var angle_before=Math.atan2(diff_y_before,diff_x_before)/Math.PI*180;
-        var angle_after=Math.atan2(diff_y_after,diff_x_after)/Math.PI*180;
+        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,
@@ -107,60 +107,22 @@ Page({
       this.start_x=current_x;
       this.start_y=current_y;
   },
-  combinePic(e){
-    this.setData({
-      combine:true
-    });
-    wx.getImageInfo({
-      src: this.data.bgPic,
-      success:res=>{
-        this.setData({
-          imageResource:res.path
-        });
-        this.draw();
-      }
-    })
-  },
-  draw(){
-    const pc=wx.createCanvasContext('myCanvas');
-    const windowWidth=wx.getSystemInfoSync().windowWidth;
-    const hat_size=this.data.hatSize*this.scale;
-
-
-    pc.clearRect(0, 0, windowWidth, 300);
-    pc.drawImage(this.data.imageResource,windowWidth/2-150,0,300,300);
-    pc.translate(this.hat_center_x,this.hat_center_y);
-    pc.rotate(this.rotate* Math.PI / 180);
-    pc.drawImage("../../image/"+this.data.currentHatId+".png",-hat_size/2,-hat_size/2,hat_size,hat_size);
-    pc.draw();
-  },
-  savePic(){
-    const windowWidth = wx.getSystemInfoSync().windowWidth;
-    wx.canvasToTempFilePath({
-      x: windowWidth / 2 - 150,
-      y:0,
-      height:300,
-      width:300,
-      canvasId: 'myCanvas',
-      success:  (res) =>{
-        wx.saveImageToPhotosAlbum({
-          filePath: res.tempFilePath,
-          success:(res)=> {
-            this.setData({
-              combine:false
-            })
-          }, fail(e) {
-            console.log("err:"+e);
-          }
-        })
-      }
-    });
-  },
+
 
   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',
+    })
   }
 })

pages/imageeditor/imageeditor.wxml

@@ -25,9 +25,6 @@
         bind:tap="chooseImg"></image>
   </scroll-view> 
 </view>
-<view wx:if="{{combine}}">
-  <canvas  class="myCanvas" canvas-id="myCanvas" style="height:300px;;width:100%;"/>
-  <button bind:tap="savePic">保存至相册</button>
-</view>
+
 
 

pages/index/index.js

@@ -6,85 +6,26 @@ Page({
    * 页面的初始数据
    */
   data: {
-    bgPic:null
+    bgPic:null,
+    picChoosed:false
   },
 
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function () {
-    //
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
-  },
-  chooseImage(from){
-    wx.chooseImage({
-      count: 1,
-      sizeType: ["original", "compressed"],
-      sourceType: [from.target.dataset.way],
-      success:(res)=> {
-        var tempFilePaths = res.tempFilePaths;
-        console.log(tempFilePaths);
-        this.setData({
-          bgPic:res.tempFilePaths[0]
-        })
-      },
-      fail: function(res) {},
-      complete: function(res) {},
-    })
+  assignPicChoosed() {
+    if (this.data.bgPic) {
+      this.setData({
+        picChoosed: true
+      })
+    } else {
+      this.setData({
+        picChoosed: false
+      })
+    }
   },
-  getAvatar(){
+  getAvatar() {
     if (app.globalData.userInfo) {
       this.setData({
-        bgPic: app.globalData.userInfo.avatarUrl
-      })
+        bgPic: app.globalData.userInfo.avatarUrl,
+      });
     } else {
       // 在没有 open-type=getUserInfo 版本的兼容处理
       wx.getUserInfo({
@@ -93,19 +34,37 @@ Page({
           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;
+        console.log(tempFilePaths);
+        this.setData({
+          bgPic:res.tempFilePaths[0]
+        });
+        this.assignPicChoosed();
+      },
+      fail: function (res) {
+        this.assignPicChoosed();
+        },
+      complete: function (res) {
+        this.assignPicChoosed();
+        },
+    })
   },
   nextPage(){
-    if (this.data.bgPic){
       app.globalData.bgPic=this.data.bgPic;
       wx.navigateTo({
         url: '../imageeditor/imageeditor',
       })
-    }else{
-      return
-    }
   }
 })

pages/index/index.wxml

@@ -8,5 +8,5 @@
   <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">下一步</button>
+  <button bind:tap="nextPage" disabled="{{!picChoosed}}">下一步</button>
 </view>