我也遇到类似的问题,在自定义函数里先调用this.setData,在调用canvas画图,无效。如果没有this.setData,canvas就可以画图。然后同样的代码,放在onready里面,先调用this.setData,在调用canvas画图,也是可以画图。
this.setData 后 canvas引用的数据不根据新数据渲染,如何操作?前端使用了 canvas和text,调用了 page里的data. 在 onshow中 查询了云数据库数据,并进行了 this.setData 操作,修改了相关数据。 发现前端,字段数据进行了更新,但是canvas不更新。 跳转至另一个页面再回来,canvas显示正确 各位大神,这种情况需要如何处理?
2023-07-20代码里有些字符看不见,可以ctrl+A全选看见
一个canvas的问题?play_music:function(e){ this.setData({'globalData.song_title':e.currentTarget.dataset.song_title}) this.setData({'globalData.singer_name':e.currentTarget.dataset.singer_name}) this.setData({'globalData.song_img':e.currentTarget.dataset.song_img}) app.play_music(voice_url); var _that = this; wx.createSelectorQuery().select('#canvas').fields({ node: true, size: true }).exec((res) => { // Canvas 对象 // console.log(res) const canvas = res[0].node _that.canvas = canvas // Canvas 画布的实际绘制宽高 const width = res[0].width const height = res[0].height // 创建canvas渲染上下文 const ctx = canvas.getContext('2d') const dpr = wx.getWindowInfo().pixelRatio // console.log('---dpr', dpr) // 手动改变canvas的宽和高 canvas.width = width * dpr canvas.height = height * dpr ctx.scale(dpr, dpr) // 以上代码都是基础工作,给canvas写css样式时可以使用rpx单位。 ctx.beginPath(); ctx.strokeStyle = 'white'; ctx.lineWidth = _that.rpx2px(3); ctx.arc(_that.rpx2px(25),_that.rpx2px(25),_that.rpx2px(23),0,1*Math.PI,false); ctx.stroke(); }) } 我在一个函数里,先用了this.setData,然后在canvas绘图,但是canvas画不出来。然后我把函数里的代码,原样放在onready方法里,canvas可以画出圆弧。 如果我把这个函数里的this.setData语句去掉,canvas也是能绘图的。 有大神知道什么原因吗
2023-07-20