Android vector标签 PathData 画图超详解

2018-10-28 11:16:09

 SVG是一种矢量图格式,是Scalable Vector Graphics三个单词的首字母缩写。在xml文件中的标签是<vector>,画出的图形可以像一般的图片资源使用,例子如下:

复制代码

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path        android:fillColor="#FF000000"
        android:pathData="M22,16V4c0,-1.1 -0.9,-2 -2,-2H8c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2zm-11,-4l2.03,2.71L16,11l4,5H8l3,-4zM2,6v14c0,1.1 0.9,2 2,2h14v-2H4V6H2z" /></vector>

复制代码

其所画出的图形为   

于此同时,android studio提供了丰富的图片资源,可以右键module,new->vector asset选择,如下:

是不是很羡慕这些酷酷的图形,当然自己也可以去动手去做。显而易见,上面例子的重点是在PathData里面的那一大窜数字:

android:pathData="M22,16V4c0,-1.1 -0.9,-2 -2,-2H8c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2zm-11,-4l2.03,2.71L16,11l4,5H8l3,-4zM2,6v14c0,1.1 0.9,2 2,2h14v-2H4V6H2z" />

 

xml文件中: 

共有三个标签,下面就是<path>部分:

先慢慢学习一些基本的语法:

  • M:move to 移动绘制点,作用相当于把画笔落在哪一点。

  • L:line to 直线,就是一条直线,注意,只是直线,直线是没有宽度的,所以你什么也看不到。

    android:strokeColor="#333330" android:strokeWidth="10" 设置颜色和线宽
  • Z:close 闭合,嗯,就是把图封闭起来。

  • C:cubic bezier 三次贝塞尔曲线

  • Q:quatratic bezier 二次贝塞尔曲线

  • A:ellipse 圆弧

每个命令都有大小写形式,大写代表后面的参数是绝对坐标,小写表示相对坐标,相对于上一个点的位置。参数之间用空格或逗号隔开。

命令详解:

  • M (x y) 把画笔移动到x,y,要准备在这个地方画图了。

  • L (x y) 直线连到x,y,还有简化命令H(x) 水平连接、V(y)垂直连接。

  • Z,没有参数,连接起点和终点

  • C(x1 y1 x2 y2 x y),控制点(x1,y1)( x2,y2),终点x,y 。

  • Q(x1 y1 x y),控制点(x1,y1),终点x,y

  • C和Q会在下文做简单对比。

  • A(rx ry x-axis-rotation large-arc-flag sweep-flag x y) 

  • android:pathData=" M50,50 a10,10 1,1 0 1,0" />
    rx ry 椭圆半径 
    x-axis-rotation x轴旋转角度 
    large-arc-flag 为0时表示取小弧度,1时取大弧度 (舍取的时候,是要长的还是短的)
    sweep-flag 0取逆时针方向,1取顺时针方向 

 

L的用法:

android:pathData=" M10,0 L10,40 40,40" /> 
把画笔放在(10,0)位置,连线10,40点 在连线40,40点。。。于是,一个直角三角形出来了~这里没有写z,没什么关系。
   

 Q和C的对比: 详细了解贝塞尔曲线:

http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html

Q
 android:pathData="M0,0 q30,90 80,20"/>   

 
控制点1,30,90 : 
控制点2,80,20  : 

C

android:pathData=" M0,0 c0,0 30,90 80,20" />
C 第一控制点(0,0) 第二控制点(30,90) 结束点(80,20) 或 c 第一控制点 第二控制点 结束点

现在修改第一个控制点:

android:pathData=" M0,0 c50,0 30,90 80,20" />


a:

这么多 数字,怎么看啊,可以直接拉到下面看作用。

android:pathData=" M50,50 a10,5 0,1 0 1,0" />
以50,50为起点,逆时针画
椭圆图形,x轴半径10,y轴半径5

 

转动x轴~~~

android:pathData=" M50,50 a10,5 90,1 0 1,0" />



我想要椭圆上半段,此处修改为x轴半径的两倍
android:pathData=" M50,50 a10,5 90,1 0 20,0" />
椭圆左半段
android:pathData=" M50,50 a10,5 90 1 0 0 10" />
椭圆右半段
android:pathData=" M50,50 a10,5 90 1 1 0 10" />

复制代码

