0

我在这里、这里、这里以及其他一些网站上看到了类似的问题。

我知道使用 xml 绘制形状，如下面的代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF"
        android:angle="270"/>
</shape>

但是，我在看这个教程的时候看到了一个代码，他们已经使用xml 来绘制一个航班。

我以为它是一个 png 文件，但后来我发现它是一个 XML 文件。下面是代码

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M10.18,9"/>
    <path
        android:fillColor="#FF000000"
        android:pathData="M21,16v-2l-8,-5V3.5c0,-0.83 -0.67,-1.5 -1.5,-1.5S10,2.67 10,3.5V9l-8,5v2l8,-2.5V19l-2,1.5V22l3.5,-1 3.5,1v-1.5L13,19v-5.5l8,2.5z"/>
</vector>

我只是想知道pathData及其内容是什么M21,16v-2l-8,-5V3.5c0...意思。

你能解释一下吗？

我的下一个疑问是，我怎么能这样编码

我们是否需要通过一些计算手动编码（通过指定每个像素位置）

或者

有没有什么技巧可以通过 png 图像来绘制形状。（我们上传 png 文件的任何在线转换器，它将以 XML 代码或任何其他方法的形式提供给我们）

问题的标题是否正确？我不知道那是什么方法。所以我简单地把如何绘制...... 如果我指定任何错误，请纠正我。

提前致谢 （：

4

2 回答 2

3

您正在查看的 XML 文件是 VectorDrawable。这是矢量图形文件格式的 Android 版本，与流行的 SVG 文件格式非常相似。

目前有两种主要方法可以创建 VectorDrawable。如果您了解它们的工作原理，您可以手动编写代码，但最常见的方法是转换 SVG 文件（现有文件或自己绘制新文件）。

制作 SVG

如果你想绘制 SVG，有很多工具可用，从昂贵到免费。例子：

转换成 VectorDrawable

您可以使用在线转换器svg2android但 Android Studio 现在有一个内置转换器。您可以通过右键单击 drawables 文件夹并选择 new > Vector Asset 来访问它，这使您可以从 Google 的 Material Design 图标或您自己的 SVG 文件中进行选择。

在此处输入图像描述

路径数据

VectorDrawable 的 pathData 基于 SVG 格式。有关完整说明，您可以在此处查看 SVG 文档。在您的示例M21,16v-2l-8,-5V3.5c0...中，这意味着： 移动到点 21,16 (M21,16) 在长度为 2 (v-2) 的上方画一条垂直线 在 5 处和左侧 8 处画一条直线对角线 (l-8,-5) 和很快。每个字母都开始一种新的命令类型。

从 png 转换

我从未尝试将 png 转换为矢量，所以我不能说它的效果如何。如果你想尝试一下，谷歌“将 png 转换为 svg”，一旦你有了你的 svg，你会再次转换为 Androids VectorDrawable 格式，如上所述。

于 2015-12-20T00:48:23.540 回答
1

这是 android 文档，其中包含有关您的问题的详细信息以及与此相关的一些额外内容。

https://developer.android.com/tools/help/vector-asset-studio.html

但请记住，目前vectorAPI 级别 21 或更高级别支持一件事。

于 2015-12-19T10:07:02.163 回答