本文翻译自文章 《BorderImage is for Scaling! Scalable UIs 2.2.》，个人的英文水平有限，所以只是大致的翻译，欢迎各位批评改正。同时感谢原作者的文章。
在前面的文章中我们讨论了像素的重要性及其不可分割的特性，我们介绍了图标的处理方式，并介绍了 PPI 相关的 UI 的概念 —— 这些都可以用来在 QML 中进行图形的缩放。
我们使用 BorderImage 来说明一个元素如何在不同的屏幕 PPI 及其相应的屏幕定义的范围内缩放和保留相同的宽高比。
BorderImage 就是用于缩放的！
当我第一次进入Qt Quick和QML时，让我立即爱上了整个事物的一个元素就是 BorderImage 元素。它使得复杂的东西变得轻而易举，它挽救了作为设计师的我，因为它避免了我将图像预切成 9 个矩形元素的繁琐麻烦的工作，大大地简便了对那些已经处于“可交付”状态的 UI 效果进行一些细节上的小调整。即使在今天，随着我们又有了值得我们去喜欢的画布或着色器的等新事物，BorderImage 仍然是我在 QML 中最喜欢的元素。但是这可能还不够（真的还不够）。为了揭示
ppi 发生什么变化，我在假设的屏幕上创建了一个视频。使用与上一篇文章中所示相似的代码：
一个 BorderImage 组件，它包含在一个像素数增长的元素中，然后当缩放到原始大小时，模仿了灵活 dpi 计数屏幕的缩放外观……这是生成中央蓝色元素的代码：
BorderImage {
id: scalableElement2
source: "./Images/baseBImage.png"
width: parent.width-ppi/2
height: ppi*1.5
anchors.centerIn: parent
border.left: 27; border.top: 27
border.right: 16; border.bottom: 16
}
（注意，像素缩放显然不是像素完美的）
示例效果动效
如果浏览器不支持显示视频，请点击此处或者此处
所以你可以看到结果远非完美。尽管创建的元素保留了所需的总体大小，但它的外观随着像素数量的增长而发生了根本性的变化，角半径几乎变得没有变化，甚至在 90dpi 中的巨大阴影在假设的 570dpi 屏幕中过度完成后变得几乎看不见。
一个可行的解决方案
一个可能的和常用的解决方案是从我们缩放图标的方式中获得灵感：这意味着对 ppi 范围内使用多个源图像文件。而我们生成这些源图像的方式与我们为图标生成图像的方式非常相似。使用矢量绘图程序，我们将源图像缩放为多个尺度尺寸的元素，并将其渲染为光栅图像，png，jpeg等。
示例效果图
我们还可以以 ppi/inch 定义角/边框的大小。只要 ppi 大于角落像素的数量，我们将只是扩展边界线切割图像的位置。您只需要注意在这些区域留下足够的余量，以免渐变/纹理缩放问题可能变得太可见。请记住，边框图像的切片线将不会在精确定义的位置。
代码秀
现在展示的只是演示代码。有更好的方法是可以使用 Qt 中提供的组件来实现，下面的代码就只是试图揭露问题的逻辑，所以我选择了这个简单的方法。
.......
property var dir: ["MDPI","HDPI","XHDPI","XXHDPI",
"XXXHDPI","XXXXHDPI"]
readonly property int ppiRange:{
if (ppi>=540)
5
else if (ppi>=360)
4
else if (ppi>=270)
3
else if (ppi>=180)
2
else if (ppi>=135)
1
else
0
}
.......
......
BorderImage {
id: scalableElement3
source: "./Images/" + dir[ppiRange] + "/image.png"
width: parent.width-ppi/2
height: ppi*1.5
anchors.centerIn: parent
border.left: 0.3*ppi; border.top: 0.3*ppi
border.right: 0.18*ppi; border.bottom: 0.18*ppi
}
.......
我们可以看到这里有一个简单的方法来根据不同的 DPI 改变源目录，并通过 PPI 数来定义 BorderImage 的边界的位置......我生成所有的图像，并把它们放在了在方便映射的目录之中。在我看来这是一个好主意——它可以很容易地比较目录和寻找缺失的资源文件。
下面是一个显示当我们动态更改 ppi 时它的外观如何变化的视频。 再次记住，真正的东西会看起来更好，因为它不会缩放像素 —— 但它应该给你一个它是如何工作的好点子。
调整之后的动画效果
您可以看到结果现在好多了，图像保留了整个 ppi 范围内的全局外观。角落和影子大小仍然存在问题，特别是达到540 ppi区域时，如果您将目标设备仅略低于 540，则可能需要为该分段创建更多的资源。对于任何情况都是如此，我选择的值有些任意，并且是90 ppi理论屏幕的倍数。在现实生活中，您倾向于定位一组特定的设备，并可能希望使用那些设置您的图像资产定义边界的设备。只要注意每个范围的结束位置和另一个范围开始位置，确保我们不丢弃重要的视觉信息。
在下一篇文章中，我们将讨论更多特别的扩展方法，这些方法可能是有用的，具体取决于您要扩展的内容。 所以，敬请关注下篇文章QML 中的缩放（4）：矢量图和其它。
网友评论