收藏
回答

绘图中的clip()方法失效

问题模块 API/组件名称 终端类型 微信版本 基础库版本
API和组件 clip 工具 6.6.1 1.91

反馈一个 Bug ,fillRect之后clip失效

const ctx = wx.createCanvasContext('myCanvas')
    wx.downloadFile({
      url: 'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg',
      success: function (res) {
        ctx.fillRect(10, 10, 150, 75)
        ctx.draw()
         
        ctx.save()
        ctx.beginPath()
        ctx.arc(50, 50, 25, 0, 2 * Math.PI)
        ctx.clip()
        ctx.drawImage(res.tempFilePath, 25, 25)
        ctx.restore()
        ctx.draw(true)
      }
    })

const ctx = wx.createCanvasContext('myCanvas')
    wx.downloadFile({
      url: 'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg',
      success: function (res) {
        // ctx.fillRect(10, 10, 150, 75)
        // ctx.draw()
 
        ctx.save()
        ctx.beginPath()
        ctx.arc(50, 50, 25, 0, 2 * Math.PI)
        ctx.clip()
        ctx.drawImage(res.tempFilePath, 25, 25)
        ctx.restore()
        ctx.draw(true)
      }
    })



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

2 个回答

  • 边旭
    边旭
    2018-07-18

    这个问题的核心是fill与clip之间的矛盾。

    并非fillRect之后clip失效了,只是在fill的范围内clip失效了。

    我没有探究fill与clip之间更底层的逻辑,而是采用了一种折中的方法(毕竟我使用fill仅仅是填充背景色),使用drawImage来填充背景色,这样clip的表现就正常了。

    供参考

    2018-07-18
    赞同
    回复
  • 彦明
    彦明
    2018-02-07

    @纸短 有解决吗, 我也遇到了, 有点蒙圈, 只有在fillRect的区域就会是clip失效, 如果一般在这个区域, 就会一般有效, 一般无效...

    2018-02-07
    赞同
    回复