123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302 |
- import * as util from '../../../../utils/util.js'
- Page({
-
- data: {
- dataPositionObj: {},
- propSize: {},
- isActive: '5',
- obverseImgObject: {},
-
- fontColorArray: ['#ffffff', '#000000', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0', '#920784'],
- fontFamilyArray: ['Nomal', 'Monospace', 'Sans', 'Serif'],
- addFontStatic: false,
- inputFont: null,
- fontTouch: {
- isActive: '1',
- fontContent: '可定制区域',
- isColor: '#ffffff',
- x: 10,
- y: 10,
- angle: 0,
- fontSize: null,
- clientX: 0,
- clientY: 0,
- width: 0,
- height: 0,
- bold:false,
- },
- imgFont:{},
- animationData: {},
- imgAnimationData: {},
- imgTouch:{},
- box:{},
- },
-
- onLoad: function (options) {
- let that = this;
- that.animation = wx.createAnimation({
- timingFunction: 'step-start',
- })
- that.imgAnimation = wx.createAnimation({
- timingFunction: 'step-start',
- })
- if ('id' in options) {
- let cupNum = util.changeCup(options.id);
- let madeTouchFont = wx.getStorageSync('madeCupFontData' + options.id);
- if (madeTouchFont) {
- that.animation.rotate(madeTouchFont.angle).step();
- that.setData({
- fontTouch: madeTouchFont,
- animationData: that.animation.export(),
- isActive: options.id,
- dataPositionObj: cupNum.dataPositionObj,
- propSize: cupNum.propSize
- })
- } else {
- that.setData({
- 'fontTouch.isActive': options.id,
- isActive: options.id,
- dataPositionObj: cupNum.dataPositionObj,
- propSize: cupNum.propSize
- })
- }
- }
- },
-
- onReady: function () {
- let that = this;
- that.changeCupImg('1');
- },
-
- onShow: function () {
- this.setData({
- box: wx.getStorageSync('box'),
- obverseImgObject: util.changeImg
- })
- this.getDataTouch(this)
- },
-
- onHide: function () {
- },
-
- onUnload: function () {
- },
-
- onPullDownRefresh: function () {
- },
-
- onReachBottom: function () {
- },
-
- onShareAppMessage: function () {
- },
- changeCupImg(index) {
- let canvasBg = this.data.obverseImgObject[index],
- that = this;
-
-
-
-
-
-
-
-
-
-
-
- },
- addFont() {
- let that = this;
- that.setData({
- addFontStatic: true
- })
- },
- fontCancel() {
- this.setData({
- addFontStatic: false
- })
- },
- bindinput(e) {
- this.setData({
- inputFont: e.detail.value,
- })
- },
- fontConfirm(e) {
- let that = this;
- if (that.data.inputFont) {
- this.animation.rotate(0).step()
- that.setData({
- 'fontTouch.fontContent': that.data.inputFont,
- 'fontTouch.fontSize': 30,
- 'fontTouch.angle': 0,
- addFontStatic: false,
- animationData: this.animation.export()
- })
-
- that.setData({
- inputFont: null,
- })
- }
- },
- handleCanvarToImg(that) {
- wx.canvasToTempFilePath({
- x: 0,
- y: 0,
- width: 750,
- height: 588,
- canvasId: 'madeContent',
- success: function (res) {
- that.setData({
- radarImg: res.tempFilePath,
- })
- }
- });
- },
- selectColor(e) {
- this.setData({
- 'fontTouch.isColor': e.currentTarget.dataset.color
- })
- },
-
- fontTouchstart(e) {
-
- this.setData({
- "fontTouch.clientX": e.touches[0].clientX - this.data.fontTouch.x,
- "fontTouch.clientY": e.touches[0].clientY - this.data.fontTouch.y
- });
- console.log(this.data.fontTouch, "touch")
- },
- fontTouchmove(e) {
-
- this.setData({
- "fontTouch.x": e.changedTouches[0].clientX - this.data.fontTouch.clientX,
- "fontTouch.y": e.changedTouches[0].clientY - this.data.fontTouch.clientY
- });
-
- },
- fontTouchend(e) {
- console.log('移动结束', e)
- console.log(this.data.fontTouch)
- },
- fontDelete() {
-
- let touch = {
- fontContent: '可定制区域',
- isColor: '#ffffff',
- x: 10,
- y: 10,
- rotate: 180,
- fontSize: null,
- clientX: 0,
- clientY: 0,
- width: 0,
- height: 0,
- }
- this.setData({
- fontTouch: touch,
- })
- },
- fontEnlarge(e) {
- console.log(e.detail)
- this.setData({
- 'fontTouch.fontSize': e.detail.value
- })
- },
- fontRotate(e) {
- this.animation.rotate(e.detail.value).step();
- this.setData({
- animationData: this.animation.export(),
- 'fontTouch.angle': e.detail.value
- });
- },
- fontWeight(e) {
- this.setData({
- 'fontTouch.bold': e.detail.value
- })
- },
- madeConfirm() {
- let that = this;
- if (that.data.fontTouch.fontSize) {
- that.getTouchFontInformation(that);
-
-
-
- } else {
- wx.showToast({
- title: '您还没有添加文字进行设计',
- icon: 'none'
- })
- }
- },
- getTouchFontInformation(that) {
- let query = wx.createSelectorQuery();
- query.select('#touchFont').boundingClientRect()
- query.exec(function (res) {
- console.log(res, "获取font的宽高");
- that.setData({
- 'fontTouch.width': res[0].width,
- 'fontTouch.height': res[0].height
- });
- wx.setStorageSync('madeCupFontData' + that.data.isActive, that.data.fontTouch);
- wx.navigateBack()
- })
- },
- getDataTouch(that) {
- let madeTouchImg = wx.getStorageSync('madeCupImgData' + that.data.isActive)
- if (madeTouchImg) {
- that.imgAnimation.rotate(madeTouchImg.angle).step();
- that.setData({
- imgAnimationData: that.imgAnimation.export(),
- imgTouch: madeTouchImg ? madeTouchImg : {},
- })
- }
-
- },
- weightBtn(){
- let that = this;
- that.setData({
- 'fontTouch.bold':!that.data.fontTouch.bold
- })
- }
-
- })
|