收藏
回答

canvas以组件形式提供服务, 无法绘图

问题模块 框架类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 canvas 工具 6.6.5 1.9.1


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

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


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


最后一次编辑于  2018-03-07  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

3 个回答

  • (・ω・)ノ
    (・ω・)ノ
    2018-03-09

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

    wx.createCanvasContext('myCanvas', this)

    2018-03-09
    赞同 11
    回复 1
    • Techeek
      Techeek
      08-09
      这插件开发太坑了,谢谢,解决了!
      08-09
      赞同
      回复
  • 不急
    不急
    2018-03-07

    id动态设置试试?

    2018-03-07
    赞同
    回复