oneMade.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. // pages/customized/made/made.js
  2. import * as util from '../../../utils/util.js'
  3. Page({
  4. /**
  5. * 页面的初始数据
  6. */
  7. data: {
  8. dataPositionObj: {},
  9. propSize: {},
  10. isActive: '9', // 默认是正面
  11. obverseImgObject:{},
  12. imgTouch: {}, // 图片的对象,分为正面,侧面,手柄,底部
  13. fontTouch: {}, //文字的对象,分为正面,侧面,手柄,底部
  14. imgAnimationData: {}, // 图片的旋转
  15. fontAnimationData: {}, // 文字的旋转
  16. touchStatic: true,
  17. fontContent: '可定制区域',
  18. rpx: 1, // 获取页面的rpx
  19. imgSrcArray: [],
  20. imgBuildArray: [], // 生成后图片的数组
  21. simulation: { // 模拟字体,获取字体的宽高
  22. fontContent: '',
  23. fontSize: '',
  24. height: '',
  25. width: '',
  26. },
  27. box: { // 盒子默认是白色正面
  28. static: true,
  29. left: 'box-white-1-left',
  30. right: 'box-white-1-right'
  31. }
  32. },
  33. /**
  34. * 生命周期函数--监听页面加载
  35. */
  36. onLoad: function (options) {
  37. let that = this;
  38. wx.getSystemInfo({
  39. success: function (res) {
  40. let rpx = res.windowWidth / 750;
  41. that.setData({
  42. rpx: rpx
  43. });
  44. console.log(rpx, 'rpx')
  45. },
  46. })
  47. if ('id' in options) {
  48. this.setData({
  49. isActive: options.id
  50. })
  51. }
  52. console.log(this.data.isActive)
  53. },
  54. /**
  55. * 生命周期函数--监听页面初次渲染完成
  56. */
  57. onReady: function () {
  58. let that = this;
  59. // console.log('页面开始准备中'
  60. that.imgAnimation = wx.createAnimation({
  61. timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
  62. })
  63. that.fontAnimation = wx.createAnimation({
  64. timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
  65. })
  66. },
  67. /**
  68. * 生命周期函数--监听页面显示
  69. */
  70. onShow: function () {
  71. console.log('onshow')
  72. let that = this;
  73. let cupNum = util.changeCup(that.data.isActive);
  74. console.log(cupNum)
  75. that.setData({
  76. dataPositionObj: cupNum.dataPositionObj,
  77. propSize: cupNum.propSize,
  78. obverseImgObject:util.changeImg
  79. })
  80. that.getDataTouch(that);
  81. },
  82. /**
  83. * 生命周期函数--监听页面隐藏
  84. */
  85. onHide: function () {
  86. },
  87. /**
  88. * 生命周期函数--监听页面卸载
  89. */
  90. onUnload: function () {
  91. },
  92. /**
  93. * 页面相关事件处理函数--监听用户下拉动作
  94. */
  95. onPullDownRefresh: function () {
  96. },
  97. /**
  98. * 页面上拉触底事件的处理函数
  99. */
  100. onReachBottom: function () {
  101. },
  102. /**
  103. * 用户点击右上角分享
  104. */
  105. onShareAppMessage: function () {
  106. },
  107. addImgRouter() {
  108. console.log('添加图片');
  109. wx.setStorageSync('box',this.data.box)
  110. wx.navigateTo({
  111. url: '/customized/pages/oneMade/oneMadeImg/oneMadeImg?id=' + this.data.isActive,
  112. })
  113. },
  114. addFontRouter() {
  115. console.log('添加文字');
  116. wx.setStorageSync('box', this.data.box)
  117. wx.navigateTo({
  118. url: '/customized/pages/oneMade/oneMadeFont/oneMadeFont?id=' + this.data.isActive,
  119. })
  120. },
  121. getDataTouch(that) {
  122. let madeTouchImg = wx.getStorageSync('madeImgData' + that.data.isActive)
  123. let madeTouchFont = wx.getStorageSync('madeFontData' + that.data.isActive)
  124. console.log(madeTouchImg, madeTouchFont, "madeTouchFontmadeTouchFont")
  125. if (madeTouchImg || madeTouchFont) {
  126. that.setData({
  127. touchStatic: false
  128. })
  129. if (madeTouchImg) {
  130. that.imgAnimation.rotate(madeTouchImg.angle).step();
  131. that.setData({
  132. imgAnimationData: that.imgAnimation.export(),
  133. })
  134. }
  135. if (madeTouchFont) {
  136. that.fontAnimation.rotate(madeTouchFont.angle).step();
  137. that.setData({
  138. fontAnimationData: that.fontAnimation.export(),
  139. })
  140. that.setData({
  141. 'simulation.fontContent': madeTouchFont.fontContent,
  142. 'simulation.fontSize': madeTouchFont.fontSize
  143. })
  144. that.getTouchFontInformation(that)
  145. }
  146. } else {
  147. that.setData({
  148. touchStatic: true
  149. })
  150. }
  151. that.setData({
  152. imgTouch: madeTouchImg ? madeTouchImg : {}, //存储图片数据
  153. fontTouch: madeTouchFont ? madeTouchFont : {},
  154. })
  155. },
  156. finishDesign() { // 完成设计
  157. let that = this;
  158. if (!wx.getStorageSync('madeImgData' + this.data.isActive) && !wx.getStorageSync('madeFontData' + this.data.isActive)) {
  159. wx.showToast({
  160. title: '您还没有设计',
  161. icon: 'none'
  162. })
  163. } else {
  164. wx.navigateTo({
  165. url: '/customized/pages/oneMade/oneComb/oneComb?id=' + this.data.isActive
  166. })
  167. }
  168. },
  169. getTouchFontInformation(that) {
  170. let query = wx.createSelectorQuery();
  171. query.select('#simulation').boundingClientRect()
  172. query.exec(function (res) {
  173. console.log(res, "获取font的宽高");
  174. that.setData({
  175. 'simulation.height': res[0].height,
  176. 'simulation.width': res[0].width
  177. });
  178. wx.setStorageSync('simulationFont' + that.data.isActive, that.data.simulation);
  179. })
  180. },
  181. })