123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 |
- // pages/customized/made/madeImg/madeImg.js
- let app = getApp();
- let host = app.globalData.servsers; // 请求的url
- let userid = app.globalData.user_id; //用户的userid
- 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',/*底部 */
- },
- fontContent: '可定制区域',
- madeImg: null, // 定制图
- madeStatic: false, // 定制状态,表示是否已经定制了,false 表示没有定制
- animationData: {},//旋转动画
- imageArray:[
- {
- id:1,
- src:'/customized/images/customized/cover-img.png'
- }
- ],//请求数据后的图片列表
- imageId: null, // 用户选中图片的id
- imageSrc:null, // 选中图片后的路径
- touch:{
- src: null,
- x:30,
- y:30,
- clientX:0,
- clientY:0,
- width:null, // 图片的宽度
- height:null,
- scale:1, // 图片宽高比例
- angle: 0, // 旋转度数
- }
- },
- /**
- * 生命周期函数--监听页面加载
- */
- onLoad: function (options) {
-
- },
- /**
- * 生命周期函数--监听页面初次渲染完成
- */
- onReady: function () {
- let that = this;
-
- 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 () {
- },
- // 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)
- },
- imgDelete(){ // 图片删除
- let that = this;
- that.setData({
- 'touch.src': null,
- madeStatic: false, // 表示已经有图片
- })
- },
- imgEnlarge(e){
- let that = this;
- console.log(e.detail.value,'eee')
- that.setData({
- 'touch.width': e.detail.value,
- 'touch.height': e.detail.value/that.data.touch.scale
- })
- },
- imgRotate(e) { // 旋转
- this.animation.rotate(e.detail.value).step();
- this.setData({
- animationData: this.animation.export(),
- 'touch.angle': e.detail.value
- })
- },
- uploadImg(){
- console.log('点击上传图片');
- wx.chooseImage({
- success(res) {
- const tempFilePaths = res.tempFilePaths
- wx.uploadFile({
- url: host + '/fileUpload', // 仅为示例,非真实的接口地址
- filePath: tempFilePaths[0],
- name: 'file',
- formData: {
- file: tempFilePaths[0],
- userid:userid,
- },
- success(res) {
- console.log(res)
- }
- })
- }
- })
- },
- selectImgBtn(e){
- console.log('选中图片', e.currentTarget.dataset.id);
- this.setData({
- imageId: e.currentTarget.dataset.id,
- imageSrc: e.currentTarget.dataset.src
- })
- // 'touch.src': e.currentTarget.dataset.src,
- // madeStatic: true, // 表示已经有图片
- // this.getScale(this, e.currentTarget.dataset.src);
- },
- getScale(that,src){ // 获取图片的比例
- wx.getImageInfo({
- src: src,
- success: function (res) {
- console.log(res, "fff")
- that.setData({
- 'touch.width': res.width,
- 'touch.height': res.height,
- 'touch.scale': res.width / res.height, // 宽高比例
- })
- console.log(that.data.touch)
- }
- })
- },
- addImg(){ // 添加图片
- let that = this;
- if (that.data.imageSrc){
- that.setData({
- 'touch.src': that.data.imageSrc,
- madeStatic: true, // 表示已经有图片
- })
- that.getScale(that, that.data.imageSrc)
- } else {
- wx.showToast({
- title: '您还没有选中图片',
- icon: 'none'
- })
- }
-
- }
- })
|