|
|
@@ -6,36 +6,40 @@ Page({
|
|
|
* 页面的初始数据
|
|
|
*/
|
|
|
data: {
|
|
|
- dataPositionObj:{ //正面数据
|
|
|
- top:'156rpx',
|
|
|
- left:'286rpx',
|
|
|
- width:'',
|
|
|
- height:''
|
|
|
+ dataPositionObj: { //正面数据
|
|
|
+ top: '156rpx',
|
|
|
+ left: '286rpx',
|
|
|
+ width: '',
|
|
|
+ height: ''
|
|
|
},
|
|
|
- propSize:{
|
|
|
- top:'8cm',
|
|
|
- right:'8cm',
|
|
|
+ propSize: {
|
|
|
+ top: '8cm',
|
|
|
+ right: '8cm',
|
|
|
bottom: '8cm',
|
|
|
- left:'8cm',
|
|
|
+ left: '8cm',
|
|
|
},
|
|
|
isActive: '1', // 默认是正面
|
|
|
- obverseImgObject:{
|
|
|
- '1': '/customized/images/customized/cup_black_big.png',/*正面 */
|
|
|
- '2': '/customized/images/customized/cup_black_side.png',/*侧面面 */
|
|
|
- '3': '/customized/images/customized/cup_black_handle.png',/*手柄 */
|
|
|
- '4': '/customized/images/customized/cup_black_bottom.png',/*底部 */
|
|
|
+ obverseImgObject: {
|
|
|
+ '1': '/customized/images/customized/cup_black_big.png',
|
|
|
+ /*正面 */
|
|
|
+ '2': '/customized/images/customized/cup_black_side.png',
|
|
|
+ /*侧面面 */
|
|
|
+ '3': '/customized/images/customized/cup_black_handle.png',
|
|
|
+ /*手柄 */
|
|
|
+ '4': '/customized/images/customized/cup_black_bottom.png',
|
|
|
+ /*底部 */
|
|
|
},
|
|
|
- fontColor: ['#000', '#fff', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0','#920784'],
|
|
|
+ fontColor: ['#000', '#fff', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0', '#920784'],
|
|
|
// obverseImg: '/images/customized/cup_black_big.png',/*正面 */
|
|
|
- imgTouch:{}, // 图片的对象,分为正面，侧面，手柄，底部
|
|
|
+ imgTouch: {}, // 图片的对象,分为正面，侧面，手柄，底部
|
|
|
fontTouch: {}, //文字的对象，分为正面，侧面，手柄，底部
|
|
|
- imgAnimationData:{}, // 图片的旋转
|
|
|
+ imgAnimationData: {}, // 图片的旋转
|
|
|
fontAnimationData: {}, // 文字的旋转
|
|
|
- touchStatic:true,
|
|
|
- fontContent:'可定制区域',
|
|
|
- rpx:1, // 获取页面的rpx
|
|
|
+ touchStatic: true,
|
|
|
+ fontContent: '可定制区域',
|
|
|
+ rpx: 1, // 获取页面的rpx
|
|
|
imgSrcArray: [],
|
|
|
- imgBuildArray:[], // 生成后图片的数组
|
|
|
+ imgBuildArray: [], // 生成后图片的数组
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
@@ -52,13 +56,13 @@ Page({
|
|
|
console.log(rpx, 'rpx')
|
|
|
},
|
|
|
})
|
|
|
- if('id' in options){
|
|
|
+ if ('id' in options) {
|
|
|
this.setData({
|
|
|
isActive: options.id
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
@@ -131,7 +135,7 @@ Page({
|
|
|
// ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx)
|
|
|
// ctx.draw()
|
|
|
// },
|
|
|
- changeCup(e){
|
|
|
+ changeCup(e) {
|
|
|
// data-id== 1正面，2背面，3手柄，4杯底
|
|
|
// this.changeCupImg(e.currentTarget.dataset.id);
|
|
|
let that = this;
|
|
|
@@ -142,9 +146,9 @@ Page({
|
|
|
propSize: cupNum.propSize
|
|
|
})
|
|
|
that.getDataTouch(that)
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
- addImgRouter(){
|
|
|
+ addImgRouter() {
|
|
|
console.log('添加图片');
|
|
|
wx.navigateTo({
|
|
|
url: '/customized/pages/made/madeImg/madeImg?id=' + this.data.isActive,
|
|
|
@@ -156,55 +160,57 @@ Page({
|
|
|
url: '/customized/pages/made/madeFont/madeFont?id=' + this.data.isActive,
|
|
|
})
|
|
|
},
|
|
|
- getDataTouch(that){
|
|
|
+ getDataTouch(that) {
|
|
|
let madeTouchImg = wx.getStorageSync('madeCupImgData' + that.data.isActive)
|
|
|
let madeTouchFont = wx.getStorageSync('madeCupFontData' + that.data.isActive)
|
|
|
- console.log(madeTouchImg, madeTouchFont,"madeTouchFontmadeTouchFont")
|
|
|
- if (madeTouchImg || madeTouchFont){
|
|
|
+ console.log(madeTouchImg, madeTouchFont, "madeTouchFontmadeTouchFont")
|
|
|
+ if (madeTouchImg || madeTouchFont) {
|
|
|
that.setData({
|
|
|
touchStatic: false
|
|
|
})
|
|
|
- if (madeTouchImg){
|
|
|
+ if (madeTouchImg) {
|
|
|
that.imgAnimation.rotate(madeTouchImg.angle).step();
|
|
|
that.setData({
|
|
|
imgAnimationData: that.imgAnimation.export(),
|
|
|
})
|
|
|
}
|
|
|
- if (madeTouchFont){
|
|
|
+ if (madeTouchFont) {
|
|
|
that.fontAnimation.rotate(madeTouchFont.angle).step();
|
|
|
that.setData({
|
|
|
fontAnimationData: that.fontAnimation.export(),
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-
|
|
|
- }else {
|
|
|
+
|
|
|
+ } else {
|
|
|
that.setData({
|
|
|
touchStatic: true
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
that.setData({
|
|
|
imgTouch: madeTouchImg ? madeTouchImg : {}, //存储图片数据
|
|
|
fontTouch: madeTouchFont ? madeTouchFont : {},
|
|
|
})
|
|
|
},
|
|
|
- finishDesign(){ // 完成设计
|
|
|
- let that = this;
|
|
|
+ finishDesign() { // 完成设计
|
|
|
+ let that = this;
|
|
|
let designObj = {
|
|
|
- '1':'正面',
|
|
|
- '2': '背面',
|
|
|
- '3': '手柄',
|
|
|
- '4': '杯底',
|
|
|
- },designVal = '',madeStatic = false;
|
|
|
- for(let i=1;i<5;i++){
|
|
|
- if (!wx.getStorageSync('madeCupImgData'+ i) && !wx.getStorageSync('madeCupFontData'+ i)){
|
|
|
- designVal += designObj[i]+','
|
|
|
+ '1': '正面',
|
|
|
+ '2': '背面',
|
|
|
+ '3': '手柄',
|
|
|
+ '4': '杯底',
|
|
|
+ },
|
|
|
+ designVal = '',
|
|
|
+ madeStatic = false;
|
|
|
+ for (let i = 1; i < 5; i++) {
|
|
|
+ if (!wx.getStorageSync('madeCupImgData' + i) && !wx.getStorageSync('madeCupFontData' + i)) {
|
|
|
+ designVal += designObj[i] + ','
|
|
|
} else {
|
|
|
madeStatic = true; // 表示已经有设计过的页面
|
|
|
}
|
|
|
}
|
|
|
- if (madeStatic){
|
|
|
+ if (madeStatic) {
|
|
|
if (!designVal) {
|
|
|
console.log('可以完成')
|
|
|
wx.navigateTo({
|
|
|
@@ -217,14 +223,14 @@ Page({
|
|
|
success: function (res) {
|
|
|
if (res.confirm) {
|
|
|
console.log('用户点击确定,不设计了，直接完成')
|
|
|
- wx.showToast({
|
|
|
- title: '图片合成中...',
|
|
|
- icon:'loading'
|
|
|
- })
|
|
|
- that.getBuildImg(that)
|
|
|
- // wx.navigateTo({
|
|
|
- // url: '/customized/pages/made/combination/combination',
|
|
|
+ // wx.showToast({
|
|
|
+ // title: '图片合成中...',
|
|
|
+ // icon: 'loading'
|
|
|
// })
|
|
|
+ // that.getBuildImg(that)
|
|
|
+ wx.navigateTo({
|
|
|
+ url: '/customized/pages/made/combination/combination',
|
|
|
+ })
|
|
|
} else {
|
|
|
console.log('用户点击取消')
|
|
|
}
|
|
|
@@ -238,135 +244,141 @@ Page({
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
- getBuildImg(that){
|
|
|
- for(let i =1; i<=4;i++){
|
|
|
- if (wx.getStorageSync('madeCupImgData'+i)) {
|
|
|
- this.setData({
|
|
|
- imgTouch: wx.getStorageSync('madeCupImgData'+i)
|
|
|
- })
|
|
|
- }
|
|
|
- if (wx.getStorageSync('madeCupFontData'+i)) {
|
|
|
- this.setData({
|
|
|
- fontTouch: wx.getStorageSync('madeCupFontData'+i)
|
|
|
- })
|
|
|
- }
|
|
|
- that.getCombImg(that);
|
|
|
- console.log(i)
|
|
|
- }
|
|
|
- console.log(that.data.imgBuildArray,"that.data.imgBuildArray")
|
|
|
-
|
|
|
- },
|
|
|
+ // getBuildImg(that) {
|
|
|
+ // for (let i = 1; i <= 1; i++) {
|
|
|
+ // if (wx.getStorageSync('madeCupImgData' + i) || wx.getStorageSync('madeCupFontData' + i)) {
|
|
|
+ // if (wx.getStorageSync('madeCupImgData' + i)) {
|
|
|
+ // this.setData({
|
|
|
+ // imgTouch: wx.getStorageSync('madeCupImgData' + i)
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // if (wx.getStorageSync('madeCupFontData' + i)) {
|
|
|
+ // this.setData({
|
|
|
+ // fontTouch: wx.getStorageSync('madeCupFontData' + i)
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // that.getCombImg(that);
|
|
|
+ // }
|
|
|
+ // console.log(i)
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ // },
|
|
|
// 合成canvas的js
|
|
|
- getCombImg(that) {
|
|
|
- let imgTouch = that.data.imgTouch;
|
|
|
- let dataPositionObj = that.data.dataPositionObj;
|
|
|
- wx.getSystemInfo({
|
|
|
- success: function (res) {
|
|
|
- let rpx = res.windowWidth / 750;
|
|
|
- that.setData({
|
|
|
- rpx: rpx
|
|
|
- });
|
|
|
- wx.downloadFile({
|
|
|
- url: imgTouch.src, // 仅为示例，并非真实的资源
|
|
|
- success(res) {
|
|
|
- // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
|
|
|
- console.log(res)
|
|
|
- if (res.statusCode === 200) {
|
|
|
- // canvas截图区域与图片的宽度比例
|
|
|
- let dWidth = dataPositionObj.width / imgTouch.width;
|
|
|
- // canvas截图区域与图片的高度比例
|
|
|
- let dHeight = dataPositionObj.height / imgTouch.height;
|
|
|
- const ctx = wx.createCanvasContext('comb-img');
|
|
|
- //画布中点坐标转移到图片中心
|
|
|
- let movex = imgTouch.x + imgTouch.width * rpx / 2;
|
|
|
- let movey = imgTouch.y + imgTouch.height * rpx / 2;
|
|
|
- ctx.translate(movex, movey);
|
|
|
- ctx.rotate(imgTouch.angle * Math.PI / 180);
|
|
|
- ctx.drawImage(res.tempFilePath, -imgTouch.width * rpx / 2, -imgTouch.height * rpx / 2, imgTouch.width * rpx, imgTouch.height * rpx)
|
|
|
- ctx.draw(true, function () {
|
|
|
- wx.canvasToTempFilePath({
|
|
|
- canvasId: 'comb-img',
|
|
|
- success: function (res) {
|
|
|
- console.log(res)
|
|
|
- let imgArray = that.data.imgSrcArray;
|
|
|
- imgArray.push(res.tempFilePath)
|
|
|
- that.setData({
|
|
|
- imgSrcArray: imgArray
|
|
|
- })
|
|
|
- that.getCombFont(that);
|
|
|
- }
|
|
|
- }, that)
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
+ // getCombImg(that) {
|
|
|
+ // let imgTouch = that.data.imgTouch;
|
|
|
+ // let dataPositionObj = that.data.dataPositionObj;
|
|
|
+ // wx.getSystemInfo({
|
|
|
+ // success: function (res) {
|
|
|
+ // let rpx = res.windowWidth / 750;
|
|
|
+ // that.setData({
|
|
|
+ // rpx: rpx
|
|
|
+ // });
|
|
|
+ // wx.downloadFile({
|
|
|
+ // url: imgTouch.src, // 仅为示例，并非真实的资源
|
|
|
+ // success(res) {
|
|
|
+ // // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
|
|
|
+ // console.log(res)
|
|
|
+ // if (res.statusCode === 200) {
|
|
|
+ // // canvas截图区域与图片的宽度比例
|
|
|
+ // let dWidth = dataPositionObj.width / imgTouch.width;
|
|
|
+ // // canvas截图区域与图片的高度比例
|
|
|
+ // let dHeight = dataPositionObj.height / imgTouch.height;
|
|
|
+ // const ctx = wx.createCanvasContext('comb-img');
|
|
|
+ // //画布中点坐标转移到图片中心
|
|
|
+ // let movex = imgTouch.x + imgTouch.width * rpx / 2;
|
|
|
+ // let movey = imgTouch.y + imgTouch.height * rpx / 2;
|
|
|
+ // ctx.translate(movex, movey);
|
|
|
+ // ctx.rotate(imgTouch.angle * Math.PI / 180);
|
|
|
+ // ctx.drawImage(res.tempFilePath, -imgTouch.width * rpx / 2, -imgTouch.height * rpx / 2, imgTouch.width * rpx, imgTouch.height * rpx)
|
|
|
+ // ctx.draw(true, function () {
|
|
|
+ // wx.canvasToTempFilePath({
|
|
|
+ // canvasId: 'comb-img',
|
|
|
+ // success: function (res) {
|
|
|
+ // console.log(res)
|
|
|
+ // let imgArray = that.data.imgSrcArray;
|
|
|
+ // imgArray.push(res.tempFilePath)
|
|
|
+ // that.setData({
|
|
|
+ // imgSrcArray: imgArray
|
|
|
+ // })
|
|
|
+ // that.getCombFont(that);
|
|
|
+ // }
|
|
|
+ // }, that)
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // })
|
|
|
|
|
|
- },
|
|
|
- })
|
|
|
- },
|
|
|
- getCombFont(that) {
|
|
|
- let fontTouch = that.data.fontTouch;
|
|
|
- let dataPositionObj = that.data.dataPositionObj;
|
|
|
- const ctx = wx.createCanvasContext('comb-font');
|
|
|
+ // },
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ // getCombFont(that) {
|
|
|
+ // let fontTouch = that.data.fontTouch;
|
|
|
+ // let dataPositionObj = that.data.dataPositionObj;
|
|
|
+ // const ctx = wx.createCanvasContext('comb-font');
|
|
|
|
|
|
- let movex = fontTouch.x + fontTouch.width / 2;
|
|
|
- let movey = fontTouch.y + fontTouch.height / 2;
|
|
|
- // ctx.translate(movex, movey);
|
|
|
- // ctx.rotate(fontTouch.angle * Math.PI / 180);
|
|
|
+ // let movex = fontTouch.x + fontTouch.width / 2;
|
|
|
+ // let movey = fontTouch.y + fontTouch.height / 2;
|
|
|
+ // // ctx.translate(movex, movey);
|
|
|
+ // // ctx.rotate(fontTouch.angle * Math.PI / 180);
|
|
|
|
|
|
- ctx.setFontSize(fontTouch.fontSize);
|
|
|
- ctx.setFillStyle(fontTouch.isColor);
|
|
|
- ctx.fillText(fontTouch.fontContent, fontTouch.x, fontTouch.y + fontTouch.height / 5 * 4);
|
|
|
- // ctx.fillText(fontTouch.fontContent, -fontTouch.width / 2, fontTouch.height / 10 * 3);
|
|
|
- ctx.draw(true, function () {
|
|
|
- wx.canvasToTempFilePath({
|
|
|
- canvasId: 'comb-font',
|
|
|
- success: function (res) {
|
|
|
- console.log(res)
|
|
|
- let imgArray = that.data.imgSrcArray;
|
|
|
- imgArray.push(res.tempFilePath)
|
|
|
- that.setData({
|
|
|
- imgSrcArray: imgArray
|
|
|
- })
|
|
|
- console.log(that.data.imgSrcArray, "that.data.imgSrcArray")
|
|
|
- that.getComb(that, that.data.imgSrcArray)
|
|
|
- }
|
|
|
- }, that)
|
|
|
- })
|
|
|
- },
|
|
|
- getComb(that, imgSrcArray) {
|
|
|
- let imgTouch = that.data.imgTouch;
|
|
|
- let dataPositionObj = that.data.dataPositionObj;
|
|
|
- wx.getSystemInfo({
|
|
|
- success: function (res) {
|
|
|
- let rpx = res.windowWidth / 750;
|
|
|
- that.setData({
|
|
|
- rpx: rpx
|
|
|
- });
|
|
|
- let canvasBg = that.data.obverseImgObject[1];
|
|
|
- const ctx = wx.createCanvasContext('comb-canvas');
|
|
|
- ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx);
|
|
|
- ctx.draw(true);
|
|
|
- // 设置背景
|
|
|
- imgSrcArray.forEach((res) => {
|
|
|
- ctx.drawImage(res, dataPositionObj.left * rpx, dataPositionObj.top * rpx, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
|
|
|
- })
|
|
|
- ctx.draw(true,function(){
|
|
|
- wx.canvasToTempFilePath({
|
|
|
- canvasId: 'comb-canvas',
|
|
|
- success: function (res) {
|
|
|
- console.log(res,"最后的合成")
|
|
|
- let imgBuildArray = that.data.imgBuildArray;
|
|
|
- imgBuildArray.push(res.tempFilePath)
|
|
|
- that.setData({
|
|
|
- imgSrcArray: [],// 重置
|
|
|
- imgBuildArray: imgBuildArray
|
|
|
- })
|
|
|
- }
|
|
|
- }, that)
|
|
|
- });
|
|
|
-
|
|
|
- },
|
|
|
- })
|
|
|
- }
|
|
|
+ // ctx.setFontSize(fontTouch.fontSize);
|
|
|
+ // ctx.setFillStyle(fontTouch.isColor);
|
|
|
+ // ctx.fillText(fontTouch.fontContent, fontTouch.x, fontTouch.y + fontTouch.height / 5 * 4);
|
|
|
+ // // ctx.fillText(fontTouch.fontContent, -fontTouch.width / 2, fontTouch.height / 10 * 3);
|
|
|
+ // ctx.draw(true, function () {
|
|
|
+ // wx.canvasToTempFilePath({
|
|
|
+ // canvasId: 'comb-font',
|
|
|
+ // success: function (res) {
|
|
|
+ // console.log(res)
|
|
|
+ // let imgArray = that.data.imgSrcArray;
|
|
|
+ // imgArray.push(res.tempFilePath)
|
|
|
+ // that.setData({
|
|
|
+ // imgSrcArray: imgArray
|
|
|
+ // })
|
|
|
+ // console.log(that.data.imgSrcArray, "that.data.imgSrcArray")
|
|
|
+ // that.getComb(that, that.data.imgSrcArray)
|
|
|
+ // }
|
|
|
+ // }, that)
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ // getComb(that, imgSrcArray) {
|
|
|
+ // console.log('开始最后的合成')
|
|
|
+ // let imgTouch = that.data.imgTouch;
|
|
|
+ // let dataPositionObj = that.data.dataPositionObj;
|
|
|
+ // wx.getSystemInfo({
|
|
|
+ // success: function (res) {
|
|
|
+ // let rpx = res.windowWidth / 750;
|
|
|
+ // that.setData({
|
|
|
+ // rpx: rpx
|
|
|
+ // });
|
|
|
+ // let canvasBg = that.data.obverseImgObject[1];
|
|
|
+ // const ctx = wx.createCanvasContext('comb-canvas');
|
|
|
+ // ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx);
|
|
|
+ // ctx.draw(true);
|
|
|
+ // // 设置背景
|
|
|
+ // imgSrcArray.forEach((res) => {
|
|
|
+ // ctx.drawImage(res, dataPositionObj.left * rpx, dataPositionObj.top * rpx, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
|
|
|
+ // })
|
|
|
+ // console.log('渲染完成');
|
|
|
+ // ctx.draw(true);
|
|
|
+ // // ctx.draw(true, function () {
|
|
|
+ // // wx.canvasToTempFilePath({
|
|
|
+ // // canvasId: 'comb-canvas',
|
|
|
+ // // success: function (res) {
|
|
|
+ // // console.log(res, "最后的合成")
|
|
|
+ // // let imgBuildArray = that.data.imgBuildArray;
|
|
|
+ // // imgBuildArray.push(res.tempFilePath)
|
|
|
+ // // that.setData({
|
|
|
+ // // imgSrcArray: [], // 重置
|
|
|
+ // // imgBuildArray: imgBuildArray
|
|
|
+ // // })
|
|
|
+ // // console.log(that.data.imgBuildArray, "that.data.imgBuildArray")
|
|
|
+ // // }
|
|
|
+ // // }, that)
|
|
|
+ // // })
|
|
|
+
|
|
|
+ // },
|
|
|
+ // })
|
|
|
+ // }
|
|
|
})
|
