madeFont.js 5.0 KB

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