|
|
@@ -0,0 +1,288 @@
|
|
|
+// customized/pages/made/combination/combination.js
|
|
|
+import * as util from '../../../../utils/util.js'
|
|
|
+Page({
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页面的初始数据
|
|
|
+ */
|
|
|
+ data: {
|
|
|
+ dataPositionObj: { //正面数据
|
|
|
+ top: 156,
|
|
|
+ left: 286,
|
|
|
+ width: 270,
|
|
|
+ height: 270
|
|
|
+ },
|
|
|
+ imgTouch: {
|
|
|
+ isActive: "1",
|
|
|
+ src: "https://dlz.info666.com//temp/d945bfb0-5cc6-406d-a814-cf63b099041f.jpg",
|
|
|
+ x: -82,
|
|
|
+ y: 17,
|
|
|
+ clientX: 195,
|
|
|
+ clientY: 121,
|
|
|
+ width: 517,
|
|
|
+ height: 208.17866666666666,
|
|
|
+ scale: 2.4834437086092715,
|
|
|
+ angle: 27
|
|
|
+ },
|
|
|
+ fontTouch: {
|
|
|
+ isActive: "1",
|
|
|
+ fontContent: "Gg",
|
|
|
+ isColor: "#ffffff",
|
|
|
+ x: 10,
|
|
|
+ y: 10,
|
|
|
+ angle: 0,
|
|
|
+ fontSize: 100,
|
|
|
+ clientX: 0,
|
|
|
+ clientY: 0,
|
|
|
+ width: 138.34375,
|
|
|
+ height: 132
|
|
|
+ },
|
|
|
+ rpx: 1,
|
|
|
+ obverseImgObject:['', '/customized/images/customized/cup_black_big.png', '/customized/images/customized/cup_black_side.png', '/customized/images/customized/cup_black_handle.png', '/customized/images/customized/cup_black_bottom.png'],
|
|
|
+ // obverseImgObject: {
|
|
|
+ // '1': ,
|
|
|
+ // /*正面 */
|
|
|
+ // '2': '/customized/images/customized/cup_black_side.png',
|
|
|
+ // /*侧面面 */
|
|
|
+ // '3': '/customized/images/customized/cup_black_handle.png',
|
|
|
+ // /*手柄 */
|
|
|
+ // '4': '/customized/images/customized/cup_black_bottom.png',
|
|
|
+ // /*底部 */
|
|
|
+ // },
|
|
|
+ imgSrcArray: [],
|
|
|
+ buildSrcArray: [],
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面加载
|
|
|
+ */
|
|
|
+ onLoad: function (options) {
|
|
|
+
|
|
|
+ // if (wx.getStorageSync('madeCupImgData1')) {
|
|
|
+ // this.setData({
|
|
|
+ // imgTouch: wx.getStorageSync('madeCupImgData1')
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // if (wx.getStorageSync('madeCupFontData1')) {
|
|
|
+ // this.setData({
|
|
|
+ // fontTouch: wx.getStorageSync('madeCupFontData1')
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面初次渲染完成
|
|
|
+ */
|
|
|
+ onReady: function () {
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面显示
|
|
|
+ */
|
|
|
+ onShow: function () {
|
|
|
+ // this.getCombImg(this);
|
|
|
+ wx.showLoading({
|
|
|
+ title: '图片合成中...'
|
|
|
+ })
|
|
|
+ let that = this;
|
|
|
+ // for (let i = 1; i <= 4; i++) {
|
|
|
+ // if (wx.getStorageSync('madeCupImgData' + i) || wx.getStorageSync('madeCupFontData' + i)) {
|
|
|
+ // console.log(i, "iiiii")
|
|
|
+ // that.getCombImg(that, i);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ if (wx.getStorageSync('madeCupImgData1') || wx.getStorageSync('madeCupFontData1')) {
|
|
|
+ that.getCombImg(that, 1);
|
|
|
+ } else if(wx.getStorageSync('madeCupImgData2') || wx.getStorageSync('madeCupFontData2')) {
|
|
|
+ that.getCombImg(that, 2);
|
|
|
+ } else if (wx.getStorageSync('madeCupImgData3') || wx.getStorageSync('madeCupFontData3')) {
|
|
|
+ that.getCombImg(that, 3);
|
|
|
+ } else if (wx.getStorageSync('madeCupImgData4') || wx.getStorageSync('madeCupFontData4')) {
|
|
|
+ that.getCombImg(that, 4);
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面隐藏
|
|
|
+ */
|
|
|
+ onHide: function () {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面卸载
|
|
|
+ */
|
|
|
+ onUnload: function () {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页面相关事件处理函数--监听用户下拉动作
|
|
|
+ */
|
|
|
+ onPullDownRefresh: function () {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页面上拉触底事件的处理函数
|
|
|
+ */
|
|
|
+ onReachBottom: function () {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 用户点击右上角分享
|
|
|
+ */
|
|
|
+ onShareAppMessage: function () {
|
|
|
+
|
|
|
+ },
|
|
|
+ getCombImg(that,i) {
|
|
|
+ let imgTouch = null, dataPositionObj=null;
|
|
|
+ console.log(wx.getStorageSync('madeCupImgData' + i),"wx.getStorageSync('madeCupImgData' + i)")
|
|
|
+ if(wx.getStorageSync('madeCupImgData' + i)){
|
|
|
+ imgTouch = wx.getStorageSync('madeCupImgData'+i);
|
|
|
+ dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
|
|
|
+ console.log(dataPositionObj,"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'+i);
|
|
|
+ //画布中点坐标转移到图片中心
|
|
|
+ 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(false,function () {
|
|
|
+ wx.canvasToTempFilePath({
|
|
|
+ canvasId: 'comb-img'+i,
|
|
|
+ success: function (res) {
|
|
|
+ console.log(res)
|
|
|
+ let imgArray = that.data.imgSrcArray;
|
|
|
+ imgArray.push(res.tempFilePath)
|
|
|
+ that.setData({
|
|
|
+ imgSrcArray: imgArray
|
|
|
+ })
|
|
|
+ that.getCombFont(that,i,true);
|
|
|
+ }
|
|
|
+ }, that)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ that.getCombFont(that,i,false);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ getCombFont(that,i,_static) {
|
|
|
+ let fontTouch = null,dataPositionObj = null;
|
|
|
+ if (wx.getStorageSync('madeCupFontData' + i)) {
|
|
|
+ fontTouch = wx.getStorageSync('madeCupFontData' + i);
|
|
|
+ dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
|
|
|
+ const ctx = wx.createCanvasContext('comb-font'+i);
|
|
|
+ ctx.setFontSize(fontTouch.fontSize);
|
|
|
+ ctx.setFillStyle(fontTouch.isColor);
|
|
|
+ // ctx.translate(0, fontTouch.height / 5 * 4);
|
|
|
+ // ctx.save();
|
|
|
+ let movex = fontTouch.x + fontTouch.width / 2;
|
|
|
+ let movey = fontTouch.y + fontTouch.height / 10 * 3;
|
|
|
+ ctx.translate(movex, movey);
|
|
|
+ ctx.rotate(fontTouch.angle * Math.PI / 180);
|
|
|
+ // ctx.translate(movex, movey);
|
|
|
+ // ctx.rotate(fontTouch.angle * Math.PI / 180);
|
|
|
+ ctx.fillText(fontTouch.fontContent, -fontTouch.width / 2, fontTouch.height / 2);
|
|
|
+ // ctx.fillText(fontTouch.fontContent, fontTouch.x, fontTouch.y + fontTouch.height / 5 * 4);
|
|
|
+
|
|
|
+ ctx.draw(false,function () {
|
|
|
+ wx.canvasToTempFilePath({
|
|
|
+ canvasId: 'comb-font'+i,
|
|
|
+ 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,i,true)
|
|
|
+ }
|
|
|
+ }, that)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ that.getComb(that, that.data.imgSrcArray, i, _static)
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ getComb(that, imgSrcArray,i,_static) {
|
|
|
+ if(_static){
|
|
|
+ let imgTouch = wx.getStorageSync('madeCupImgData' + i);
|
|
|
+ let dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
|
|
|
+ let canvasBg = that.data.obverseImgObject[i];
|
|
|
+ console.log(canvasBg)
|
|
|
+ wx.getSystemInfo({
|
|
|
+ success: function (res) {
|
|
|
+ let rpx = res.windowWidth / 750;
|
|
|
+ that.setData({
|
|
|
+ rpx: rpx
|
|
|
+ });
|
|
|
+ const ctx = wx.createCanvasContext('comb-canvas' + i);
|
|
|
+ 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);
|
|
|
+ })
|
|
|
+ wx.hideLoading()
|
|
|
+ ctx.draw(true, function () {
|
|
|
+ wx.canvasToTempFilePath({
|
|
|
+ canvasId: 'comb-canvas' + i,
|
|
|
+ success: function (res) {
|
|
|
+ console.log(res, "合成成功");
|
|
|
+ let buildSrcArray = that.data.buildSrcArray;
|
|
|
+ buildSrcArray.push(res.tempFilePath);
|
|
|
+ console.log(buildSrcArray, "buildSrcArray")
|
|
|
+ that.setData({
|
|
|
+ buildSrcArray: buildSrcArray
|
|
|
+ })
|
|
|
+ console.log(that.data.buildSrcArray, "buildSrcArray")
|
|
|
+ if (i < 4) {
|
|
|
+ i = i + 1
|
|
|
+ that.getCombImg(that, i);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: function (err) {
|
|
|
+ console.log(err, "合成失败")
|
|
|
+ wx.hideLoading();
|
|
|
+ }
|
|
|
+ }, that)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+})
|
