问题标签 [devicepixelratio]

我正在尝试通过将每个图像转换为位图来将分辨率感知图像标记添加到谷歌地图：

我从颤振文档中遵循了这种格式：

.../pinLocationIcons/house.png
.../pinLocationIcons/2.0x/house.png
.../pinLocationIcons/3.0x/house.png
...等。

它似乎不适用于android和ios。在我的 yaml 文件中，我尝试仅声明“.../image.png”并专门声明变体的每个目录/文件。但是，它继续使用 1x 图像。

我尝试像这样命名文件：

.../pinLocationIcons/house.png
.../pinLocationIcons/house@2x.png
.../pinLocationIcons/house@3x.png
...等。

这现在适用于 ios，但始终对 android 使用 1x 图像。我是否缺少一些可以使其同时适用于 ios 和 android 的东西？我的配置有问题吗？

我遇到了这样的问题，像素不完整，你可以在页面上看到它。正因为如此，我不能正常做像素完美。

图像 1 不正确 - html 元素属性。宽度 345.2 像素/高度 204.8 像素。 图 2 对 - html 元素属性。宽度 345 像素/高度 204 像素。

在另一台 PC 上，当在 devtools 中查看手机时，devicePixelRatio 是整数“2”，那里一切正常，像素是完整的。

上下文：我window.devicePixelRatio用来确定网站上一些画布的显示分辨率。

据我所知，在网站上放大和缩小时，DPR 值应该会发生变化。这就是在 Chrome 上发生的事情。但它似乎并没有在 Safari 中发生。无论我放大或缩小多少，在 JS 控制台window.devicePixelRatio或从 JS 控制台查询值总是返回相同的值。devicePixelRatio我已经在三台不同的计算机上进行了尝试，它们都是运行 Safari v13.1.2、v14.1.2 或 v15.1 的 Mac。

上的MDN Web Docs 页面暗示Window.devicePixelRatioDPR应在缩放时更改，无论是在其顶部的定义中还是在其示例代码中。MDN 链接的规范说明如下（粗体强调我的）：

devicePixelRatio属性必须返回以下确定设备像素比率算法的结果： 如果没有输出设备，则返回 1 并中止这些步骤。让CSS 像素大小为当前页面缩放比例因子和捏缩放比例因子 1.0 处的 CSS 像素大小。设设备像素大小为输出设备的设备像素的垂直大小。返回CSS 像素大小除以设备像素大小的结果。

Safari 是否window.devicePixelRatio应该改变缩放？如果 DPR 不随缩放而改变，是否有不同的方法来确定 Safari 上的良好画布显示分辨率？

这是我在 StackOverflow 上的第一个问题，所以如果有什么可以改进的，请告诉我。

<canvas/>当用户动态调整其大小时，我遇到了使我的 HTML呈现清晰的问题。我的意思是，用户可以使用两个按钮随意调整画布的大小。

从图像中可以看出，网格线是模糊的。我非常熟悉缩放 HTML 画布上下文以补偿模糊的各种方法（使用 DPR 缩放并仅从“pixel.5”点绘制等，更多内容见下文）。但是，我无法弄清楚为什么它在我的特定情况下不起作用。

这是完整的代码：

• https://codesandbox.io/s/blurry-canvas-mcltr?file=/src/components/canvas.jsx

以下是我尝试过的一些注释以及有关我的系统设置方式的更多详细信息：

1. 为了补偿画布通过缩放变得越来越小，我在缩放时缩放 dpr 值本身。这实际上有一个积极的影响，因为它使网格数字 (1,2,3,4,5,6,7,8,9) 在使用缩放功能时渲染得更好。如果您只有机器的原始 dpr（您可以通过取消注释updateDPR()函数中的中间内容并使用缩放按钮在代码框中自行检查），画布网格的渲染效果会稍微好一些，但在缩放时整个画布的缩放比例要差得多。

2. 画布本身嵌入在容器 div 中：

我实现画布缩放效果的方式其实就是 <div ref={containerRef}>通过canvasWidth状态来调整大小。这使我可以<canvas/>更自由地操纵大小，同时确保它始终在容器中保留某个“固定”大小。你可以在这里更仔细地检查它：

3. 正如上面简要提到的，我使用一种方法来确保每条网格线都以小数点像素点开始和结束。更具体地说，在“.5”位置。

我不知道这是否有任何特殊效果，但它似乎确实会影响渲染质量。您可以在下面链接的“diveintohtml5.info/canvas.html”页面上阅读更多相关信息。

4. 在主渲染逻辑中，我将canvas.heightand设置canvas.width为它们各自的 dpr 缩放值。这显然是每个人在使用 dpr 缩放值时为使画布正确渲染所做的事情。但是，如果我ctx.scale(newDpr, newDpr)按照我应该使用的方式使用 ，那么画布会从其容器中吹出。这是不寻常的，因为设置上面的canvas.height和 ```canvas.width`` 应该可以解决这个问题。因此，我怀疑我在容器 div 中渲染画布的方式有些可疑（在第 nr.2 点中提到）。但是，我无法弄清楚是什么..

我一直在尝试解决这个问题很长时间，但没有成功，因为有这么多活动部件，可以这么说。希望那里的其他人有一些见解可以与我分享。

有用的链接：

• http://diveintohtml5.info/canvas.html
• https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
• https://www.html5rocks.com/en/tutorials/canvas/hidpi/
• https://egghead.io/lessons/react-scale-pixels-for-the-canvas-with-devicepixelratio-in-react