了解有关Android的VectorDrawable的pathData

从翻译和编辑文章: medium.com作者 穆扎法尔·阿里

打开任何XML文件,你会看到在VectorDrawable属性一些神秘人物 pathData.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="#FF0000"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z" />
</vector>

那些谁与路径定期工作可以把它理解并解释给你知道画点什么. 这些谁没有做太多,这将是一个谜.

什么是VectorDrawable

VectorDrawable 在矢量的XML描述. 不同于其他流行的图像格式,例如位图, JPEG, GIF和PNG, 矢量没有质量损失时,他们被放大或缩小. 这使得使用图像质量或大小不同的是没有必要的, 所以帮你减少文件大小APK. 其实, VectorDrawables包含命令路径 (如何绘制线条和供应) 而像路径命令帆布工作时, 图纸和渲染VectorDrawables过程是耗时的和存储器, 这就是为什么VectorDrawable, 最适合用于简单的平面图形.

为什么必须理解这个命令? 我刚刚从SVG了?

如果你想创建VectorDrawable效果, 今天任何运动, 的要求之一是,你正在VectorDrawable效果?起点和终点必须有一个合理的命令. 而且, 你就会知道这些命令怎么做运动/改变动画. 当然还有理解命令的意思吗?PathData可以有很大的帮助,以创建自己的VectorDrawable,…

了解在pathData命令

我首先要说的是,即使你开始了解多少路径命令, 除非你是天才, 还有就是你能理解什么是极限. 矢量图形的程序确实不 “干净的代码” 易读?人类. 该文件后为SVG矢量图形通过创建的Android VectorDrawable影城通过, 他们变得紧凑,更具可读性, 然而, 我注意到,很多仍然可以指挥远远超过你所需要的更复杂. ?如果, 要了解圆弧和圆弧,只需要您有很多想象力或良好的数学能力?.

基本的

基本路径命令包含一个字母,后跟一个或多个数字. 数字通常用逗号分隔,但有时可以是空格. 例:

M100,100 L300,100 L200,300带
//要么
M 100 100 L 300 100 L 200 300 从
//要么
M1100,100L300,100L200,300z

字母可以是大写或小写. 大写表示绝对位置, 小写字母表示相对位置.

指令

M或m (X, 与) +

搬去: 将光标移到该位置, 大写字母是绝对的, 小写字母是相对的. Moveto命令后跟X坐标, 与. 根据M指令可以设置多个坐标, 他们被认为是命令 Lineto 隐含的.

Z或z

封闭路径: 从光标的当前位置到路径的起​​点画一条线. 没有附加任何参数.

L或l (X, 与) +

Lineto: 从当前位置到X指定的位置画一条线, 与. 大写表示绝对坐标, 小写字母表示相对坐标. lineto命令下可以有多组坐标. 如果要指定一组以上的坐标, 这意味着您可以创建一条折线 (许多连续的行).

H或h (X) +

水平线: 从当前光标位置到X指定的位置绘制一条水平线. 如果命令有多个X坐标, 这被认为是折线. Y坐标不变. 大写字母H是绝对坐标, 小写字母h是相对坐标.

V或v (与) +

垂直线: 从当前光标位置到Y指定的位置绘制一条垂直线. 如果按顺序有多个Y坐标, 这被认为是折线. X坐标不变. 大写V是绝对坐标, 小写字母v是相对坐标.

使用规定的基本命令, 让我们在上面的示例中解释命令:

M100,100 L300,100 L200,300带

M100,100: 将光标移到绝对坐标X = 100 Y = 100像素.
L300,100: 画一条线为X = 300 Y = 100 (起始位置是 100.100).
L200.300: 画一条线为X = 200 Y = 300 (起始位置是 300.100).
从: 关闭连结, 从当前位置画一条线到 100.100. 当您关闭路径时,您将从最后一个点画一条线到第一个点. 如果不需要关闭,例如在绘制加号时可以将其删除 (+).

如果我们将其放在简单的VectorDrawable XML文件的pathData中, 我们可以看到结果:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    <!-- intrinsic size of the drawable -->
        android:width="400px"
        android:height="400px"
    <!-- size of the virtual canvas -->
        android:viewportWidth="400.0"
        android:viewportHeight="400.0">
    <path
        android:fillColor="#0000FF"
        android:strokeColor="#FFFFFF"
        android:strokeWidth="4"
        android:pathData="M100,100 L300,100 L200,300 z"/>
</vector>

至此,您基本了解pathData并可以自己创建简单的VectorDrawable. 原始文章结尾处有一些示例 (请参阅顶部的链接) 你可以参考.