2020-03-19 真机调试报错 r.Canvas is not a constructor
原因:canvas 2d 和 webgl 暂不支持真机调试,请直接使用真机预览,真机预览模式下使用 vConsole 调试
基础代码(使用 Canvas 2D 接口)
Component({ data: { ctx: '' , image: '' }, methods: { onLoad: function (options ) {}, onReady: function ( ) { const query = wx.createSelectorQuery() query .select('#sign' ) .fields({ node : true , size : true }) .exec(res => { console .log(res) const canvas = res[0 ].node const ctx = canvas.getContext('2d' ) console .log(ctx) const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = res[0 ].width * dpr canvas.height = res[0 ].height * dpr ctx.scale(dpr, dpr) ctx.lineWidth = 4 ctx.strokeStyle = '#333' ctx.lineCap = 'round' ctx.lineJoin = 'bevel' this .setData({ ctx: ctx }) }) } } })
实现手写效果
使用 catchtouchmove 绑定,默认会阻止页面跟着滑动
<canvas type ="2d" id ="sign" bindtouchstart ="bindtouchstartHandler" catchtouchmove ="catchtouchmoveHandler" > </canvas >
bindtouchstartHandler (e ) { if (e.type != 'touchstart' ) return false let ctx = this .data.ctx ctx.beginPath() ctx.moveTo(e.touches[0 ].x, e.touches[0 ].y) }, catchtouchmoveHandler (e ) { let left = e.currentTarget.offsetLeft let top = e.currentTarget.offsetTop let pageX = e.touches[0 ].pageX let pageY = e.touches[0 ].pageY let ctx = this .data.ctx ctx.lineTo(pageX - left, pageY - top) ctx.stroke() }
使用 bindtouchmove
,需要单独处理页面跟着滚动的问题
给 canvas 绑定 bindtouchmove=”touchmoveHandler” 然后绑定空的 catchtouchmove 事件catchtouchmove="preventTouchmove"
或者直接 catchtouchmove="ture"
<canvas type ="2d" id ="sign" bindtouchstart ="bindtouchstartHandler" bindtouchmove ="bindtouchmoveHandler" catchtouchmove ="preventTouchmove" > </canvas >
bindtouchstartHandler (e ) { if (e.type != 'touchstart' ) return false let ctx = this .data.ctx ctx.beginPath() ctx.moveTo(e.touches[0 ].x, e.touches[0 ].y) }, bindtouchmoveHandler (e) { let ctx = this .data.ctx ctx.lineTo(e.touches[0 ].x, e.touches[0 ].y) ctx.stroke() }, preventTouchmove () {}
保存到相册
wx.canvasToTempFilePath(Object object, Object this)https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html
canvasToTempFilePath ( ) { return new Promise ((resolve, reject ) => { const query = wx.createSelectorQuery() query .select('#sign' ) .fields({ node : true , size : true }) .exec(res => { const canvas = res[0 ].node wx.canvasToTempFilePath({ x: 0 , y: 0 , fileType: 'jpg' , canvas: canvas, success (res ) { console .log(res.tempFilePath) resolve(res.tempFilePath) } }) }) }) }, saveToAlbum ( ) { this .canvasToTempFilePath().then(file => { wx.getSetting({ success (res ) { if (!res.authSetting['scope.writePhotosAlbum' ]) { wx.authorize({ scope: 'scope.writePhotosAlbum' , success ( ) { wx.saveImageToPhotosAlbum({ filePath: file, success ( ) { wx.showToast({ title: '保存成功' }) }, fail ( ) { wx.showToast({ title: '保存失败' , icon: 'none' }) } }) }, fail ( ) {} }) } else { wx.saveImageToPhotosAlbum({ filePath: file, success ( ) { wx.showToast({ title: '保存成功' }) }, fail ( ) { wx.showToast({ title: '保存失败' , icon: 'none' }) } }) } } }) }) }