收藏
回答

【BUG】mac开发工具clip的bug

问题模块 框架类型 问题类型 操作系统 工具版本
开发者工具 小程序 Bug macOS 1.02.1806120

按照官方示例

https://developers.weixin.qq.com/miniprogram/dev/api/canvas/clip.html

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.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)
  }
})

在测试开发工具上正常显示,但是只要在前面绘制一次fill()和stroke(),就会导致后续的clip全部失效

以下为测试代码:

testClip() {
  let ctx = wx.createCanvasContext('myCanvas');
  ctx.rect(0, 0, 100, 100);
  // 下面的fill和stroke都会导致clip失效
  ctx.fill();
  // ctx.stroke();
  ctx.draw(true);
  // 文档上的例子
  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.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)
    }
  })
}

,真机测试正常。


BUG图



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

2 个回答

  • 刘文文
    刘文文
    2018-07-07

    就没人看看么?

    2018-07-07
    赞同 1
    回复 1
    • Hanson,
      Hanson,
      2018-07-09

      兄弟,放弃吧,这问题我半年前已经提过了

      2018-07-09
      回复
  • 彭涛 Chris
    彭涛 Chris
    2018-07-17

    楼主你好,这个问题是因为代码实现上有问题,在 clip 之前调用一下 ctx.fill(); 就没问题了。如果有绘图需求,欢迎使用我们开源的 https://github.com/Kujiale-Mobile/Painter 库,该库也针对上述问题作出了解决

    2018-07-17
    赞同
    回复 7
    • 刘文文
      刘文文
      2018-07-17

      @彭涛 Chris 非常感谢你的回答,经过测试,已经解决问题,非常感谢。前段时间也研究过你们的Painer,非常不错的一个项目,我同事有使用过。 有点好奇的是,你们的PainerCore.git 库是否有借鉴过https://github.com/demi520/wxapp-qrcode ?再次感谢你的回答,希望这个项目越做越好,越来越强大。

      2018-07-17
      回复
    • 彭涛 Chris
      彭涛 Chris
      2018-07-17

      对,Painter 中的二维码绘制部分是使用的该库中的代码,并做了些修改,请问这个库是你们开源的吗?很厉害哦,我们准备在 readme 中加入一个 致谢 :)

      2018-07-17
      回复
    • April
      April
      2018-07-17回复刘文文

      你好,请问你怎么解决的 我clip两个圆,放图片,模拟器上没问题,真机上只画了一个圆,另一个是正方形,微信版本是6.7.1 不是说修复bug了吗,望分享经验,谢谢

      2018-07-17
      回复
    • 刘文文
      刘文文
      2018-07-17回复彭涛 Chris

      wxapp-qrcode的库不是我写的,当初我在使用的时候,遇到了一些问题,在翻看源码后,进行了修改,并提交了pullrequest https://github.com/demi520/wxapp-qrcode/pull/9 .不过,我自己也在准备一个插件,功能类似于html2canvas.js的功能,后期如果有什么问题,希望你能不吝赐教。谢谢

      2018-07-17
      回复
    • 刘文文
      刘文文
      2018-07-17回复April

      非常感谢你的提问!

      如你所说,微信的clip BUG在6.6.7上面是有问题的,在后续版本中已经修复了。

      至于你的业务场景我并不清楚,所以,我只能展示一段我使用中的代码,供你参考:

      drawAvatarImage(url, str) {
        let that = this;
        let _feedData = this.data.feedData;
        let avatar_W = 90;
        context.save();
        context.beginPath();
        context.arc(dpx2px(avatar_W / 2 + 30), dpx2px(avatar_W / 2 + 400), dpx2px(avatar_W / 2), 0, 2 * Math.PI);
        context.stroke();
        context.clip();
        context.closePath();
        context.drawImage(url, dpx2px(30), dpx2px(400) + BHError, dpx2px(90), dpx2px(90));
        context.restore();
        // 顺道绘制用户名
        context.setFillStyle('#333333');
        context.setFontSize(dpx2px(32));
        context.setTextAlign('left');
        context.fillText(String(_feedData.nickname), dpx2px(140), dpx2px(455) + BHError);
        context.draw(true, () => {
          console.log('绘制头像完成');
        });
      },

      其中的一些变量是前置的一些数据,如果可以理解,那就直接替换即可。

      希望对你能有帮助。

      2018-07-17
      回复
    查看更多(2)