Image size vs sourceSize 奇怪的东西答案

【问题标题】：Image size vs sourceSize strange thingsImage size vs sourceSize 奇怪的东西
【发布时间】：2021-03-27 08:57:46
【问题描述】：

在 Retina 显示器下，我们遇到了一个奇怪的图像模糊问题。图像的左侧部分 - 之前，右侧 - 修复之后。

我们的 QML 代码使用此代码显示图像：

Image {
        anchors.verticalCenter: parent.verticalCenter
        sourceSize.width: 25
        sourceSize.height: 25
        source: preview.url
    }

我尝试将sourceSize 乘以Screen.devicePixelRatio - 图像变得更大，因此它们不适合它们的位置。

然后我将sourceSize.width 替换为width，height 也是如此。所以：

Image {
        anchors.verticalCenter: parent.verticalCenter
        width: 25
        height: 25
        source: preview.url
    }

现在可以正常使用了。

我的问题是：

是否需要将sourceSize 乘以devicePixelRatio？还是自动管理？似乎它是为 PNG 自动管理的，而不是为 SVG 管理的。
如果它已经为 PNG 自动管理（这些图像 preview.url 是 PNG），那么为什么它会变得模糊？原始 PNG 图像的大小为 64x64 像素。
为什么我将sourceSize 乘以devicePixelRatio 后图像变大了？

补充 #1。我在图像的 URL 中使用 data:// 方案。即

QString url("data:");
url += imageMimeType;
url += ";base64,";
url += imageData.toBase64();

【问题讨论】：

标签： qt qml qtquickcontrols2

【解决方案1】：

虽然提到了我给你的另一个答案here，但我对 Qt 代码的理解是，除了here 描述的情况之外，Qt 并没有缩放该值。所以我的理解似乎与你在 1 中所说的相反。是什么证据导致你做出这种说法？

假设这个概念是正确的（我可能不正确），第 2 点的原因是 Qt 正在加载适合 1x 缩放的大小。但是对于更高的因素，会有质量损失。如果您在视网膜上，那么您应该调整该值，或提供@2x 版本。

至于第3点，原因可能在文档中：“如果未指定宽度和高度属性，则图像会自动使用加载图像的大小”。因此，如果将加载图像的大小加倍，则元素的大小也会加倍，因为您没有明确设置宽度和高度。

设置宽度和高度可以解决问题，因为图像是按全尺寸加载的，因此缩放后可以以适当的质量绘制。

如果我对Qt代码的理解有误，希望其他人能纠正我。

【讨论】：