123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224 |
- // pages/customized/made/madeFont/madeFont.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',/*底部 */
- },
- // radarImg:null,
- fontColorArray: ['#ffffff','#000000', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0', '#920784'],
- fontFamilyArray: ['Nomal','Monospace','Sans','Serif'],// 自带字体样式
- addFontStatic: false, // 添加文字
- inputFont:null,
- touch:{
- fontContent: '可定制区域',
- isColor: '#ffffff', // 默认是白色
- x:10, // 字体的top值 x坐标
- y:10, // 字体的 left值,y坐标
- angle:0, // 旋转度数
- fontSize:null,
- clientX:0, // 默认初始值
- clientY:0, // 默认初始值
- },
- animationData:{},//旋转动画
- },
- /**
- * 生命周期函数--监听页面加载
- */
- onLoad: function (options) {
-
- },
- /**
- * 生命周期函数--监听页面初次渲染完成
- */
- onReady: function () {
- let that = this;
- that.changeCupImg('1');
- that.animation = wx.createAnimation({
- timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
- })
- },
- /**
- * 生命周期函数--监听页面显示
- */
- onShow: function () {
-
- },
- /**
- * 生命周期函数--监听页面隐藏
- */
- onHide: function () {
- },
- /**
- * 生命周期函数--监听页面卸载
- */
- onUnload: function () {
- },
- /**
- * 页面相关事件处理函数--监听用户下拉动作
- */
- onPullDownRefresh: function () {
- },
- /**
- * 页面上拉触底事件的处理函数
- */
- onReachBottom: function () {
- },
- /**
- * 用户点击右上角分享
- */
- onShareAppMessage: function () {
- },
- changeCupImg(index) {
-
- let canvasBg = this.data.obverseImgObject[index],that = this;
- // 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();
- // setTimeout(()=>{
- // that.handleCanvarToImg(that)
- // },1000)
- // },
- // })
- },
- 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({
- 'touch.fontContent': that.data.inputFont,
- 'touch.fontSize':100,
- 'touch.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({
- 'touch.isColor': e.currentTarget.dataset.color
- })
- },
- // touch 事件
- fontTouchstart(e){
- //1.获取鼠标点击下去的
- this.setData({
- "touch.clientX": e.touches[0].clientX - this.data.touch.x,
- "touch.clientY": e.touches[0].clientY - this.data.touch.y
- });
- console.log(this.data.touch,"touch")
- },
- fontTouchmove(e){
- // 鼠标移动的位置
- this.setData({
- "touch.x": e.changedTouches[0].clientX - this.data.touch.clientX,
- "touch.y": e.changedTouches[0].clientY - this.data.touch.clientY
- });
-
- // console.log(this.data.touch)
- },
- fontTouchend(e){
- console.log('移动结束',e)
- console.log(this.data.touch)
- },
- fontDelete(){
- // 删除
- let touch= {
- fontContent: '可定制区域',
- isColor: '#ffffff', // 默认是白色
- x: 10, // 字体的top值 x坐标
- y: 10, // 字体的 left值,y坐标
- rotate: 180, // 旋转度数
- fontSize: null,
- clientX: 0, // 默认初始值
- clientY: 0, // 默认初始值
- }
- this.setData({
- touch: touch,
- })
- },
- fontEnlarge(e){ // 放大与缩小
- console.log(e.detail)
- this.setData({
- 'touch.fontSize':e.detail.value
- })
- },
- fontRotate(e){ // 旋转
- this.animation.rotate(e.detail.value).step();
- this.setData({
- animationData:this.animation.export(),
- 'touch.angle': e.detail.value
- })
- }
- })
|