收藏
回答

canvas绘图怎么匹配多个手机型号 使用rpx

let canvas = wx.createCanvasContext("shareCanvas");

//绘制背景

canvas.drawImage(res[1].path, 0, 0, 301, 420);

canvas.save();

//绘制二维码

canvas.drawImage(res[0].path, 108, 262, 85, 85);

//绘制文字

canvas.font = "normal bold 20px sans-serif";

canvas.fillStyle = "#fff";

canvas.setTextAlign("center");

canvas.fillText("您的好友“" + this.wechat + "”", 150, 40);

canvas.fillText("送你20元红包", 150, 65);

canvas.draw();


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

3 个回答

  • Stephen
    Stephen
    2019-01-04

    我的做法是 不管你手机屏幕多大 全部生成一个固定尺寸的图片

    省的有的屏幕小 有的屏幕大 上面的内容适配也麻烦 屏幕小了 挤到一起去了

    屏幕大了 空出来一大块

    2019-01-04
    有用 1
    回复 2
    • 小泽摔不倒
      小泽摔不倒
      2019-01-04

      我用mpvue 写不了固定

      2019-01-04
      回复
    • Stephen
      Stephen
      2019-01-04回复小泽摔不倒

      可以 宽度高度定死就可以了

      2019-01-04
      回复
  • 2019-01-07

    /**

      *

      * 根据比例适配长度

      * @param {Number} v   计算前长度

      * @returns {Number}   计算后的长度

      */

    function getSize(v) {

      return v * (this.windowWidth / 375)

    }


    375是ui图的尺寸 windowWidth是当前屏幕宽度


    2019-01-07
    有用
    回复
  • 史周浩
    史周浩
    2019-01-04

    canvas是使用px作为单位的,匹配多个手机型号需要用rpx按比例转化成px,这是我写的,e是获取的设备信息,基本满足使用

    ratioRPX(e) {
        return e.screenWidth <= 320 && 0.426 ||
          e.screenWidth <= 360 && 0.48 ||
          e.screenWidth <= 375 && 0.5 ||
          e.screenWidth <= 395 && 0.526 ||
          0.552
      }


    2019-01-04
    有用
    回复 6
    • 小泽摔不倒
      小泽摔不倒
      2019-01-04

      大哥在逻辑怎么使用,就是这个转化值之后 我在哪更改呢

      2019-01-04
      回复
    • 史周浩
      史周浩
      2019-01-04

      用rpx乘于这个返回值就是px

      2019-01-04
      回复
    • 小泽摔不倒
      小泽摔不倒
      2019-01-04回复史周浩

      不行大哥,办公室的都匹配不全, 还有没有其它方案

      2019-01-04
      回复
    • 史周浩
      史周浩
      2019-01-04

      匹配不全的话你就继续在比例里添加

      2019-01-04
      回复
    • 天亮了
      天亮了
      2019-01-07回复小泽摔不倒

      e.screenWidth去除750就能的到相应的换算值了

      2019-01-07
      1
      回复
    查看更多(1)
登录 后发表内容