123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191 |
- // pages/customized/made/made.js
- import * as util from '../../../utils/util.js'
- Page({
- /**
- * 页面的初始数据
- */
- data: {
- dataPositionObj:{ //正面数据
- top:'156rpx',
- left:'286rpx',
- width:'',
- height:''
- },
- propSize:{
- top:'8cm',
- right:'8cm',
- bottom: '8cm',
- left:'8cm',
- },
- isActive: '1', // 默认是正面
- obverseImgObject:{
- '1': '/customized/images/customized/cup_black_big.png',/*正面 */
- '2': '/customized/images/customized/cup_black_side.png',/*侧面面 */
- '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'],
- // obverseImg: '/images/customized/cup_black_big.png',/*正面 */
- imgTouch:{}, // 图片的对象,分为正面,侧面,手柄,底部
- fontTouch: {}, //文字的对象,分为正面,侧面,手柄,底部
- imgAnimationData:{}, // 图片的旋转
- fontAnimationData: {}, // 文字的旋转
- touchStatic:true,
- fontContent:'可定制区域',
- rpx:1, // 获取页面的rpx
- },
- /**
- * 生命周期函数--监听页面加载
- */
- onLoad: function (options) {
- 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 () {
- 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)
- },
- /**
- * 生命周期函数--监听页面隐藏
- */
- onHide: function () {
- },
- /**
- * 生命周期函数--监听页面卸载
- */
- onUnload: function () {
- },
- /**
- * 页面相关事件处理函数--监听用户下拉动作
- */
- onPullDownRefresh: function () {
- },
- /**
- * 页面上拉触底事件的处理函数
- */
- onReachBottom: function () {
- },
- /**
- * 用户点击右上角分享
- */
- onShareAppMessage: function () {
- },
- // 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 that = this;
- let cupNum = util.changeCup(e.currentTarget.dataset.id)
- that.setData({
- isActive: e.currentTarget.dataset.id,
- dataPositionObj: cupNum.dataPositionObj,
- propSize: cupNum.propSize
- })
- that.getDataTouch(that)
-
- },
- 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 : {},
- })
- },
- })
|