made.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386
  1. // pages/customized/made/made.js
  2. import * as util from '../../../utils/util.js'
  3. Page({
  4. /**
  5. * 页面的初始数据
  6. */
  7. data: {
  8. dataPositionObj: { //正面数据
  9. top: 156,
  10. left: 286,
  11. width: 270,
  12. height: 270,
  13. },
  14. propSize: {
  15. top: '8cm',
  16. right: '8cm',
  17. bottom: '8cm',
  18. left: '8cm',
  19. },
  20. isActive: '1', // 默认是正面
  21. obverseImgObject: {
  22. '1': '/customized/images/customized/cup_black_big.png',
  23. /*正面 */
  24. '2': '/customized/images/customized/cup_black_side.png',
  25. /*侧面面 */
  26. '3': '/customized/images/customized/cup_black_handle.png',
  27. /*手柄 */
  28. '4': '/customized/images/customized/cup_black_bottom.png',
  29. /*底部 */
  30. },
  31. fontColor: ['#000', '#fff', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0', '#920784'],
  32. // obverseImg: '/images/customized/cup_black_big.png',/*正面 */
  33. imgTouch: {}, // 图片的对象,分为正面,侧面,手柄,底部
  34. fontTouch: {}, //文字的对象,分为正面,侧面,手柄,底部
  35. imgAnimationData: {}, // 图片的旋转
  36. fontAnimationData: {}, // 文字的旋转
  37. touchStatic: true,
  38. fontContent: '可定制区域',
  39. rpx: 1, // 获取页面的rpx
  40. imgSrcArray: [],
  41. imgBuildArray: [], // 生成后图片的数组
  42. },
  43. /**
  44. * 生命周期函数--监听页面加载
  45. */
  46. onLoad: function (options) {
  47. let that = this;
  48. wx.getSystemInfo({
  49. success: function (res) {
  50. let rpx = res.windowWidth / 750;
  51. that.setData({
  52. rpx: rpx
  53. });
  54. console.log(rpx, 'rpx')
  55. },
  56. })
  57. if ('id' in options) {
  58. this.setData({
  59. isActive: options.id
  60. })
  61. }
  62. },
  63. /**
  64. * 生命周期函数--监听页面初次渲染完成
  65. */
  66. onReady: function () {
  67. let that = this;
  68. // console.log('页面开始准备中'
  69. that.imgAnimation = wx.createAnimation({
  70. timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
  71. })
  72. that.fontAnimation = wx.createAnimation({
  73. timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
  74. })
  75. },
  76. /**
  77. * 生命周期函数--监听页面显示
  78. */
  79. onShow: function () {
  80. console.log('onshow')
  81. let that = this;
  82. let cupNum = util.changeCup(that.data.isActive);
  83. that.setData({
  84. dataPositionObj: cupNum.dataPositionObj,
  85. propSize: cupNum.propSize
  86. })
  87. that.getDataTouch(that)
  88. },
  89. /**
  90. * 生命周期函数--监听页面隐藏
  91. */
  92. onHide: function () {
  93. },
  94. /**
  95. * 生命周期函数--监听页面卸载
  96. */
  97. onUnload: function () {
  98. },
  99. /**
  100. * 页面相关事件处理函数--监听用户下拉动作
  101. */
  102. onPullDownRefresh: function () {
  103. },
  104. /**
  105. * 页面上拉触底事件的处理函数
  106. */
  107. onReachBottom: function () {
  108. },
  109. /**
  110. * 用户点击右上角分享
  111. */
  112. onShareAppMessage: function () {
  113. },
  114. // changeCupImg(index){
  115. // console.log(this.data.imgTouch,"this.data.imgTouch")
  116. // let rpx = this.data.rpx;
  117. // let canvasBg = this.data.obverseImgObject[index];
  118. // const ctx = wx.createCanvasContext('madeContent');
  119. // ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx)
  120. // ctx.draw()
  121. // },
  122. changeCup(e) {
  123. // data-id== 1正面,2背面,3手柄,4杯底
  124. // this.changeCupImg(e.currentTarget.dataset.id);
  125. let that = this;
  126. let cupNum = util.changeCup(e.currentTarget.dataset.id)
  127. that.setData({
  128. isActive: e.currentTarget.dataset.id,
  129. dataPositionObj: cupNum.dataPositionObj,
  130. propSize: cupNum.propSize
  131. })
  132. that.getDataTouch(that)
  133. },
  134. addImgRouter() {
  135. console.log('添加图片');
  136. wx.navigateTo({
  137. url: '/customized/pages/made/madeImg/madeImg?id=' + this.data.isActive,
  138. })
  139. },
  140. addFontRouter() {
  141. console.log('添加文字');
  142. wx.navigateTo({
  143. url: '/customized/pages/made/madeFont/madeFont?id=' + this.data.isActive,
  144. })
  145. },
  146. getDataTouch(that) {
  147. let madeTouchImg = wx.getStorageSync('madeCupImgData' + that.data.isActive)
  148. let madeTouchFont = wx.getStorageSync('madeCupFontData' + that.data.isActive)
  149. console.log(madeTouchImg, madeTouchFont, "madeTouchFontmadeTouchFont")
  150. if (madeTouchImg || madeTouchFont) {
  151. that.setData({
  152. touchStatic: false
  153. })
  154. if (madeTouchImg) {
  155. that.imgAnimation.rotate(madeTouchImg.angle).step();
  156. that.setData({
  157. imgAnimationData: that.imgAnimation.export(),
  158. })
  159. }
  160. if (madeTouchFont) {
  161. that.fontAnimation.rotate(madeTouchFont.angle).step();
  162. that.setData({
  163. fontAnimationData: that.fontAnimation.export(),
  164. })
  165. }
  166. } else {
  167. that.setData({
  168. touchStatic: true
  169. })
  170. }
  171. that.setData({
  172. imgTouch: madeTouchImg ? madeTouchImg : {}, //存储图片数据
  173. fontTouch: madeTouchFont ? madeTouchFont : {},
  174. })
  175. },
  176. finishDesign() { // 完成设计
  177. let that = this;
  178. let designObj = {
  179. '1': '正面',
  180. '2': '背面',
  181. '3': '手柄',
  182. '4': '杯底',
  183. },
  184. designVal = '',
  185. madeStatic = false;
  186. for (let i = 1; i < 5; i++) {
  187. if (!wx.getStorageSync('madeCupImgData' + i) && !wx.getStorageSync('madeCupFontData' + i)) {
  188. designVal += designObj[i] + ','
  189. } else {
  190. madeStatic = true; // 表示已经有设计过的页面
  191. }
  192. }
  193. if (madeStatic) {
  194. if (!designVal) {
  195. console.log('可以完成')
  196. wx.navigateTo({
  197. // url: '/customized/pages/made/combination/combination',
  198. url: '/customized/pages/made/comb/comb'
  199. })
  200. } else {
  201. wx.showModal({
  202. title: '温馨提示',
  203. content: '您的' + designVal.substring(0, designVal.length - 1) + '还没有设计,是否确定不设计了?',
  204. success: function (res) {
  205. if (res.confirm) {
  206. console.log('用户点击确定,不设计了,直接完成')
  207. // wx.showToast({
  208. // title: '图片合成中...',
  209. // icon: 'loading'
  210. // })
  211. // that.getBuildImg(that)
  212. wx.navigateTo({
  213. // url: '/customized/pages/made/combination/combination',
  214. url:'/customized/pages/made/comb/comb'
  215. })
  216. } else {
  217. console.log('用户点击取消')
  218. }
  219. }
  220. })
  221. }
  222. } else {
  223. wx.showToast({
  224. title: '您还没有设计',
  225. icon: 'none'
  226. })
  227. }
  228. },
  229. // getBuildImg(that) {
  230. // for (let i = 1; i <= 1; i++) {
  231. // if (wx.getStorageSync('madeCupImgData' + i) || wx.getStorageSync('madeCupFontData' + i)) {
  232. // if (wx.getStorageSync('madeCupImgData' + i)) {
  233. // this.setData({
  234. // imgTouch: wx.getStorageSync('madeCupImgData' + i)
  235. // })
  236. // }
  237. // if (wx.getStorageSync('madeCupFontData' + i)) {
  238. // this.setData({
  239. // fontTouch: wx.getStorageSync('madeCupFontData' + i)
  240. // })
  241. // }
  242. // that.getCombImg(that);
  243. // }
  244. // console.log(i)
  245. // }
  246. // },
  247. // 合成canvas的js
  248. // getCombImg(that) {
  249. // let imgTouch = that.data.imgTouch;
  250. // let dataPositionObj = that.data.dataPositionObj;
  251. // wx.getSystemInfo({
  252. // success: function (res) {
  253. // let rpx = res.windowWidth / 750;
  254. // that.setData({
  255. // rpx: rpx
  256. // });
  257. // wx.downloadFile({
  258. // url: imgTouch.src, // 仅为示例,并非真实的资源
  259. // success(res) {
  260. // // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
  261. // console.log(res)
  262. // if (res.statusCode === 200) {
  263. // // canvas截图区域与图片的宽度比例
  264. // let dWidth = dataPositionObj.width / imgTouch.width;
  265. // // canvas截图区域与图片的高度比例
  266. // let dHeight = dataPositionObj.height / imgTouch.height;
  267. // const ctx = wx.createCanvasContext('comb-img');
  268. // //画布中点坐标转移到图片中心
  269. // let movex = imgTouch.x + imgTouch.width * rpx / 2;
  270. // let movey = imgTouch.y + imgTouch.height * rpx / 2;
  271. // ctx.translate(movex, movey);
  272. // ctx.rotate(imgTouch.angle * Math.PI / 180);
  273. // ctx.drawImage(res.tempFilePath, -imgTouch.width * rpx / 2, -imgTouch.height * rpx / 2, imgTouch.width * rpx, imgTouch.height * rpx)
  274. // ctx.draw(true, function () {
  275. // wx.canvasToTempFilePath({
  276. // canvasId: 'comb-img',
  277. // success: function (res) {
  278. // console.log(res)
  279. // let imgArray = that.data.imgSrcArray;
  280. // imgArray.push(res.tempFilePath)
  281. // that.setData({
  282. // imgSrcArray: imgArray
  283. // })
  284. // that.getCombFont(that);
  285. // }
  286. // }, that)
  287. // })
  288. // }
  289. // }
  290. // })
  291. // },
  292. // })
  293. // },
  294. // getCombFont(that) {
  295. // let fontTouch = that.data.fontTouch;
  296. // let dataPositionObj = that.data.dataPositionObj;
  297. // const ctx = wx.createCanvasContext('comb-font');
  298. // let movex = fontTouch.x + fontTouch.width / 2;
  299. // let movey = fontTouch.y + fontTouch.height / 2;
  300. // // ctx.translate(movex, movey);
  301. // // ctx.rotate(fontTouch.angle * Math.PI / 180);
  302. // ctx.setFontSize(fontTouch.fontSize);
  303. // ctx.setFillStyle(fontTouch.isColor);
  304. // ctx.fillText(fontTouch.fontContent, fontTouch.x, fontTouch.y + fontTouch.height / 5 * 4);
  305. // // ctx.fillText(fontTouch.fontContent, -fontTouch.width / 2, fontTouch.height / 10 * 3);
  306. // ctx.draw(true, function () {
  307. // wx.canvasToTempFilePath({
  308. // canvasId: 'comb-font',
  309. // success: function (res) {
  310. // console.log(res)
  311. // let imgArray = that.data.imgSrcArray;
  312. // imgArray.push(res.tempFilePath)
  313. // that.setData({
  314. // imgSrcArray: imgArray
  315. // })
  316. // console.log(that.data.imgSrcArray, "that.data.imgSrcArray")
  317. // that.getComb(that, that.data.imgSrcArray)
  318. // }
  319. // }, that)
  320. // })
  321. // },
  322. // getComb(that, imgSrcArray) {
  323. // console.log('开始最后的合成')
  324. // let imgTouch = that.data.imgTouch;
  325. // let dataPositionObj = that.data.dataPositionObj;
  326. // wx.getSystemInfo({
  327. // success: function (res) {
  328. // let rpx = res.windowWidth / 750;
  329. // that.setData({
  330. // rpx: rpx
  331. // });
  332. // let canvasBg = that.data.obverseImgObject[1];
  333. // const ctx = wx.createCanvasContext('comb-canvas');
  334. // ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx);
  335. // ctx.draw(true);
  336. // // 设置背景
  337. // imgSrcArray.forEach((res) => {
  338. // ctx.drawImage(res, dataPositionObj.left * rpx, dataPositionObj.top * rpx, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
  339. // })
  340. // console.log('渲染完成');
  341. // ctx.draw(true);
  342. // // ctx.draw(true, function () {
  343. // // wx.canvasToTempFilePath({
  344. // // canvasId: 'comb-canvas',
  345. // // success: function (res) {
  346. // // console.log(res, "最后的合成")
  347. // // let imgBuildArray = that.data.imgBuildArray;
  348. // // imgBuildArray.push(res.tempFilePath)
  349. // // that.setData({
  350. // // imgSrcArray: [], // 重置
  351. // // imgBuildArray: imgBuildArray
  352. // // })
  353. // // console.log(that.data.imgBuildArray, "that.data.imgBuildArray")
  354. // // }
  355. // // }, that)
  356. // // })
  357. // },
  358. // })
  359. // }
  360. })