本文翻译自文章 《Of vectors and scalable things.》，个人的英文水平有限，所以只是大致的翻译，欢迎各位批评改正。同时感谢原作者的文章。
我是封面
移动
为了完成我们最初的目标，今天我们将谈论载体。
SVG 是我要启动这一系列帖子的一个主要的动机。 它是一个伟大的文件格式，它是我每天来创建我的所有图像的使用最多的格式……但是经常有关于可扩展 UI 和向量溢出的问题。有人会说“我们应该用向量来扩大事物”。为此，我通常会说“可扩展矢量图形是可扩展的，但你的屏幕不是”，它通常会如我希望地结束这种对话。
然而，上述声明只是部分正确的，而不是我们应该避免使用现成的矢量图作为 UI 资源的源图像格式的明确原因。
可扩展定义有点像是一时兴起
我们在过去的帖子中定义“可扩展”UI的方式是非常奇特的，我们倾向于以最适合我们的方式使用它，忽略了概念的不同含义之间的实际差异。像是一时兴起，我们的目标是我们想要的，但却不是真正的目标。这往往会导致在这方面很常见的混淆和误解，正是因为 SVG 中的可扩展部分是针对某种类型的引用概念，大多数时候并不是 UI 中需要的可扩展类型。
那么可扩展矢量图形的可扩展性意味着什么？
形成SVG或任何其他主要矢量格式（主要是）关于路径及其控制点（Bézier曲线）的数学信息，其视觉尺寸仅与其所在画布的渲染大小相关，因此我们可以几乎无限放大图像，永远不会看到像素。（对于给定的视图区域，像素被渲染，并且相应地改变该区域中的向量的部分）。这使它成为一种很好的格式来将图像缩放到真正巨大的格式。缩放为40000×40000像素的图像将看起来与原始在1000×1000中呈现的图像完全相同。现在我们可以看到，这往往不是我们想要的可扩展类型：
- 首先，我们如果想要在X和Y轴上独立可扩展元素（例如上一篇中的可缩放的圆角矩形），对于这种情况我们将需要像 Borderimage 组件的东西；
- 其次，当我们缩小许多元素成为子像素，并且仍然存在难以看清。例如，在地图中，我们可能需要根据缩放级别呈现不同的效果，例如使道路消失/出现在缩小/放大时，以及简化路径本身的方面；
- 第三，它忽略像素，因为我们提到的像素仍然非常重要，在较低清晰度的屏幕中，我们可以利用像素创建鲜明的对比度，这使您的视觉元素溢出背景。然而，SVG 在其对路径位置的大部分完美的数学描述中完全忽略了渲染网格，并且因此可以产生通过像素的小数离开像素网格的不清晰元素。（这只是在与像素网格配置对齐的矩形元素中是有问题的，但我们将其用作设计的优点）。
QML 中的 SVG
您现在可以在QML中使用SVG作为源格式，但是注意，除非你告诉它，否则它不会重新渲染，结果将是，如果我们缩放或者改变宽高时你将最终看到像素。您可以创建更大的渲染，这些渲染将提供更加可缩放的更高定义，但是花费更多时间来渲染它并为缓存的图像占用大量内存。SVG也可以非常复杂，我创建了SVG需要花费几个小时来渲染我过去的KDE的许多壁纸都是以轮廓模式完成的，我只会偶尔用过滤器和颜色来看它们，我确实有一个强大的桌面使那些正常运行；但是在手机上尝试类似的东西不是一个好主意。QT中的SVG支持是有限的，许多事情将无法正常工作，过滤器大多不工作，所以如果您希望基于模糊的阴影工作，则看起来会发生巨大变化，您将不会看到这些，对于multiply滤镜、透明度等也是如此……所以，简而言之，不要使用SVG作为基本源图像，除非你知道它的局限性和它的工作原理，如果你明白它的局限性和优势，这是一个很好的格式，有时在 QML 中也是有用的。
其他矢量格式呢？ 比如说字体？
有一种我们一直使用的特殊矢量格式，也是可扩展的，它的格式已经在多年前解决了这个问题 —— 字体。
字体是特殊类型的单色矢量路径，可以有特殊的提示来满足像素可扩展性问题。 它通过2种方法来实现：
- 字体提示——（也称为指示）是使用数学指令来调整字体的视觉外观，使其与虚拟网格对齐。
- 字体字距——在相对x方向移动字形，以获得更令人愉悦的视觉效果，有时可帮助网格对齐问题...
处理效果
所有这些变化都是由您的本地字体渲染引擎完成的，这些操作的完成程度取决于您的本地字体渲染定义...
现在，从引入QML 2以来，字体的渲染方式已经改变了，默认情况下，字体提示被忽略。因此，如果您通过动画化像素大小来缩放字体，您将获得一个很好的平滑缩放效果，但是由于它们没有被暗示，所以在字体周围稍微更加模糊。 QML 允许您通过执行本机查看的字体。
Text {
text: "Native here!"
renderType: Text.NativeRendering
}
如果你尝试在这里做一个缩放效果，通过动画的像素大小，你会有一个“跳跃”的文字感觉，因为随着大小的增加，字体提示将继续努力将字体调整到适应不断变化的像素网格。此外，默认方法会在更改缩放比例时通过距离字段方法执行缩放：当使用本机渲染属性时，您会看到1：1比例的像素被缩放。默认使用的距离字段方法的另一个副作用是如果缩放/字体。尺寸非常大，您开始看到方法的不准确，这对您选择的任何字体大小有效，该方法基于字体从小图像生成距离字段字形，并且在缩放时不会更新。
字体属性设置效果
此外，如果字体格式不正确（字形边框小于字形本身），它可能会在某些边框区域中剪切字体，具有奇怪的视觉效果。
所以，我的建议是：如果你需要可读取的文本，你不想捏捏缩放或其他以动画方式更改字体大小的其他效果，请使用本机渲染。如果你想要一些动态的效果，您可以尝试一个折中的解决方案，当运行动画化时，您可以选择默认值，动画完成之后再将其转换为本机属性。在一天结束时，这主要是您认为最重要和更精细的问题。值得注意的是，在较高的 DPI 屏幕上，暗示指令失去了很大的重要性，因为像素大小和相应的子像素抗锯齿“灰度”变得相对于字体更小，相对不那么重要。对于非正方形像素，如许多（但不是全部）AMOLED屏幕也是如此。
下一篇文章！
下一篇文章将返回到使 X 和 Y 轴独立缩放元素与 DPI 属性值之间协调工作的主题……QML 中的缩放（5）：缩放内容
网友评论