Android vector Path Data画图详解

  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文件中:

android:viewportHeight="24.0" android:viewportWidth="24.0"> 是声明的画布大小。

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

  • M:move to 移动绘制点,作用相当于把画笔落在哪一点。
  • L:line to 直线,就是一条直线,注意,只是直线,直线是没有宽度的,所以你什么也看不到。
  • 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为顺

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

这是前辈留下的图:

时间: 2024-10-07 04:17:26

Android vector Path Data画图详解的相关文章

Android高效率编码-第三方SDK详解系列(三)——JPush推送牵扯出来的江湖恩怨,XMPP实现推送,自定义客户端推送

Android高效率编码-第三方SDK详解系列(三)--JPush推送牵扯出来的江湖恩怨,XMPP实现推送,自定义客户端推送 很久没有更新第三方SDK这个系列了,所以更新一下这几天工作中使用到的推送,写这个系列真的很要命,你要去把他们的API文档大致的翻阅一遍,而且各种功能都实现一遍,解决各种bug各种坑,不得不说,极光推送真坑,大家使用还是要慎重,我们看一下极光推送的官网 https://www.jpush.cn/common/ 推送比较使用,很多软件有需要,所以在这个点拿出来多讲讲,我们本节

Android开发之SQLite数据库详解

Android开发之SQLite数据库详解 请尊重他人的劳动成果,转载请注明出处:Android开发之SQLite数据库详解 http://blog.csdn.net/fengyuzhengfan/article/details/40194393 Android系统集成了一个轻量级的数据库:SQLite, SQLite并不想成为像Oracle.MySQL那样的专业数据库.SQLite只是一个嵌入式的数据库引擎,专门适用于资源有限的设备上(如手机.PDA等)适量数据存取. 虽然SQLite支持绝大

Android Environment类的接口详解

Android应用开发中,常使用Environment类去获取外部存储目录,在访问外部存储之前一定要先判断外部存储是否已经是可使用(已挂载&可使用)状态, 并且需要在AndroidManifest.xml文件中添加外部存储读和写的权限. Environment类中提供了几个静态常量用于标识外部存储的状态,这些状态都是String类型 MEDIA_BAD_REMOVAL 在没有挂载前存储媒体已经被移除. MEDIA_CHECKING 正在检查存储媒体. MEDIA_MOUNTED 存储媒体已经挂载

Android开发之SoundPool使用详解

使用SoundPool播放音效 如果应用程序经常播放密集.急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了.因为MediaPlayer存在如下缺点: 1)         延时时间较长,且资源占用率高. 2)         不支持多个音频同时播放. Android中除了MediaPlayer播放音频之外还提供了SoundPool来播放音效,SoundPool使用音效池的概念来管理多个短促的音效,例如它可以开始就加载20个音效,以后在程序中按音效的ID进行播放.

Android开发之MediaRecorder类详解

MediaRecorder类详解 手机一般都有麦克风和摄像头,而Android系统就可以利用这些硬件来录制音视频了. 为了增加对录制音视频的支持,Android系统提供了一个MediaRecorder的类.该类的使用也非常简单,下面让我们来了解一下这个类: 一.类结构: java.lang.Object    ? android.media.MediaRecorder 二.类概述: 用于录制音频和视频的一个类. 三.状态图: 说明: 与MediaPlayer类非常相似MediaRecorder也

Android 数据加密算法 Des,Base64详解

一,DES加密: 首先网上搜索了一个DES加密算法工具类: import java.security.*;import javax.crypto.*; public class DesHelper { private static String strDefaultKey = "national";          private Cipher encryptCipher = null;          private Cipher decryptCipher = null;  

Android之Http通信——2.详解Http的消息头与响应头

Android之Http通信--2.详解Http的消息头 --转载请注明出处:coder-pig,请勿用于商业用途~ 本节引言: 在上一节中我们对HTTP的一些概念性的东西进行了了解:什么是HTTP协议,1.0版本与1.1版本的区别, SYN和ACK,TCP/IP三次握手,HTTP操作流程,几种不同的请求方式,HTTP的状态吗, 以及HTTP协议的特点,最后还了解了下OSI七层协议与TCP四层模型,相信大家对HTTP已经有了 简单的了解,本节我们来扣HTTP的消息头以及响应头,好了,开始本节内容

Android的file文件操作详解

Android的file文件操作详解 android的文件操作要有权限: 判断SD卡是否插入 Environment.getExternalStorageState().equals( android.os.Environment.MEDIA_MOUNTED); 获得sd卡根目录 File skRoot = Environment.getExternalStorageDirectory(); 获得私有根目录 File fileRoot = Context.getFilesDir()+""

Android组件系列----Activity组件详解

[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3924567.html 联系方式:[email protected] [正文] 注:四大组件指的是应用组件:Activity.Service.BroadcastReceiver.ContentProvider:之前的控件指的是UI组件. 博文目录: 一.Activity简介 二.Activity的状