|
@@ -1,4 +1,5 @@
|
|
|
// pages/customized/made/made.js
|
|
|
+import * as util from '../../../utils/util.js'
|
|
|
Page({
|
|
|
|
|
|
/**
|
|
@@ -24,33 +25,67 @@ Page({
|
|
|
'3': '/customized/images/customized/cup_black_handle.png',/*手柄 */
|
|
|
'4': '/customized/images/customized/cup_black_bottom.png',/*底部 */
|
|
|
},
|
|
|
- fontColor: ['#000', '#fff', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0','#920784']
|
|
|
+ fontColor: ['#000', '#fff', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0','#920784'],
|
|
|
// obverseImg: '/images/customized/cup_black_big.png',/*正面 */
|
|
|
+ imgTouch:{}, // 图片的对象,分为正面,侧面,手柄,底部
|
|
|
+ fontTouch: {}, //文字的对象,分为正面,侧面,手柄,底部
|
|
|
+ imgAnimationData:{}, // 图片的旋转
|
|
|
+ fontAnimationData: {}, // 文字的旋转
|
|
|
+ touchStatic:true,
|
|
|
+ fontContent:'可定制区域',
|
|
|
+ rpx:1, // 获取页面的rpx
|
|
|
+
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面加载
|
|
|
*/
|
|
|
onLoad: function (options) {
|
|
|
- this.changeCupImg(this.data.isActive);
|
|
|
+ let that = this;
|
|
|
+ wx.getSystemInfo({
|
|
|
+ success: function (res) {
|
|
|
+ let rpx = res.windowWidth / 750;
|
|
|
+ that.setData({
|
|
|
+ rpx: rpx
|
|
|
+ });
|
|
|
+ console.log(rpx, 'rpx')
|
|
|
+ },
|
|
|
+ })
|
|
|
+ if('id' in options){
|
|
|
+ this.setData({
|
|
|
+ isActive: options.id
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
|
*/
|
|
|
onReady: function () {
|
|
|
- // console.log('页面开始准备中')
|
|
|
-
|
|
|
-
|
|
|
- const ctx = wx.createCanvasContext('madeBox');
|
|
|
- // Canvas.SetLeft(ctx, '10rpx');
|
|
|
+ let that = this;
|
|
|
+ // console.log('页面开始准备中'
|
|
|
+ that.imgAnimation = wx.createAnimation({
|
|
|
+ timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
|
|
|
+ })
|
|
|
+ that.fontAnimation = wx.createAnimation({
|
|
|
+ timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
|
|
|
+ })
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面显示
|
|
|
*/
|
|
|
onShow: function () {
|
|
|
-
|
|
|
+ console.log('onshow')
|
|
|
+ let that = this;
|
|
|
+ let cupNum = util.changeCup(that.data.isActive);
|
|
|
+ that.setData({
|
|
|
+ dataPositionObj: cupNum.dataPositionObj,
|
|
|
+ propSize: cupNum.propSize
|
|
|
+ })
|
|
|
+ that.getDataTouch(that)
|
|
|
},
|
|
|
|
|
|
/**
|
|
@@ -87,97 +122,70 @@ Page({
|
|
|
onShareAppMessage: function () {
|
|
|
|
|
|
},
|
|
|
- changeCupImg(index){
|
|
|
- let canvasBg = this.data.obverseImgObject[index];
|
|
|
- wx.getSystemInfo({
|
|
|
- success: function (res) {
|
|
|
- let rpx = res.windowWidth / 750;
|
|
|
- const ctx = wx.createCanvasContext('madeContent');
|
|
|
- ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx)
|
|
|
- ctx.draw()
|
|
|
- },
|
|
|
- })
|
|
|
- },
|
|
|
+ // changeCupImg(index){
|
|
|
+ // console.log(this.data.imgTouch,"this.data.imgTouch")
|
|
|
+ // let rpx = this.data.rpx;
|
|
|
+ // let canvasBg = this.data.obverseImgObject[index];
|
|
|
+ // const ctx = wx.createCanvasContext('madeContent');
|
|
|
+ // ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx)
|
|
|
+ // ctx.draw()
|
|
|
+ // },
|
|
|
changeCup(e){
|
|
|
// data-id== 1正面,2背面,3手柄,4杯底
|
|
|
- this.changeCupImg(e.currentTarget.dataset.id);
|
|
|
- let dataPositionObj = null, propSize=null;
|
|
|
- switch (e.currentTarget.dataset.id){
|
|
|
- case '1':
|
|
|
- // console.log('正面')
|
|
|
- dataPositionObj = { // 正面数据
|
|
|
- top: '156rpx',
|
|
|
- left: '286rpx',
|
|
|
- width: '',
|
|
|
- height: ''
|
|
|
- };
|
|
|
- propSize={
|
|
|
- top: '8cm',
|
|
|
- right: '8cm',
|
|
|
- bottom: '8cm',
|
|
|
- left: '8cm',
|
|
|
- };
|
|
|
- break;
|
|
|
- case '2':
|
|
|
- dataPositionObj = { // 正面数据
|
|
|
- top: '156rpx',
|
|
|
- left: '180rpx',
|
|
|
- width: '',
|
|
|
- height: ''
|
|
|
- };
|
|
|
- propSize = {
|
|
|
- top: '8cm',
|
|
|
- right: '8cm',
|
|
|
- bottom: '8cm',
|
|
|
- left: '8cm',
|
|
|
- };
|
|
|
- // console.log('背面');
|
|
|
- break;
|
|
|
- case '3':
|
|
|
- dataPositionObj = { // 正面数据
|
|
|
- top: '150rpx',
|
|
|
- left: '348rpx',
|
|
|
- width: '70rpx',
|
|
|
- height: '268rpx'
|
|
|
- };
|
|
|
- propSize = {
|
|
|
- top: '1cm',
|
|
|
- right: '6cm',
|
|
|
- bottom: '1cm',
|
|
|
- left: '6cm',
|
|
|
- };
|
|
|
- // console.log('手柄');
|
|
|
- break;
|
|
|
- case '4':
|
|
|
- dataPositionObj = { // 正面数据
|
|
|
- top: '160rpx',
|
|
|
- left: '190rpx',
|
|
|
- width: '265rpx',
|
|
|
- height: '265rpx'
|
|
|
- };
|
|
|
- propSize = {
|
|
|
- top: '6cm',
|
|
|
- right: '6cm',
|
|
|
- bottom: '6cm',
|
|
|
- left: '6cm',
|
|
|
- };
|
|
|
- // console.log('杯底');
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
-
|
|
|
- }
|
|
|
- this.setData({
|
|
|
+ // this.changeCupImg(e.currentTarget.dataset.id);
|
|
|
+ let that = this;
|
|
|
+ let cupNum = util.changeCup(e.currentTarget.dataset.id)
|
|
|
+ that.setData({
|
|
|
isActive: e.currentTarget.dataset.id,
|
|
|
- dataPositionObj: dataPositionObj,
|
|
|
- propSize: propSize
|
|
|
+ dataPositionObj: cupNum.dataPositionObj,
|
|
|
+ propSize: cupNum.propSize
|
|
|
})
|
|
|
+ that.getDataTouch(that)
|
|
|
|
|
|
},
|
|
|
- addImg(){
|
|
|
- console.log('添加图片')
|
|
|
+ addImgRouter(){
|
|
|
+ console.log('添加图片');
|
|
|
+ wx.navigateTo({
|
|
|
+ url: '/customized/pages/made/madeImg/madeImg?id=' + this.data.isActive,
|
|
|
+ })
|
|
|
+ },
|
|
|
+ addFontRouter() {
|
|
|
+ console.log('添加文字');
|
|
|
+ wx.navigateTo({
|
|
|
+ url: '/customized/pages/made/madeFont/madeFont?id=' + this.data.isActive,
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getDataTouch(that){
|
|
|
+ let madeTouchImg = wx.getStorageSync('madeCupImgData' + that.data.isActive)
|
|
|
+ let madeTouchFont = wx.getStorageSync('madeCupFontData' + that.data.isActive)
|
|
|
+ console.log(madeTouchImg, madeTouchFont,"madeTouchFontmadeTouchFont")
|
|
|
+ if (madeTouchImg || madeTouchFont){
|
|
|
+ that.setData({
|
|
|
+ touchStatic: false
|
|
|
+ })
|
|
|
+ if (madeTouchImg){
|
|
|
+ that.imgAnimation.rotate(madeTouchImg.angle).step();
|
|
|
+ that.setData({
|
|
|
+ imgAnimationData: that.imgAnimation.export(),
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (madeTouchFont){
|
|
|
+ that.fontAnimation.rotate(madeTouchFont.angle).step();
|
|
|
+ that.setData({
|
|
|
+ fontAnimationData: that.fontAnimation.export(),
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }else {
|
|
|
+ that.setData({
|
|
|
+ touchStatic: true
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ that.setData({
|
|
|
+ imgTouch: madeTouchImg ? madeTouchImg : {}, //存储图片数据
|
|
|
+ fontTouch: madeTouchFont ? madeTouchFont : {},
|
|
|
+ })
|
|
|
},
|
|
|
- addFont() {
|
|
|
- console.log('添加文字')
|
|
|
- }
|
|
|
})
|