<path    android:fillColor="#fff70000"  下
       android:pathData=" M50,50 a10,5 0 1 0 1 0" />
    <path        android:fillColor="#FFF22420" 上
        android:pathData=" M50,50 a10,5 0 1 1 1 0" />
    <path        android:fillColor="#fff57000"右
        android:pathData=" M50,50 a10,5 0 1 1 1 1" />
    <path        android:fillColor="#FF323243"左
        android:pathData=" M50,50 a10,5 0 1 0 0 1" />

复制代码

出现上面的情况可以想到是因为,起始点50,50在椭圆中的位置不同。那么,再修改一下。

    android:pathData=" M50,50 a10,5 0 1 1 0 7" />  修改了右边椭圆的代码
 现在取的是大弧度,所以看到这样的效果,如果 7改为10(也就是y轴半径的两倍)这刚好会在 一半的位置。

现在取小弧度看看,

android:pathData=" M50,50 a10,5 0 0 1 0 7" /> ,可以看到小弧度 顺时针画图。

再修改为逆时针,
android:pathData=" M50,50 a10,5 0 0 0 0 7" />

椭圆的属性 差不多讲解完成了,如下

android:pathData=" M50,50 a10,5 0 0 0 0 7" />

10,5 为椭圆x,y轴半径

第一个0 为 x轴旋转角度

第二个0 为取大小弧度,0为小,1为大

第三个0 为顺逆时针,0为逆1为顺

第四个0  为修改修改起始点在椭圆中的位置,y轴.

第四个 7 为修改修改起始点在椭圆中的位置,x轴。

这是前辈留下的图:


<path>里面还有哪些属性那?

  • android:name 定义该 path 的名字,这样在其他地方可以通过名字来引用这个路径

  • android:pathData 和 SVG 中 d 元素一样的路径信息。

  • android:fillColor 定义填充路径的颜色,如果没有定义则不填充路径

  • android:strokeColor 定义如何绘制路径边框,如果没有定义则不显示边框

  • android:strokeWidth 定义路径边框的粗细尺寸

  • android:strokeAlpha 定义路径边框的透明度

  • android:fillAlpha 定义填充路径颜色的透明度

  • android:trimPathStart 从路径起始位置截断路径的比率,取值范围从 0 到1

  • android:trimPathEnd 从路径结束位置截断路径的比率,取值范围从 0 到1

  • android:trimPathOffset 设置路径截取的范围 Shift trim region (allows showed region to include the start and end), in the range from 0 to 1.

  • android:strokeLineCap 设置路径线帽的形状,取值为 butt, round, square.

  • android:strokeLineJoin 设置路径交界处的连接方式,取值为 miter,round,bevel.

  • android:strokeMiterLimit 设置斜角的上限,Sets the Miter limit for a stroked path.

下面详细讲一下 android:strokeLineCap ,android:strokeLineJoin 两个属性

android:pathData="M200,200 l100,300        
               M300,200 l-100,300

再没有添加这两条属性前:

 

添加语句:android:strokeLineCap="round" 后可以看到有三个点改变了格式(左下角是图形结束点,并没有改变)

最后添加:android:strokeLineJoin="round" 左下角也做了改变,如下


这xml开始部分的代码是做什么的那? 

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">

先看看有哪些属性,

  • android:name 定义该drawable的名字

  • android:width 定义该 drawable 的内部(intrinsic)宽度,支持所有 Android 系统支持的尺寸,通常使用 dp

  • android:height 定义该 drawable 的内部(intrinsic)高度,支持所有 Android 系统支持的尺寸,通常使用 dp

  • android:viewportWidth 定义矢量图视图的宽度,视图就是矢量图 path 路径数据所绘制的虚拟画布

  • android:viewportHeight 定义矢量图视图的高度,视图就是矢量图 path 路径数据所绘制的虚拟画布

  • android:tint 定义该 drawable 的 tint 颜色。默认是没有 tint 颜色的

  • android:tintMode 定义 tint 颜色的 Porter-Duff blending 模式,默认值为 src_in

  • android:autoMirrored 设置当系统为 RTL (right-to-left) 布局的时候,是否自动镜像该图片。比如 阿拉伯语。

  • android:alpha 该图片的透明度属性


