From d70cb7cc357842be573d77d184eade240d83b98f Mon Sep 17 00:00:00 2001
From: Amypher <1648511816@qq.com>
Date: Thu, 4 Jan 2018 17:21:07 +0800
Subject: [PATCH] mchoose pic and try on christmas hat ---done

---
 app.js                                        |   3 +-
 app.json                                      |  13 +-
 .../imageeditor/{index.js => imageeditor.js}  |  29 +-
 pages/imageeditor/imageeditor.json            |   1 +
 .../{index.wxml => imageeditor.wxml}          |   2 +-
 .../{index.wxss => imageeditor.wxss}          |   0
 pages/index/index.js                          | 283 ++++++------------
 pages/index/index.json                        |   1 +
 pages/index/index.wxml                        |  31 +-
 pages/index/index.wxss                        |  51 +---
 project.config.json                           |   2 +-
 11 files changed, 133 insertions(+), 283 deletions(-)
 rename pages/imageeditor/{index.js => imageeditor.js} (90%)
 create mode 100644 pages/imageeditor/imageeditor.json
 rename pages/imageeditor/{index.wxml => imageeditor.wxml} (94%)
 rename pages/imageeditor/{index.wxss => imageeditor.wxss} (100%)
 create mode 100644 pages/index/index.json

diff --git a/app.js b/app.js
index b545190..790e9dc 100644
--- a/app.js
+++ b/app.js
@@ -34,6 +34,7 @@ App({
     })
   },
   globalData: {
-    userInfo: null
+    userInfo: null,
+    bgPic:null
   }
 })
