From f4d04168a62627c9f3e734f9f429ae3d1adb8d48 Mon Sep 17 00:00:00 2001
From: Amypher <1648511816@qq.com>
Date: Thu, 4 Jan 2018 18:39:01 +0800
Subject: [PATCH] split 'editor' to 'editor' and 'combine','next'button
intelligentized disable
---
app.js | 7 +-
app.json | 3 +-
pages/combine/combine.js | 71 +++++++++++++++++
pages/combine/combine.json | 1 +
pages/combine/combine.wxml | 4 +
pages/combine/combine.wxss | 1 +
pages/imageeditor/imageeditor.js | 76 +++++--------------
pages/imageeditor/imageeditor.wxml | 5 +-
pages/index/index.js | 117 ++++++++++-------------------
pages/index/index.wxml | 2 +-
10 files changed, 144 insertions(+), 143 deletions(-)
create mode 100644 pages/combine/combine.js
create mode 100644 pages/combine/combine.json
create mode 100644 pages/combine/combine.wxml
create mode 100644 pages/combine/combine.wxss
diff --git a/app.js b/app.js
index 790e9dc..fcca406 100644
--- a/app.js
+++ b/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
}
})
\ No newline at end of file
diff --git a/app.json b/app.json
index 708c409..b3c2280 100644
--- a/app.json
+++ b/app.json
@@ -1,7 +1,8 @@
{
"pages": [
"pages/index/index",
- "pages/imageeditor/imageeditor"
+ "pages/imageeditor/imageeditor",
+ "pages/combine/combine"
],
"window": {
"backgroundTextStyle": "light",
diff --git a/pages/combine/combine.js b/pages/combine/combine.js
new file mode 100644
index 0000000..2bd7ec0
--- /dev/null
+++ b/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);
+ }
+ })
+ }
+ });
+ }
+})
\ No newline at end of file
diff --git a/pages/combine/combine.json b/pages/combine/combine.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/pages/combine/combine.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/pages/combine/combine.wxml b/pages/combine/combine.wxml
new file mode 100644
index 0000000..e1d08b3
--- /dev/null
+++ b/pages/combine/combine.wxml
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/pages/combine/combine.wxss b/pages/combine/combine.wxss
new file mode 100644
index 0000000..922147f
--- /dev/null
+++ b/pages/combine/combine.wxss
@@ -0,0 +1 @@
+/* pages/combine/combine.wxss */
\ No newline at end of file
diff --git a/pages/imageeditor/imageeditor.js b/pages/imageeditor/imageeditor.js
index 7270309..81d2234 100644
--- a/pages/imageeditor/imageeditor.js
+++ b/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',
+ })
}
})
\ No newline at end of file
diff --git a/pages/imageeditor/imageeditor.wxml b/pages/imageeditor/imageeditor.wxml
index c6ac013..88d0e17 100644
--- a/pages/imageeditor/imageeditor.wxml
+++ b/pages/imageeditor/imageeditor.wxml
@@ -25,9 +25,6 @@
bind:tap="chooseImg">
-
-
-
-
+
diff --git a/pages/index/index.js b/pages/index/index.js
index 27b31de..24faab7 100644
--- a/pages/index/index.js
+++ b/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
- }
}
})
\ No newline at end of file
diff --git a/pages/index/index.wxml b/pages/index/index.wxml
index 0a3eda9..d186d1f 100644
--- a/pages/index/index.wxml
+++ b/pages/index/index.wxml
@@ -8,5 +8,5 @@
-
+
\ No newline at end of file