madeImg.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. // pages/customized/made/madeImg/madeImg.js
  2. let app = getApp();
  3. let host = app.globalData.servsers; // 请求的url
  4. let userid = app.globalData.user_id; //用户的userid
  5. Page({
  6. /**
  7. * 页面的初始数据
  8. */
  9. data: {
  10. dataPositionObj: { //正面数据
  11. top: '156rpx',
  12. left: '286rpx',
  13. width: '',
  14. height: '',
  15. },
  16. propSize: {
  17. top: '8cm',
  18. right: '8cm',
  19. bottom: '8cm',
  20. left: '8cm',
  21. },
  22. isActive: '1', // 默认是正面
  23. obverseImgObject: {
  24. '1': '/customized/images/customized/cup_black_big.png',/*正面 */
  25. '2': '/customized/images/customized/cup_black_side.png',/*侧面面 */
  26. '3': '/customized/images/customized/cup_black_handle.png',/*手柄 */
  27. '4': '/customized/images/customized/cup_black_bottom.png',/*底部 */
  28. },
  29. fontContent: '可定制区域',
  30. madeImg: null, // 定制图
  31. madeStatic: false, // 定制状态,表示是否已经定制了,false 表示没有定制
  32. animationData: {},//旋转动画
  33. imageArray:[
  34. {
  35. id:1,
  36. src:'/customized/images/customized/cover-img.png'
  37. }
  38. ],//请求数据后的图片列表
  39. imageId: null, // 用户选中图片的id
  40. imageSrc:null, // 选中图片后的路径
  41. touch:{
  42. src: null,
  43. x:30,
  44. y:30,
  45. clientX:0,
  46. clientY:0,
  47. width:null, // 图片的宽度
  48. height:null,
  49. scale:1, // 图片宽高比例
  50. angle: 0, // 旋转度数
  51. }
  52. },
  53. /**
  54. * 生命周期函数--监听页面加载
  55. */
  56. onLoad: function (options) {
  57. },
  58. /**
  59. * 生命周期函数--监听页面初次渲染完成
  60. */
  61. onReady: function () {
  62. let that = this;
  63. that.animation = 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. },
  72. /**
  73. * 生命周期函数--监听页面隐藏
  74. */
  75. onHide: function () {
  76. },
  77. /**
  78. * 生命周期函数--监听页面卸载
  79. */
  80. onUnload: function () {
  81. },
  82. /**
  83. * 页面相关事件处理函数--监听用户下拉动作
  84. */
  85. onPullDownRefresh: function () {
  86. },
  87. /**
  88. * 页面上拉触底事件的处理函数
  89. */
  90. onReachBottom: function () {
  91. },
  92. /**
  93. * 用户点击右上角分享
  94. */
  95. onShareAppMessage: function () {
  96. },
  97. // touch 事件
  98. fontTouchstart(e) {
  99. //1.获取鼠标点击下去的
  100. this.setData({
  101. "touch.clientX": e.touches[0].clientX - this.data.touch.x,
  102. "touch.clientY": e.touches[0].clientY - this.data.touch.y
  103. });
  104. console.log(this.data.touch, "touch")
  105. },
  106. fontTouchmove(e) {
  107. // 鼠标移动的位置
  108. this.setData({
  109. "touch.x": e.changedTouches[0].clientX - this.data.touch.clientX,
  110. "touch.y": e.changedTouches[0].clientY - this.data.touch.clientY
  111. });
  112. // console.log(this.data.touch)
  113. },
  114. imgDelete(){ // 图片删除
  115. let that = this;
  116. that.setData({
  117. 'touch.src': null,
  118. madeStatic: false, // 表示已经有图片
  119. })
  120. },
  121. imgEnlarge(e){
  122. let that = this;
  123. console.log(e.detail.value,'eee')
  124. that.setData({
  125. 'touch.width': e.detail.value,
  126. 'touch.height': e.detail.value/that.data.touch.scale
  127. })
  128. },
  129. imgRotate(e) { // 旋转
  130. this.animation.rotate(e.detail.value).step();
  131. this.setData({
  132. animationData: this.animation.export(),
  133. 'touch.angle': e.detail.value
  134. })
  135. },
  136. uploadImg(){
  137. console.log('点击上传图片');
  138. wx.chooseImage({
  139. success(res) {
  140. const tempFilePaths = res.tempFilePaths
  141. wx.uploadFile({
  142. url: host + '/fileUpload', // 仅为示例,非真实的接口地址
  143. filePath: tempFilePaths[0],
  144. name: 'file',
  145. formData: {
  146. file: tempFilePaths[0],
  147. userid:userid,
  148. },
  149. success(res) {
  150. console.log(res)
  151. }
  152. })
  153. }
  154. })
  155. },
  156. selectImgBtn(e){
  157. console.log('选中图片', e.currentTarget.dataset.id);
  158. this.setData({
  159. imageId: e.currentTarget.dataset.id,
  160. imageSrc: e.currentTarget.dataset.src
  161. })
  162. // 'touch.src': e.currentTarget.dataset.src,
  163. // madeStatic: true, // 表示已经有图片
  164. // this.getScale(this, e.currentTarget.dataset.src);
  165. },
  166. getScale(that,src){ // 获取图片的比例
  167. wx.getImageInfo({
  168. src: src,
  169. success: function (res) {
  170. console.log(res, "fff")
  171. that.setData({
  172. 'touch.width': res.width,
  173. 'touch.height': res.height,
  174. 'touch.scale': res.width / res.height, // 宽高比例
  175. })
  176. console.log(that.data.touch)
  177. }
  178. })
  179. },
  180. addImg(){ // 添加图片
  181. let that = this;
  182. if (that.data.imageSrc){
  183. that.setData({
  184. 'touch.src': that.data.imageSrc,
  185. madeStatic: true, // 表示已经有图片
  186. })
  187. that.getScale(that, that.data.imageSrc)
  188. } else {
  189. wx.showToast({
  190. title: '您还没有选中图片',
  191. icon: 'none'
  192. })
  193. }
  194. }
  195. })