first commit

app.js

@@ -0,0 +1,39 @@
+//app.js
+App({
+  onLaunch: function () {
+    // 展示本地存储能力
+    var logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+
+    // 登录
+    wx.login({
+      success: res => {
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      }
+    })
+    // 获取用户信息
+    wx.getSetting({
+      success: res => {
+        if (res.authSetting['scope.userInfo']) {
+          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
+          wx.getUserInfo({
+            success: res => {
+              // 可以将 res 发送给后台解码出 unionId
+              this.globalData.userInfo = res.userInfo
+
+              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
+              // 所以此处加入 callback 以防止这种情况
+              if (this.userInfoReadyCallback) {
+                this.userInfoReadyCallback(res)
+              }
+            }
+          })
+        }
+      }
+    })
+  },
+  globalData: {
+    userInfo: null
+  }
+})

app.json

@@ -0,0 +1,12 @@
+{
+  "pages":[
+    "pages/imageeditor/index",
+    "pages/logs/logs"
+  ],
+  "window":{
+    "backgroundTextStyle":"light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "我要圣诞帽",
+    "navigationBarTextStyle":"black"
+  }
+}

app.wxss

@@ -0,0 +1,9 @@
+/**app.wxss**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+} 

pages/imageeditor/index.js

@@ -0,0 +1,179 @@
+//index.js
+//获取应用实例
+const app = getApp()
+
+Page({
+  data: {
+    userInfo: {},
+    imageResource:"",
+    combine:false,
+    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: 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
+          })
+        }
+      })
+    }
+  },
+  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
+        });
+        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;
+        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;
+  },
+  combinePic(e){
+    this.setData({
+      combine:true
+    });
+    wx.getImageInfo({
+      src: this.data.userInfo.avatarUrl,
+      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
+    })
+  }
+})

pages/imageeditor/index.wxml

@@ -0,0 +1,33 @@
+
+<!--index.wxml-->
+<view  wx:if="{{!combine}}">
+    <view class="container" 
+          id="container"
+          bind:touchstart="touchStart" 
+          bind:touchend="touchEnd"
+          bind:touchmove="touchMove">
+    <image class="bg" src="{{userInfo.avatarUrl}}" bind:tap="getSize"></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>
+<view wx:if="{{combine}}">
+  <canvas  class="myCanvas" canvas-id="myCanvas" style="height:300px;;width:100%;"/>
+  <button bind:tap="savePic">保存至相册</button>
+</view>
+
+

pages/imageeditor/index.wxss

@@ -0,0 +1,39 @@
+.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;
+}