[译] 绘制路径：Android 中矢量图渲染

android:tint=“?attr/colorControlNormal”>

虽然你可以使用它来采取静态着色，但它在与主题属性组合时更有用。这允许您根据引入的主题更改整个资源文件的颜色。例如，你可以使用 ?attr/colorControlNormal，它定义了图标的标准颜色，并在明暗主题之间变化。这样你就可以在不同主题的屏幕上使用一个图标：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-45ZcHfBx-1650873724034)(https://user-gold-cdn.xitu.io/2019/2/27/1692c9082ab0d820?imageView2/0/w/1280/h/960/ignore-error/1)]

在明/暗屏幕上对图标进行着色，使其具有适当的颜色

使用着色的一个好处是，你不需要依赖于你的资源文件(通常来自你的设计师)是正确的颜色。对图标使用 ?attr/colorControlNormal 属性既能主题化，又能保证资源文件的颜色完全相同、正确。

tintMode 属性允许你更改用于着色绘制的混合模式，它支持：add、multiply、screen、src_atop、src_over或src_in；对应于类似的 [PorterDuff.Mode](()。通常你使用的默认属性是 src_in，它将图像作为 alpha 蒙版应用于整个图标，忽略单个路径中的任何颜色信息（尽管 alpha 通道是维护的）。因此，如果你打算给图标着色，那么最好使用完全不透明的填充/描边颜色（惯例是使用 #fff）。

你可能想知道什么时候为资源着色？什么时候在单独的路径上使用主题颜色？因为这两种颜色都可以获得类似的结果。如果你只想在某些路径上使用主题颜色，那么必须直接使用它们。另一个需要考虑的问题是，你的资源是否具有重叠渲染。如果是这样的话，那么用半透明的主题颜色填充可能不会产生你想要的效果，但应用着色模式可能达到这种效果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fr9RoteZ-1650873724035)(https://user-gold-cdn.xitu.io/2019/2/27/1692c9082a170a56?imageView2/0/w/1280/h/960/ignore-error/1)]

具有重叠路径和半透明主题颜色的资源:比较着色和填充模式

请注意，你可以通过设置 android:theme 属性，在Activity/View 级别改变可绘制对象的主题，或者在代码中使用 [ContextThemeWrapper](() 设置一个特定的主题来 [填充](() 这个矢量图形。

/* Copyright 2018 Google LLC.
SPDX-License-Identifier: Apache-2.0 */
val themedContext = ContextThemeWrapper(context, R.style.baz)
val drawable = AppCompatResources.getDrawable(themedContext, R.drawable.vector)

覆盖主题 baz

颜色状态列表

对于 填充/描边，VectorDrawable 支持 [ColorStateLists](() 的引用。通过这种方式，你可以创建一个单独的绘图，其中路径根据视图/绘图的状态（如按下、选择、激活等）来改变颜色。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GjdovwM4-1650873724035)(https://user-gold-cdn.xitu.io/2019/2/27/1692c9082f401828?imageslim)]

矢量图形对按下和选择的状态作出响应的例子

这是在 API24 中引入的，但最近添加到 AndroidX 中，从 1.0.0 版本也支持 API14。这也使用了 [AndroidX 颜色状态列表填充](()，这意味着你也可以在 ColorStateList 中使用主题属性和 alpha（它们本身只在 API23 中被添加到平台中）。

虽然在 StateListDrawable 中使用多个可绘制对象也可以获得类似的结果，但是如果状态之间的呈现差异很小，则可以减少重复，并且更容易维护。

我也非常喜欢为自定义视图创建自己的状态，这些视图可以与此支持结合使用，以控制资源中的元素，例如在某个特定状态触发之前将路径设为透明。

渐变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zu5jpJ8v-1650873724036)(https://user-gold-cdn.xitu.io/2019/2/27/1692c908295e8858?imageView2/0/w/1280/h/960/ignore-error/1)]

支持 3 种类型的渐变

VectorDrawable 支持线性、径向和扫描（也称为角）渐变的填充和描边。在 AndroidX 包往前可支持到 API4 版本。渐变是在它们自己的文件中以 res/colors/ 的形式声明的，但是我们可以使用 [内嵌资源技术](() 来代替在矢量图形中声明的渐变，这样更方便：

在构建时，渐变被提取到它自己的资源中，并在父元素中插入对它的引用。如果要多次使用相同的渐变，最好声明一次并引用它，因为内联版本每次都会创建一个新资源。

当指定渐变时，任何坐标都位于根矢量元素的视觉空间中。让我们看看每一种渐变，以及如何使用它们。

线性

线性渐变必须指定 开始/结束的 X/Y 坐标和 type="linear"。

径向

径向渐变必须指定一个中心点 X/Y 的坐标和一个半径（同样在视觉坐标中），以及 type="radial"。

扫描

扫描渐变必须指定一个中心点坐标 X/ Y和 type="sweep"。

起止颜色

渐变的使用很方便，你可以直接在渐变中指定一个 startColor、centerColor 和 endColor。如果你需要更细粒度的控制它或者设置更多起止颜色，你也可以通过添加指定了 color 和 [0–1] offset（可以把这个看成控制渐变程度的百分比）的子 item 来实现。

平铺模式

线性和径向(不是扫描)渐变提供了平铺的概念——也就是说，如果渐变没有覆盖它填充/描边的整个路径，那么应该怎么做。默认值是 clamp, 它只是延续开始/结束的颜色。或者你可以指定 repeat 或者 mirror 平铺模式，这些模式……正如它们的名称所暗示的那样!在以下示例中,定义了一个径向渐变：中心蓝色 → 紫色圆形，但充满更大的正方形路径。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aQIuGobY-1650873724036)(https://user-gold-cdn.xitu.io/2019/2/27/1692c908952568fa?imageView2/0/w/1280/h/960/ignore-error/1)]

渐变平铺模式

模式

我们可以结合使用起止颜色和平铺模式来实现矢量图形中的基本模式支持。例如，如果指定了一致的起止颜色，就可以实现突然的颜色更改。将其与重复的平铺模式结合起来，就可以创建条纹模式。[例如](() 这是一个由单个模式的填充形状组成的加载指示器。通过在持有此模式的 group 上动画化 translateX 属性，我们可以实现以下效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HeyCjMJJ-1650873724037)(https://user-gold-cdn.xitu.io/2019/2/27/1692c90892879940?imageslim)]

注意，这种技术与完整的 [SVG 模式](() 支持相去甚远，但它可能很有用。

插图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-900qtFaq-1650873724037)(https://user-gold-cdn.xitu.io/2019/2/27/1692c9089ff4e242?imageView2/0/w/1280/h/960/ignore-error/1)]

另一幅由非常有才华的 [Virginia Poltrack](() 绘制的可爱插图

渐变在像插图这样的大型矢量图形中非常常见。矢量图非常适合插图，但是在放大时要注意内存的权衡。我们将在本系列的后面讨论这个问题。

阴影

用。

插图

[外链图片转存中…(img-900qtFaq-1650873724037)]

另一幅由非常有才华的 [Virginia Poltrack](() 绘制的可爱插图

渐变在像插图这样的大型矢量图形中非常常见。矢量图非常适合插图，但是在放大时要注意内存的权衡。我们将在本系列的后面讨论这个问题。

阴影