一、由于海报中元素的宽高位置等是动态的，所以把这些值放在data中，并且为rpx单位

data: {// data中均为rpx值wrap: {x: 0, y: 0, w: 600, h: 1000, src: '/images/img1.png'},photo: {x: 200, y: 0, w: 200, h: 200, src: '/images/img2.png'},finalPhoto: {x: 200, y: 0, w: 200, h: 200},text: {x: 90, y: 920, fontSize: 60, color: '#FFF', text: '一行文本'},finalImg: ''
},

二、canvas元素直接取data中的值，单位为rpx

<canvas class="cvs" canvas-id="cvs"style="width:{{wrap.w}}rpx;height:{{wrap.h}}rpx;"></canvas>

三、封装rpx与px互转的函数

  /*** rpx 转 px*/rpx2Px: (()=> {var windowWidth = wx.getSystemInfoSync().windowWidthvar scale = windowWidth / 750return (size)=> {return size * scale}})(),/*** px转rpx*/px2Rpx: (()=> {var windowWidth = wx.getSystemInfoSync().windowWidthvar scale = windowWidth / 750return (size)=> {return size / scale}})(),

四、使用movable-view实现自定义图片的拖拽与缩放，该组件的事件中，返回的x y等为px单位值，可以先转为rpx存到data中，记得要加上起始坐标x y

  /*** 拖动事件*/posiChange(e) {const { x, y } = e.detaillet { photo, finalPhoto } = this.dataconst { px2Rpx } = thisfinalPhoto.x = photo.x + px2Rpx(x)finalPhoto.y = photo.y + px2Rpx(y)},/*** 缩放事件*/scaleChange(e) {const { x, y, scale } = e.detaillet { photo, finalPhoto } = this.dataconst { px2Rpx } = thisfinalPhoto.x = photo.x + px2Rpx(x)finalPhoto.y = photo.y + px2Rpx(y)finalPhoto.w = photo.w * scalefinalPhoto.h = photo.h * scale},

五、画图过程中，CanvasContext API中需要的值为px单位，需要把data中的rpx转为px

  /*** 画图*/drawCvs() {const { rpx2Px } = thisconst { wrap, photo, finalPhoto, text } = this.data// 外框let x = rpx2Px(wrap.x),y = rpx2Px(wrap.y),w = rpx2Px(wrap.w),h = rpx2Px(wrap.h),wrapSrc = wrap.src// 照片let photoX = rpx2Px(finalPhoto.x),photoY = rpx2Px(finalPhoto.y),photoW = rpx2Px(finalPhoto.w),photoH = rpx2Px(finalPhoto.h),photoSrc = photo.src// 文字let textX = rpx2Px(text.x),textY = rpx2Px(text.y),textSize = rpx2Px(text.fontSize),color = text.color,textText = text.text},

六、canvas生成图片时，可能会出现问题，把wx.canvasToTempFilePath放在定时器中执行

    ctx.draw(false, ()=> {setTimeout(()=> {wx.canvasToTempFilePath({canvasId: 'cvs',success: (res)=> {this.setData({finalImg: res.tempFilePath})}}, this)}, 500)})