收藏
回答

canvas在不同手机屏幕兼容?

在网上搜到的答案大部分都是用ratio = wx.getSystemInfoSync().windowWidth/375 去实现,虽然在iphoneX系列手机还是会错位,但是至少还可以判断手机是不是iphoneX系列然后做单独处理,现在我是遇到在红米手机出现错位,这真是伤脑筋,怎么解决啊


回答关注问题邀请回答
收藏

2 个回答

  • phoenixor
    phoenixor
    2020-03-14

    这个我已经完美解决了,但是出现另一个bug

    https://developers.weixin.qq.com/community/develop/doc/000886c4e886e8f7c50a7b50859400


    2020-03-14
    有用
    回复 7
    • 小曼
      小曼
      2020-03-14
      怎么解决啊
      2020-03-14
      回复
    • phoenixor
      phoenixor
      2020-03-14回复小曼
      我本来想写一篇文章说明的,但是太麻烦了,简单跟你说下吧:
      1。首先你按照官方canvas2D示例设置dpr,文档有代码片段。这里有个坑。看红框部分,这里不要按示例写,换成你画布的尺寸。
      2。计算缩放比例,按照750rpx标准。我的设计稿是650*1000px,明显比手机屏幕大,要按比例缩放到屏幕上,所以*rpx2pxRatio,这个变量很重要,后面都要用。
      3。后面绘画的所有长度单位(宽高,不包括坐标点),都要*rpx2pxRatio。
      实测所有模拟器都不变形,效果很好,见最后一张图。另外如果想定位自适应还有别一套方案,懒得写了。。。
      2020-03-14
      回复
    • AshinsLab
      AshinsLab
      2020-03-14
      小哥,你的字体是怎么设置的呀,我看还有粗体,canvas不是不支持自定义字体吗
      2020-03-14
      回复
    • phoenixor
      phoenixor
      2020-03-14回复AshinsLab
      不支持自定义字体,只有3种默认字体,设置bold就变粗了,其他问题加我q群:146202960
      2020-03-14
      回复
    • 小曼
      小曼
      2020-03-14回复phoenixor
      谢谢大神!
      2020-03-14
      回复
    查看更多(2)
  • Listen
    Listen
    2020-03-14

    wx.getSystemInfoSync().pixelRation

    2020-03-14
    有用
    回复 2
    • 小曼
      小曼
      2020-03-14
      这个怎么用呢
      2020-03-14
      回复
    • Listen
      Listen
      2020-03-14回复小曼
      function rpx2px(rpx){
        return rpx / wx.getSystemInfoSync().pixelRation
      }
      2020-03-14
      回复
登录 后发表内容
问题标签