用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

微信小程序生成自適應海報

Rolan 2019-8-30 00:08

小程序canvas的API并沒有像其他的一樣支持小程序獨有的 rpx 自適應尺寸單位,在繪制內容時所應用的單位仍然是 px,那么如何實現不同尺寸屏幕的自適應呢?首先我們根據開發工具可知不同常用屏幕的尺寸:由此可知我們 ...

小程序canvas的API并沒有像其他的一樣支持小程序獨有的 rpx 自適應尺寸單位,在繪制內容時所應用的單位仍然是 px,那么如何實現不同尺寸屏幕的自適應呢?

首先我們根據開發工具可知不同常用屏幕的尺寸:

由此可知我們開發中常用的參考屏幕尺寸(iPhone6)為:375*667;

那么想要適應其他尺寸的屏幕時只需按照iPhone6的繪制大小按比例進行換算即可:

首先利用wx.getSystemInfo (獲取系統信息)的API獲取屏幕寬度,然后除iPhone6的屏幕寬度,即可得到相對單位


var rpx; //獲取屏幕寬度,獲取自適應單位
wx.getSystemInfo({
  success: function(res) {
    rpx = res.windowWidth/375;
  },
})

在繪制方法中將參數乘以相對單位即可實現自適應:

const s = wx.createCanvasContext("canvas");
s.drawImage(Url, 0, 0, 265 * rpx, 262.5 * rpx);

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 小時光 來自: segmentfault
不朽的浪漫援彩金
5分pk10是哪里的彩票 浙江体彩6+1历史开奖结果 快乐10分口决 湖北11选5过滤器 信誉棋牌大全 河南快3统计软件 体彩6加1开奖结果 大赢家比分广告 捕鸟达人手机版游戏 打成都麻将的技巧 新疆时时彩中奖技巧 浙江体彩6十1开奖结果 买内蒙古十一选五 浙江十一选五的开奖 闲来安徽麻将安卓版 北京赛车pk10福彩搜狐