madeFont.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. // pages/customized/made/madeFont/madeFont.js
  2. import * as util from '../../../../utils/util.js'
  3. Page({
  4. /**
  5. * 页面的初始数据
  6. */
  7. data: {
  8. dataPositionObj: { //正面数据
  9. top: '156rpx',
  10. left: '286rpx',
  11. width: '',
  12. height: ''
  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. '2': '/customized/images/customized/cup_black_side.png',/*侧面面 */
  24. '3': '/customized/images/customized/cup_black_handle.png',/*手柄 */
  25. '4': '/customized/images/customized/cup_black_bottom.png',/*底部 */
  26. },
  27. // radarImg:null,
  28. fontColorArray: ['#ffffff','#000000', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0', '#920784'],
  29. fontFamilyArray: ['Nomal','Monospace','Sans','Serif'],// 自带字体样式
  30. addFontStatic: false, // 添加文字
  31. inputFont:null,
  32. touch:{
  33. isActive:'1', // 表示正面
  34. fontContent: '可定制区域',
  35. isColor: '#ffffff', // 默认是白色
  36. x:10, // 字体的top值 x坐标
  37. y:10, // 字体的 left值,y坐标
  38. angle:0, // 旋转度数
  39. fontSize:null,
  40. clientX:0, // 默认初始值
  41. clientY:0, // 默认初始值
  42. },
  43. animationData:{},//旋转动画
  44. },
  45. /**
  46. * 生命周期函数--监听页面加载
  47. */
  48. onLoad: function (options) {
  49. let that = this;
  50. that.animation = wx.createAnimation({
  51. timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
  52. })
  53. if('id' in options){
  54. let cupNum = util.changeCup(options.id);
  55. let madeTouchFont = wx.getStorageSync('madeCupFontData' + options.id);
  56. if (madeTouchFont){
  57. that.animation.rotate(madeTouchFont.angle).step();
  58. that.setData({
  59. touch: madeTouchFont,
  60. animationData: that.animation.export(),
  61. isActive: options.id,
  62. dataPositionObj: cupNum.dataPositionObj,
  63. propSize: cupNum.propSize
  64. })
  65. }else {
  66. that.setData({
  67. 'touch.isActive': options.id,
  68. isActive: options.id,
  69. dataPositionObj: cupNum.dataPositionObj,
  70. propSize: cupNum.propSize
  71. })
  72. }
  73. }
  74. },
  75. /**
  76. * 生命周期函数--监听页面初次渲染完成
  77. */
  78. onReady: function () {
  79. let that = this;
  80. that.changeCupImg('1');
  81. },
  82. /**
  83. * 生命周期函数--监听页面显示
  84. */
  85. onShow: function () {
  86. },
  87. /**
  88. * 生命周期函数--监听页面隐藏
  89. */
  90. onHide: function () {
  91. },
  92. /**
  93. * 生命周期函数--监听页面卸载
  94. */
  95. onUnload: function () {
  96. },
  97. /**
  98. * 页面相关事件处理函数--监听用户下拉动作
  99. */
  100. onPullDownRefresh: function () {
  101. },
  102. /**
  103. * 页面上拉触底事件的处理函数
  104. */
  105. onReachBottom: function () {
  106. },
  107. /**
  108. * 用户点击右上角分享
  109. */
  110. onShareAppMessage: function () {
  111. },
  112. changeCupImg(index) {
  113. let canvasBg = this.data.obverseImgObject[index],that = this;
  114. // wx.getSystemInfo({
  115. // success: function (res) {
  116. // let rpx = res.windowWidth / 750;
  117. // const ctx = wx.createCanvasContext('madeContent');
  118. // ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx)
  119. // ctx.draw();
  120. // setTimeout(()=>{
  121. // that.handleCanvarToImg(that)
  122. // },1000)
  123. // },
  124. // })
  125. },
  126. addFont(){ // 添加文字
  127. let that = this;
  128. that.setData({
  129. addFontStatic: true
  130. })
  131. },
  132. fontCancel(){
  133. this.setData({
  134. addFontStatic: false
  135. })
  136. },
  137. bindinput(e){
  138. this.setData({
  139. inputFont: e.detail.value,
  140. })
  141. },
  142. fontConfirm(e){
  143. let that = this;
  144. if (that.data.inputFont){
  145. this.animation.rotate(0).step()
  146. that.setData({
  147. 'touch.fontContent': that.data.inputFont,
  148. 'touch.fontSize':100,
  149. 'touch.angle': 0,
  150. addFontStatic: false,
  151. animationData: this.animation.export()
  152. })
  153. that.setData({
  154. inputFont: null,
  155. })
  156. }
  157. },
  158. handleCanvarToImg(that){
  159. wx.canvasToTempFilePath({
  160. x: 0,
  161. y: 0,
  162. width: 750,
  163. height: 588,
  164. canvasId: 'madeContent',
  165. success: function (res) {
  166. that.setData({
  167. radarImg: res.tempFilePath,
  168. })
  169. }
  170. });
  171. },
  172. selectColor(e){ // 选择颜色
  173. this.setData({
  174. 'touch.isColor': e.currentTarget.dataset.color
  175. })
  176. },
  177. // touch 事件
  178. fontTouchstart(e){
  179. //1.获取鼠标点击下去的
  180. this.setData({
  181. "touch.clientX": e.touches[0].clientX - this.data.touch.x,
  182. "touch.clientY": e.touches[0].clientY - this.data.touch.y
  183. });
  184. console.log(this.data.touch,"touch")
  185. },
  186. fontTouchmove(e){
  187. // 鼠标移动的位置
  188. this.setData({
  189. "touch.x": e.changedTouches[0].clientX - this.data.touch.clientX,
  190. "touch.y": e.changedTouches[0].clientY - this.data.touch.clientY
  191. });
  192. // console.log(this.data.touch)
  193. },
  194. fontTouchend(e){
  195. console.log('移动结束',e)
  196. console.log(this.data.touch)
  197. },
  198. fontDelete(){
  199. // 删除
  200. let touch= {
  201. fontContent: '可定制区域',
  202. isColor: '#ffffff', // 默认是白色
  203. x: 10, // 字体的top值 x坐标
  204. y: 10, // 字体的 left值,y坐标
  205. rotate: 180, // 旋转度数
  206. fontSize: null,
  207. clientX: 0, // 默认初始值
  208. clientY: 0, // 默认初始值
  209. }
  210. this.setData({
  211. touch: touch,
  212. })
  213. },
  214. fontEnlarge(e){ // 放大与缩小
  215. console.log(e.detail)
  216. this.setData({
  217. 'touch.fontSize':e.detail.value
  218. })
  219. },
  220. fontRotate(e){ // 旋转
  221. this.animation.rotate(e.detail.value).step();
  222. this.setData({
  223. animationData:this.animation.export(),
  224. 'touch.angle': e.detail.value
  225. })
  226. },
  227. madeConfirm(){ // 设计完成进行确定
  228. if(this.data.touch.fontSize){
  229. wx.setStorageSync('madeCupFontData'+ this.data.isActive, this.data.touch);
  230. wx.navigateBack()
  231. // wx.redirectTo({
  232. // url: '/customized/pages/made/made?id='+ this.data.isActive,
  233. // })
  234. } else {
  235. wx.showToast({
  236. title: '您还没有添加文字进行设计',
  237. icon: 'none'
  238. })
  239. }
  240. }
  241. })