你想反馈一个 Bug 还是 提一个需求？
Bug
如果是 Bug：
* Bug 表现是什么？预期表现是什么？
表现: canvas以组件形式提供服务时, 无法绘制, 且保存到本地的图片内容为空.
预期: 正常绘制
* 如何复现？
canvas components:
<canvas canvas-id="myCanvas" class="myCanvas" style="width: {{width}}; height: {{height}}"/>
调用组件的页面:
<view class="my-canvas">
<my-canvas picArray="{{picArray}}"/>
<button class="drawCanvas" ontap="drawCanvas">绘制button>
view>
组件draw方法:
_drawText: function() { let ctx = wx.createCanvasContext('myCanvas') const textArray = this.data.txtArray textArray.forEach(element => { try { ctx.setFillStyle(element.color || '#F5F5F5') ctx.setFontSize(element.size || 20) ctx.fillText(element.text, element.x, element.y) } catch (e) { console.log('drawText error!') } }) ctx.draw && ctx.draw(true, function(e) { console.log('done') }) }, |
组件调用方法:
drawCanvas: function() { this.setData({ txtArray: [{ color: 'red', size: 20, text: 'hello', x: 0, y: 0 }, { color: 'green', size: 40, text: 'world', x: 100, y: 0 }] }) } |
实现思路:
通过页面变更txtArray值, 让canvas组件监听properties变化, 以此来调用_drawText方法.
结果:
图中可见:
当前ctx的action有值, 并且对应为我传入的textArray中的设置颜色, 字体大小, 文字
当前canvasId有值, 对应到页面下的组件里的canvas-Id
当前webviewId为0
ctx.draw()可以进入完成回调, 但是console里并没有出现'done'
补充一下: 如果在页面端初始化ctx后传入到component里, ctx.setFillStyle等方法都是undefined...
麻烦官方帮忙看下问题, 谢谢.
请教下各位, 可能是什么原因导致的? 谢谢.
问题已经解决, 初始化ctx的时候传入this
wx.createCanvasContext('myCanvas', this)
id动态设置试试？