123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244 |
- // customized/pages/made/combination/combination.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: {
- '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',
- /*底部 */
- },
- imgSrcArray: [],
- buildSrc: '',
- },
- /**
- * 生命周期函数--监听页面加载
- */
- 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);
- },
- /**
- * 生命周期函数--监听页面隐藏
- */
- onHide: function () {
- },
- /**
- * 生命周期函数--监听页面卸载
- */
- onUnload: function () {
- },
- /**
- * 页面相关事件处理函数--监听用户下拉动作
- */
- onPullDownRefresh: function () {
- },
- /**
- * 页面上拉触底事件的处理函数
- */
- onReachBottom: function () {
- },
- /**
- * 用户点击右上角分享
- */
- onShareAppMessage: function () {
- },
- 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');
- ctx.setFontSize(fontTouch.fontSize);
- ctx.setFillStyle(fontTouch.isColor);
- // ctx.translate(0, 0);
- // 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(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, "合成成功")
- that.setData({
- buildSrc: res.tempFilePath
- })
- // 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)
- },
- fail: function (err) {
- console.log(err, "合成失败")
- }
- }, that)
- })
- },
- })
- }
- })
|