图形编辑器：适配高分辨率屏幕

Arzie100 · 发表于 2023-2-8 18:40

大家好，我是前端西瓜哥。我的图形编辑器项目一直都是用一个 1080P 的老显示器开发的。
但最近我改用 Macbook Pro 的视网膜（Retina）屏幕开发时，发现高分屏（高分辨率屏幕）反而让图形编辑器中的线变得模糊了。
这次我们来看看该如何解决这个问题。

项目地址，欢迎 star：
https://github.com/F-star/suika
线上体验：
https://blog.fstars.wang/app/suika/

高分屏

表达代码中的一个像素（独立像素），原本是只需要一个屏幕的一个发光单元（物理像素），一对一关系，很好理解。
但随着显示器的发展，我们有了更小尺寸的发光单位，可以在原本一个发光单元的空间上放上更多的小发光单元。
这种情况下，如果还是一个发光单元对应一个代码中的像素，会导致绘制的图形变小，远看看不清楚。
怎么办，我们的方案是 用多个发光单元表示一个代码中的像素。比如 Mac 的视网膜（Retina）屏幕，会将独立像素宽高乘以 2，映射到 4 个发光单元上。
但不一定会将多个点设置相同的颜色，而是会在一些情况下做抗锯齿处理，所以在高分屏中会发现锯齿少了，看起来高清多了，但也会让原本就是想要锯齿状的边缘变得光滑。
devicePixelRatio

devicePixelRatio （通常我们用 dpr 变量名）是设备像素比，指的是当前显示设备的物理像素分辨率与CSS 像素分辨率之比。
这个定义有点抽象，其实就是前文我说的那些。对于 Mac 的视网膜（Retina）屏幕，它的 devicePixelRatio 是 2，也就是将一个 CSS 像素宽高各乘以 2，绘制到屏幕的 4 个发光单元上。

我们可以通过 window.devicePixelRatio 拿到浏览器所在屏幕的设备像素比。
Canvas 的处理

Canvas 绘制的像素（比如线条），在高分屏中，会因为绘制成 4 个点（即发光单元），变得更粗，此外也会因为抗锯齿处理造成模糊。
在 IOS App 的 UI 设计中，有一种 @2x，@3x 图的概念。就是将图片放大 2 倍和 3 倍进行设计，然后渲染时尺寸指定回原来的尺寸进行绘制。
这样屏幕渲染时能拿到更多的像素细节，做到一个像素对应一个发光单元，不是基于一个 1x1 的像素，去放大为 2x2 或 3x3，而丢失细节。
Canvas 本质也是一张图片，它的 width 和 height 属性代表该图片的原始宽高， style.width 和 style.height 则是实际渲染宽高。
所以解决方法是，将 Canvas 原始宽高设置为容器宽度的 devicePixelRatio 倍，然后再用 style.width 和 style.height 设置为容器宽高。
然后 Canvas 在绘制图形前，将缩水的 Canvas 通过缩放变形恢复原来的尺寸。
const dpr = window.devicePixelRatio || 1;
const cw = 1000; // 容器宽高，画布会铺满这个容器区域。
const ch = 1000;

/*** 设置画布属性 ***/
canvas.width = cw * dpr;
canvas.height = ch * dpr;

canvas.style.width = cw + &#39;px&#39;;
canvas.style.height = ch + &#39;px&#39;;

/*** 绘制 ***/
// 因为 Canvas 的内容缩水了，所以绘制图形前要缩放 dpr 倍变回换来尺寸
ctx.scale(dpr, dpr);
// 绘制各种图形
结尾

总结一下，就是高分屏有更小的发光单元，一般情况下会用 2x2、3x3 个点去表示一个像素，一些情况下会让锯齿边缘变得光滑，但也可能会让清晰的线条的边缘变得模糊。
对于图片和 Canvas，可以扩大对应的 devicePixelRatio 倍数，然后再缩放为页面中容器的大小，这样显示器就能拿到完整的像素信息了，就不会应为放大而失真。
我是前端西瓜哥，欢迎关注我，学习更多前端知识。

		自动登录	找回密码
密码			立即注册

图形编辑器：适配高分辨率屏幕

本帖子中包含更多资源