<group>里面可以定义多了<path>,这样可以方便管理多个<path>

  • android:name 定义 group 的名字

  • android:rotation 定义该 group 的路径旋转多少度,这样图片就被旋转了,注意写数字的时候别晕了。

  • android:pivotX 定义缩放和旋转该 group 时候的 X 参考点。该值相对于 vector 的 viewport 值来指定的。

  • android:pivotY 定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 vector 的 viewport 值来指定的。

  • android:scaleX 定义 X 轴的缩放倍数

  • android:scaleY 定义 Y 轴的缩放倍数

  • android:translateX 定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的。

  • android:translateY 定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的。


<clip-path>定义当前绘制的剪切路径,就是图像的一部分剪切下来。注意,clip-path 只对当前的 group 和子 group 有效。

<clip-path         android:pathData="M200,200 h200 v150 h-200 v-150"     />
原图为上面的 叉 ,剪切后为:

  • 2019-03-26 19:25:01

    Android studio 打包后安装闪退 Fatal Signal 6(SIGABRT)...

    项目上线前打包安装后闪退,查了很多原因,比如混淆文件的内容,第三方库不加入混淆等等,均未成功,后来关闭混淆打包后运行成功,原因可能是依赖工程中的库文件不能被混淆,关闭本工程混淆开关后,依赖工程的混淆开关也要关闭,关闭混淆后如果怕被反编译,可使用百度开发平台的app加固,加固的同时还能使用多渠道打包工具。

  • 2019-03-26 19:29:05

    Android NDK开发Crash错误定位

     在Android开发中,程序Crash分三种情况:未捕获的异常、ANR(Application Not Responding)和闪退(NDK引发错误)。其中未捕获的异常根据logcat打印的堆栈信息很容易定位错误。ANR错误也好查,Android规定,应用与用户进行交互时,如果5秒内没有响应用户的操作,则会引发ANR错误,并弹出一个系统提示框,让用户选择继续等待或立即关闭程序。并会在/data/anr目录下生成一个traces.txt文件,记录系统产生anr异常的堆栈和线程信息。如果是闪退,这问题比较难查, --------------------- 作者:xyang0917 来源:CSDN 原文:https://blog.csdn.net/xyang81/article/details/42319789 版权声明:本文为博主原创文章,转载请附上博文链接!

  • 2019-04-01 22:46:39

    电子签章的实施方案

    WORD/EXCEL签章模块,该部分实现与WORD/EXCEL的无缝结合,并提供给用户简单直观的菜单和工具条来实现文档签章验证等各种操作,其中,KHSC-64智能密码钥匙是签章模块中用户证书和图章的载体

  • 2019-04-01 22:48:25

    如何用 Java 对 PDF 文件进行电子签章

    印章是我国特有的历史文化产物,古代主要用作身份凭证和行驶职权的工具。它的起源是由于社会生活的实际需要。早在商周时代,印章就已经产生。如今的印章已成为一种独特的,融实用性和艺术性为一体的艺术瑰宝。传统的印章容易被坏人、小人私刻;从而新闻鲜有报道某某私刻公章,侵吞国家财产。随着计算机技术、加密技术及图像处理技术的发展,出现了电子签章。电子签章是电子签名的一种表现形式,利用图像处理技术、数字加密技术将电子签名操作转化为与纸质文件盖章操作相同的可视效果,同时利用电子签名技术保障电子信息的真实性和完整性以及签名人的不可否认性

  • 2019-04-01 22:59:22

    Android Studio 3.0 利用cmake搭建jni环境(很详细哦)

    我用的Android Studio是3.0的版本,然后想搭建一下jni的环境。这里把自己遇到的问题和注意点都记录下。 首先是需要在android studio里面安装最基本的环境。 打开Default Preference里面查看SDK Tool选项。

  • 2019-04-01 23:20:58

    隐藏在图片中的密钥

    在客户端开发的时候,有时需要把密钥保存在本地。这时就会遇到密钥安全性的问题。要保证密钥安全性,无非就是混淆、隐藏、白盒等手段。本文以隐藏在图片中来阐述密钥的安全保存。

  • 2019-04-01 23:22:33

    验证数字签名

    应预先设置验证首选项。在打开 PDF 后显示包含签名的验证详细信息时,这有助于确保数字签名有效。有关详细信息,请参阅设置签名验证首选项。

  • 2019-04-01 23:23:27

    图像隐写之使用PHP隐藏图像中的文本

    隐写术是一门研究隐藏信息的科学艺术,通过隐写术,可以只让发送者和接收者知道隐藏的信息。 图像隐写术则是研究将数据隐藏在图像中,通过该技术可以防止无关用户发现这些隐藏的信息或数据。