canvas以组件形式提供服务, 无法绘图
发布于 5 年前 作者 guiyinghe 7511 次浏览 来自 问答

你想反馈一个 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...

麻烦官方帮忙看下问题, 谢谢.


请教下各位, 可能是什么原因导致的? 谢谢.

2 回复

问题已经解决, 初始化ctx的时候传入this

wx.createCanvasContext(myCanvas, this)

id动态设置试试?

回到顶部