\ No newline at end of file
diff --git a/app.json b/app.json
index 5dcefdc..f20bc82 100644
--- a/app.json
+++ b/app.json
@@ -1,12 +1,13 @@
 {
-  "pages":[
-    "pages/imageeditor/index",
+  "pages": [
+    "pages/index/index",
+    "pages/imageeditor/imageeditor",
     "pages/logs/logs"
   ],
-  "window":{
-    "backgroundTextStyle":"light",
+  "window": {
+    "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
     "navigationBarTitleText": "我要圣诞帽",
-    "navigationBarTextStyle":"black"
+    "navigationBarTextStyle": "black"
   }
-}
+}
\ No newline at end of file
diff --git a/pages/imageeditor/index.js b/pages/imageeditor/imageeditor.js
similarity index 90%
rename from pages/imageeditor/index.js
rename to pages/imageeditor/imageeditor.js
index d5cfb05..7270309 100644
--- a/pages/imageeditor/index.js
+++ b/pages/imageeditor/imageeditor.js
@@ -4,7 +4,7 @@ const app = getApp()
 
 Page({
   data: {
-    userInfo: {},
+    bgPic:null,
     imageResource:"",
     combine:false,
     imgList:[1,2,3,4,5,6,7,8,9,10],
@@ -22,25 +22,12 @@ Page({
     scale:1,
     rotate:0
   },
-  onLoad: function () {
-    if (app.globalData.userInfo) {
-      
-      this.setData({
-        userInfo: app.globalData.userInfo,
-        combine:false
-      })
-    } else {
-      // 在没有 open-type=getUserInfo 版本的兼容处理
-      wx.getUserInfo({
-        success: res => {
-          app.globalData.userInfo = res.userInfo
-          this.setData({
-            userInfo: res.userInfo
-          })
-        }
-      })
-    }
-  },
+  onLoad(){
+    this.setData({
+      bgPic: app.globalData.bgPic
+    })
+    },
+  
   onReady(){
     this.hat_center_x=this.data.hatCenterX;
     this.hat_center_y=this.data.hatCenterY;
@@ -125,7 +112,7 @@ Page({
       combine:true
     });
     wx.getImageInfo({
-      src: this.data.userInfo.avatarUrl,
+      src: this.data.bgPic,
       success:res=>{
         this.setData({
           imageResource:res.path
diff --git a/pages/imageeditor/imageeditor.json b/pages/imageeditor/imageeditor.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/pages/imageeditor/imageeditor.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/pages/imageeditor/index.wxml b/pages/imageeditor/imageeditor.wxml
similarity index 94%
rename from pages/imageeditor/index.wxml
rename to pages/imageeditor/imageeditor.wxml
index 9426c4b..c6ac013 100644
--- a/pages/imageeditor/index.wxml
+++ b/pages/imageeditor/imageeditor.wxml
@@ -6,7 +6,7 @@
           bind:touchstart="touchStart" 
           bind:touchend="touchEnd"
           bind:touchmove="touchMove">
-    <image class="bg" src="{{userInfo.avatarUrl}}" bind:tap="getSize"></image>
+    <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"
diff --git a/pages/imageeditor/index.wxss b/pages/imageeditor/imageeditor.wxss
similarity index 100%
rename from pages/imageeditor/index.wxss
rename to pages/imageeditor/imageeditor.wxss
diff --git a/pages/index/index.js b/pages/index/index.js
index aa3494c..27b31de 100644
--- a/pages/index/index.js
+++ b/pages/index/index.js
@@ -1,216 +1,111 @@
-//index.js
-//获取应用实例
-const app = getApp()
-
+// pages/index/index.js
+const app = getApp();
 Page({
+
+  /**
+   * 页面的初始数据
+   */
   data: {
-    userInfo: {},
-    hasUserInfo: false,
-    // catX: 100,
-    // catY: 80,
-    width: 150,
-    avataPath:'',
-    canIUse: wx.canIUse('button.open-type.getUserInfo'),
-    touching:false,
-    imageTop:0,
-    imageLeft:38,
-    dotTop:90,
-    dotLeft:130,
-    // startX:0,
-    // startY:0,
-    // endX:0,
-    // endY:0,
-    scale:1,
-    rotate:0,
-    // xMove:0,
-    // yMove:0
+    bgPic:null
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function () {
+    //
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+  
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+  
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+  
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+  
   },
-  //事件处理函数
-  bindViewTap: function () {
-    wx.navigateTo({
-      url: '../logs/logs'
+  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) {},
     })
   },
-  onLoad: function () {
+  getAvatar(){
     if (app.globalData.userInfo) {
       this.setData({
-        userInfo: app.globalData.userInfo,
-        hasUserInfo: true
+        bgPic: app.globalData.userInfo.avatarUrl
       })
-      this.draw();
-    } else if (this.data.canIUse) {
-      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
-      // 所以此处加入 callback 以防止这种情况
-      app.userInfoReadyCallback = res => {
-        this.setData({
-          userInfo: res.userInfo,
-          hasUserInfo: true
-        })
-        this.draw();
-      }
     } else {
       // 在没有 open-type=getUserInfo 版本的兼容处理
       wx.getUserInfo({
         success: res => {
-          app.globalData.userInfo = res.userInfo
+          app.globalData.userInfo = res.userInfo;
           this.setData({
             userInfo: res.userInfo,
-            hasUserInfo: true
+            bgPic: res.userInfo.avatarUrl
           })
-          this.draw();
         }
       })
     }
   },
-  getUserInfo: function (e) {
-    app.globalData.userInfo = e.detail.userInfo
-
-    this.setData({
-      userInfo: e.detail.userInfo,
-      hasUserInfo: true
-    })
-    this.draw()
-  },
-  // slider1change(e) {
-  //   this.setData({
-  //     width: e.detail.value
-  //   })
-  //   this.draw();
-  // },
-  // sliderxchange(e) {
-  //   this.setData({
-  //     catX: e.detail.value
-  //   })
-  //   this.draw();
-  // },
-  // sliderychange(e) {
-  //   this.setData({
-  //     catY: e.detail.value
-  //   })
-  //   this.draw();
-  // },
-  onReady() {
-    this.image_top = 0;
-    this.image_left = 38;
-    this.dot_top=90;
-    this.dot_left=130;
-    this.hat_size=100;
-    this.draw();
-  },
-  draw() {
-
-    if (app.globalData.userInfo||this.data.userInfo.avatarUrl) {
-      if(this.data.avataPath){
-        this._draw()
-      }else{
-        wx.getImageInfo({
-          src: app.globalData.userInfo.avatarUrl,
-          success:(res)=>{
-               this.setData({avataPath:res.path});
-               this._draw()
-          }
+  nextPage(){
+    if (this.data.bgPic){
+      app.globalData.bgPic=this.data.bgPic;
+      wx.navigateTo({
+        url: '../imageeditor/imageeditor',
       })
-      }
-    }
-  },
-  _draw(){
-    var context = wx.createCanvasContext('firstCanvas')
-    context.clearRect(0, 0, 300, 300);
-    context.drawImage(this.data.avataPath, 0, 0, 300, 300)
-    context.drawImage('/image/1.png', this.data.catX, this.data.catY, this.data.width, this.data.width)
-    context.draw();          //在可以使用`res.path`将网络图片绘制到自`canvas`上了
-  },
-  canvasToImageFile() {
-    wx.canvasToTempFilePath({
-      canvasId: 'firstCanvas',
-      success: function (res) {
-       
-        wx.saveImageToPhotosAlbum({
-          filePath: res.tempFilePath,
-          success(res) {
-            console.log(res)
-          }, fail(e) {
-           
-          }
-        })
-      }
-    });
-  },
-  
-  touchstart(e){
-    this.startX = e.touches[0].clientX;
-    this.startY = e.touches[0].clientY;
-    // this.origindata_top = this.data_top||90;
-    // this.origindata_left = this.data_left|| 130;
-    if(e.target.id=='redDot'){
-        this.enableDrag = true;
-    }
-    if(e.target.id=='cat'){
-      this.enableCatDrag = true;
-  }
-   
-  },
-  touchend(e){
-    this.enableDrag = false;
-    this.enableCatDrag = false;
-    this.setData({
-      touching:false
-    });
-    //this.hat_size=this.hat_size*this.data.scale;
-    // this.image_top=this.data.imageTop;
-    // this.image_left=this.data.imageLeft;
-     this.dot_top=this.data.dotTop;
-     this.dot_left=this.data.dotLeft;
-  },
-  touchmove(e){
-    var endX= e.touches[0].clientX;
-    var endY = e.touches[0].clientY;
-
-    var xMove=endX-this.startX;
-    var yMove=endY-this.startY;
-    if(this.enableDrag ){
-       var orginX=this.image_left+this.hat_size/2;
-       var orginY=this.image_top+this.hat_size/2;
-       var dotX_start=this.dot_left+10;
-       var dotY_start=this.dot_top+10;
-       var dotX_end=endX+10;
-       var dotY_end=endY+10;
-      
-       
-        var distanceX0=dotX_start-orginX;
-        var distanceY0=dotY_start-orginY;
-        var distanceX1=dotX_end-orginX;
-        var distanceY1=dotY_end-orginY;
-        var angle0=Math.atan2(distanceY0,distanceX0)/Math.PI*180;
-        var angle1=Math.atan2(distanceY1,distanceX1)/Math.PI*180;
-        var distance0=Math.sqrt(distanceX0 * distanceX0 + distanceY0 * distanceY0);
-        var distance1=Math.sqrt(distanceX1 * distanceX1 + distanceY1 * distanceY1);
-        
-        
-       this.setData({
-        //rotate:Math.atan2(this.yMove,xMove)*2*Math.PI,
-        dotTop:endY,
-        dotLeft:endX,
-        rotate:angle1-angle0,
-        scale:distance1/distance0
-       });
-  
-    }
-    if(this.enableCatDrag){
-     
-      this.image_top = this.image_top + yMove;
-      this.image_left = this.image_left + xMove;
-      this.dot_top = this.dot_top + yMove;
-      this.dot_left = this.dot_left + xMove;
-      //设置帽子的位置
-      this.setData({
-        imageTop:this.image_top,
-        imageLeft:this.image_left,
-        dotTop:this.dot_top,
-        dotLeft:this.dot_left,
-      });
+    }else{
+      return
     }
-    this.startX = endX;
-    this.startY = endY;
   }
-})
+})
\ No newline at end of file
diff --git a/pages/index/index.json b/pages/index/index.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/pages/index/index.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/pages/index/index.wxml b/pages/index/index.wxml
index 0ec6a7e..0a3eda9 100644
--- a/pages/index/index.wxml
+++ b/pages/index/index.wxml
@@ -1,21 +1,12 @@
-<!--index.wxml-->
-<view class="container" >
-<text>qqqq</text>
-    <view class="imageContainer" 
-          id="container"
-          bind:touchstart="touchstart" 
-          bind:touchend="touchend"
-          bind:touchmove="touchmove">
-    <image class="image" src="../../image/1.png"></image>
-    <view class="contorler {{touching?'touching':''}}" 
-          id="redDot"
-          style="top:{{dotTop+'px'}};left:{{dotLeft+'px'}};">
-    </view>
-    <image 
-    class="rotateObj"
-    id='cat' 
-    src="../../image/1.png"
-    style="top:{{imageTop+'px'}};left:{{imageLeft+'px'}};transform:rotate({{rotate+'deg'}}) scale({{scale}})"
-    ></image>
-    </view>
+<!--pages/index/index.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">下一步</button>
 </view>
\ No newline at end of file
diff --git a/pages/index/index.wxss b/pages/index/index.wxss
index e4570f0..e2c3f5d 100644
--- a/pages/index/index.wxss
+++ b/pages/index/index.wxss
@@ -1,47 +1,20 @@
-
-.slider1{
-  flex:1
-}
-.slidercontainer{
-  margin-top:5rpx;
+/* pages/index/index.wxss */
+.btnZoom{
+  position: relative;
   width:100%;
-  font-size:14px;
-  align-items:center;
-  display:flex;
+  height:300px;
 }
-.savebt{
-  height:30px;
-  font-size:14px
+button{
+  margin: 10px 20px 0px 20px;
 }
-.imageContainer{
+.container{
+  width:100%;
   height:300px;
-  width:300px;
-
 }
-.image{
-  position: absolute;
-  z-index:0;
-  height: 300px;
+.bgPic,.emptyBg{
+  height:300px;
   width:300px;
-  border: solid 2px red;
-}
-.rotateObj{ 
-  height: 100px;
-  width: 100px;
-  position: absolute;
-  border: dashed 2px yellow;
-}
-.contorler{
-  position: absolute;
-  z-index: 1;
-  width:20px;
-  height:20px;
-  border-radius:10px;
-  background:green;
-  /* top:90px;
-  left:130px; */
-  /* transform:translateX(-50%); */
 }
-.touching{
-  background:grey;
+.emptyBg{
+  border: 2px solid;
 }
\ No newline at end of file
diff --git a/project.config.json b/project.config.json
index d0ec08b..0d9a0d5 100644
--- a/project.config.json
+++ b/project.config.json
@@ -10,7 +10,7 @@
 	"compileType": "miniprogram",
 	"libVersion": "1.7.2",
 	"appid": "wxfee681a382d5f7dc",
-	"projectname": "chrishatLite",
+	"projectname": "chrisHat_Lite",
 	"condition": {
 		"search": {
 			"current": -1,