知识分享:物理分辨率与逻辑分辨率?

我心飞翔 分类:javascript

背景摘要

前段时间做了一个canvas渲染的降级
指路➡️ 《Phaser3渲染哲学》
,但是好巧不巧,原本只用运行在PC、Pad端的产品本次得适配移动端了,于是遇到了如下问题:

移动端显示的画面

通过图片可以看到画面变糊了,所以问题出在哪里呢?

回顾上次我们将逻辑分辨率进行1:1渲染,理论上是可以适配绝大多数电子产品的屏幕,但是有些设备的物理分辨率会高于逻辑分辨率PPI为2~3。

此时在单位空间内实际存在若干个像素点,但是我们只渲染一个,这样就出现了问题。

概念科普

上面的我们引出了三个概念,逻辑分辨率物理分辨率PPI,下面是它们的基本概念:

  • 逻辑分辨率:软件可以达到的
  • 物理分辨率:硬件所支持的
  • PPI:屏幕上每英寸可以显示的像素点的数量(Pixel Per Inch

该如何理解上述概念呢?

现在有一台PC,屏幕尺寸为24寸,分辨率是1920x1080,这就是它的硬件指标-物理分辨率,此时有一个软件开发商开发了一款软件,该软件固定像素横向1920像素渲染、纵向1080像素渲染,那么它就刚好铺满整个屏幕

客户们使用的很开心。

然而,优秀的显示器开发商对硬件进行了升级,在同样24寸的条件下,分别把横纵向像素增加到了原本的两倍,横向分辨率增加到了3840个,纵向分辨率增加到了2160个,换个角度来说是原本一个单位空间的位置只渲染1个像素点,但本次得渲染4个像素点。

用户们开心的买回了新显示器,打开软件一看,怎么不能铺满整个屏幕了?

哦~原来是当时的软件被设计为固定像素渲染,当现在像素增多,它还是只渲染自己该渲染的那一部分。

这个时候,聪明的系统开发者加入了讨论,说:”我们设定一个叫做'逻辑分辨率'的东西,通过它来告诉运行在系统上的软件该以多少倍的像素来渲染。“

于是乎软件开发商觉得很赞,采取了这个措施,软件又可以在新款3840x2160的屏幕上全屏使用了。

Retina屏的诞生

伴随iPhone4进入大众视野,当时Retina屏的PPI已经达到肉眼无法看到的级别,从技术上来说就是Apple在物理尺寸与上一代相同的屏幕上塞下了2倍的像素( 相较于前代iPhone3GS)。

iPhone 4采用Retina显示屏,在物理尺寸不变的情况下,像素成倍增加,达到了640x960像素。iPhone 3GS屏幕上有320 x 480 = 153600个像素点,而iPhone 4屏幕上则有640 x 960 = 614400个像素点,像素个数是原来的4倍

苹果是这样处理的:选择在长宽比例不变的情况下,直接将分辨率扩大4倍,将以往1个像素的位置用4个像素渲染,同时将这种体系推广给开发者,由于开发者只需要将之前应用中的图片放大4倍即可,所以后期应用适配也非常快。

结合Retina屏幕的诞生,是否可以更理解上面的概念了。

多倍图的出现

如果开发者们有幸与公司UI小姐姐们打交道,就会发现她们提供的UI稿件网址在下载切图时(拿iOS为例)会有多个选项:

WX20210320-181005.png

# 补充说明一点,iOS多倍图规则:
# 截止3GS这代以前都是 @1x;
# iPhone4-8(不包括Plus),iPhoneXR iPhone11,iPad @2x;
# iPhone6Plus - iPhone8Plus,iPhoneX、XS、XS Max、11 Pro、11 Pro Max、12全系 @3x
 

什么是多倍图呢?按照上文的描述和开发规范,那么想要在升级后的硬件设备中正常渲染图片,就得找到对应版本切图。

一倍图:当这个比率为1:1时,使用1个设备像素显示1个CSS像素。

二倍图:当这个比率为2:1时,使用4个设备像素显示1个CSS像素,

三倍图:当这个比率为3:1时,使用9(3*3)个设备像素显示1个CSS像素

如何找到该用哪种版本的图片呢?请接着读下文。

H5如何知道设备缩放比

前端的设备缩放比:

// 直接使用window对象下的devicePixelRatio
window.devicePixelRatio
 

Window 接口的devicePixelRatio返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。 此值也可以解释为像素大小的比率:一个CSS像素的大小与一个物理像素的大小。 简单来说,它告诉浏览器应使用多少屏幕实际像素来绘制单个CSS像素。

所以在对应设备上渲染Canvas时,只需要将分辨率乘以设备缩放比即可。

当处理标准显示器与HiDPI或Retina显示器之间的差异时,这很有用,后者使用更多的屏幕像素绘制相同的对象,从而获得更清晰的图像。

当在不同设备下打印时会有不同的结果:

24寸1980x1080屏幕 devicePixelRatio:1
WX20210320-174753.png

15寸物理分辨率2880x1880,实际渲染逻辑分辨率1920x1220 devicePixelRatio:2
WX20210320-175113@2x.png

iPhone12物理分辨率2532x1170 devicePixelRatio:3
IMG_3384.PNG

iPad Pro 11英寸物理分辨率2388×1668 devicePixelRatio:2
IMG_0771.PNG

生活中的PPI

计算公式:
(Width2+Height2)/Inch\sqrt{(Width^2+Height^2)} / Inch

以iPhone12为例,官网给的介绍如下图所示:

WX20210320-180239@2x.png

计算所得结果为:460.272526815668487符合官网的理论值。

总结

上述介绍了物理、逻辑分辨率,PPI,Retina屏等基础概念,下面结合基础概念展示如何区分设备缩放比以及前端开发针对Canvas渲染的注意事项,希望能对大家有所帮助。

回复

我来回复
  • 暂无回复内容