// pages/customized/made/made.js import * as util from '../../../utils/util.js' Page({ /** * 页面的初始数据 */ data: { dataPositionObj:{ //正面数据 top:'156rpx', left:'286rpx', width:'', height:'' }, propSize:{ top:'8cm', right:'8cm', bottom: '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',/*底部 */ }, fontColor: ['#000', '#fff', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0','#920784'], // obverseImg: '/images/customized/cup_black_big.png',/*正面 */ imgTouch:{}, // 图片的对象,分为正面,侧面,手柄,底部 fontTouch: {}, //文字的对象,分为正面,侧面,手柄,底部 imgAnimationData:{}, // 图片的旋转 fontAnimationData: {}, // 文字的旋转 touchStatic:true, fontContent:'可定制区域', rpx:1, // 获取页面的rpx imgSrcArray: [], imgBuildArray:[], // 生成后图片的数组 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let that = this; wx.getSystemInfo({ success: function (res) { let rpx = res.windowWidth / 750; that.setData({ rpx: rpx }); console.log(rpx, 'rpx') }, }) if('id' in options){ this.setData({ isActive: options.id }) } }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { let that = this; // console.log('页面开始准备中' that.imgAnimation = wx.createAnimation({ timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end" }) that.fontAnimation = wx.createAnimation({ timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end" }) }, /** * 生命周期函数--监听页面显示 */ onShow: function () { console.log('onshow') let that = this; let cupNum = util.changeCup(that.data.isActive); that.setData({ dataPositionObj: cupNum.dataPositionObj, propSize: cupNum.propSize }) that.getDataTouch(that) }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, // changeCupImg(index){ // console.log(this.data.imgTouch,"this.data.imgTouch") // let rpx = this.data.rpx; // let canvasBg = this.data.obverseImgObject[index]; // const ctx = wx.createCanvasContext('madeContent'); // ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx) // ctx.draw() // }, changeCup(e){ // data-id== 1正面,2背面,3手柄,4杯底 // this.changeCupImg(e.currentTarget.dataset.id); let that = this; let cupNum = util.changeCup(e.currentTarget.dataset.id) that.setData({ isActive: e.currentTarget.dataset.id, dataPositionObj: cupNum.dataPositionObj, propSize: cupNum.propSize }) that.getDataTouch(that) }, addImgRouter(){ console.log('添加图片'); wx.navigateTo({ url: '/customized/pages/made/madeImg/madeImg?id=' + this.data.isActive, }) }, addFontRouter() { console.log('添加文字'); wx.navigateTo({ url: '/customized/pages/made/madeFont/madeFont?id=' + this.data.isActive, }) }, 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){ that.setData({ touchStatic: false }) if (madeTouchImg){ that.imgAnimation.rotate(madeTouchImg.angle).step(); that.setData({ imgAnimationData: that.imgAnimation.export(), }) } if (madeTouchFont){ that.fontAnimation.rotate(madeTouchFont.angle).step(); that.setData({ fontAnimationData: that.fontAnimation.export(), }) } }else { that.setData({ touchStatic: true }) } that.setData({ imgTouch: madeTouchImg ? madeTouchImg : {}, //存储图片数据 fontTouch: madeTouchFont ? madeTouchFont : {}, }) }, 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]+',' } else { madeStatic = true; // 表示已经有设计过的页面 } } if (madeStatic){ if (!designVal) { console.log('可以完成') wx.navigateTo({ url: '/customized/pages/made/combination/combination', }) } else { wx.showModal({ title: '温馨提示', content: '您的' + designVal.substring(0, designVal.length - 1) + '还没有设计,是否确定不设计了?', success: function (res) { if (res.confirm) { console.log('用户点击确定,不设计了,直接完成') wx.showToast({ title: '图片合成中...', icon:'loading' }) that.getBuildImg(that) // wx.navigateTo({ // url: '/customized/pages/made/combination/combination', // }) } else { console.log('用户点击取消') } } }) } } else { wx.showToast({ title: '您还没有设计', icon: 'none' }) } }, 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") }, // 合成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) }) } } }) }, }) }, 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); 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) }); }, }) } })