掌握矢量图生成秘诀：一步一步指南 (矢量图的生成原理)

矢量图是基于数学方程而不是像素创建的数字图像。这意味着它们可以无损放大或缩小，而不会出现失真或锯齿状边缘。矢量图是用于徽标、图标、插图和图形设计的理想选择。

在本文中，我们将向你展示如何使用 Adobe Illustrator 创建矢量图。我们将介绍矢量图的生成原理、不同的矢量图工具以及如何使用这些工具创建基本形状、曲线和文本。

矢量图的生成原理

矢量图是由一系列线条和曲线组成的。这些线条和曲线称为路径。路径由锚点和控制手柄定义。锚点是路径上的固定点，控制手柄用于调整路径的形状。

当移动锚点或控制手柄时，Illustrator 会重新计算路径的方程。这确保了路径始终是光滑的，不会出现锯齿状边缘。

矢量图工具

Illustrator 中有各种矢量图工具，用于创建不同的形状、曲线和文本。最常用的工具包括：

• 钢笔工具：用于绘制自定义路径。

矢量图怎么做

在动画制作软件Flash中输出的也是矢量图，动态的矢量作品。 对于矢量图制作软件的对比，位置的方式已经不适用，稍稍作些修改。 (一)CorelDrawCorelDRAW 是最权威的矢量图制作软件，也是功能最强大的矢量图制作软件。 现在发行的最新版本是10.0，它将矢量插图 、版面设计 、位图编辑 、图像编辑及绘图工具等多种功能合为一体，全面满足你做图的需要。 （二）Illustrator每一个懂得电脑的人，面对Adobe公司庞大的软件优势，都不得不赞叹，也不得不佩服！无论位图还是矢量图，无论影视还是网页处理，它一一涉及，它也一一占据着重要的位置。 Illustrator－－矢量图的制作，Adobe公司撑起这片市场的软件。 （三）Freehand对于不追求制作复杂眩耀的效果来说，Freehand是一个非常不错的选择，因为在同行的软件中，它性价别最高。 矢量图基本的制作它完全可以满足。 补充： 1.在Flash中导入这张Gif图片，然后选择“修改”菜单下的“转换位图为矢量图”命令（图1）。 2.在转换之前根据所需要的效果来设置“颜色阀值”、“最小区域”、“曲线拟合”、“角阀值”（图2）。 （1）颜色阀值参数范围：1-500。 它的作用是在两个像素相比时，颜色差低于设定的颜色阀值，则两个像素被认为是相同的。 阀值越大转换后的矢量图的颜色减少。 （2）最小区域：参数范围：1-1000。 它的作用是在指定的像素颜色时需要考虑周围的像素数量，最小区域是的跟踪位图平均不同的颜色值。 （3）曲线拟合：参数范围：像素－－非常平滑,它是决定生成的矢量图的轮廓和区域的粘合程度。 图4（4）角阀值：参数范围：较多转角－－较少转角（图4）。 它是决定生成的矢量图中保留锐利边缘还是平滑处理。 一般由位图转换生成的矢量图文件大小要缩小，如果原始的位图形状复杂、颜色较多则可能生成的矢量图的大小要增加。

怎样制作矢量图？

1、打开Photoshop软件，将需做矢量图的logo添加进来，并复制图层。

2、观察图形，我们先从外侧圆入手，外侧圆比较规整，用“快速选择”等方法的话效果不好，我们可以用“椭圆工具”来做，按住shift先拉出一个差不多大小的圆，然后“Ctrl T”调整到外圆尺寸，做好后按确定应用变换。

3、画圆的内侧，注意“路径操作”是“新建图层”，一个路径对应一个图层，制作方法同上一个步骤，完成后按回车确定。

4、接下来是内部头像，可以先用“快速选择”选取到大概形貌。首先点选背景层，选择适当的笔头大小进行快选，然后切到“路径”，在下方点击“从选区生成工作路径”。

5、按“Ctrl +”放大图像，我们发现眼睫毛部分的选取不好，此时我们需要用钢笔工具进行微调，先添加适量锚点，然后用直接选择工具将锚点移动到恰当位置，越多的锚点安置，所做选区的效果越好，然后用转换点工具进行微调。

6、点“路径”面板选中工作路径，然后点“工具”（包含矩形工具、椭圆工具等的那个工具选项，在此感谢一位细心读者的提示）调出左上窗口，

点选“形状”可生成该路径的形状图层。复制其中一个形状图层，然后将另外两个粘贴进来，将大圆置底层，头像置顶层，头像和小圆设置“排除重叠形状”（涉及形状图层计算不细述）。

7、做好如上步骤后，就可将路径导出了，点“路径”面板，然后点击“文件”→“导出”→“路径到Illustrator”，将生成的路径导出到自选的文件夹，后续编辑可在ai或cdr中进行。

注意事项：

1、运用钢笔工具做选区时要有耐心，慢工出细活；

2、注意路径操作和路径的排列方式；

3、注意生成文件的导出方法。

安卓开发中矢量图的绘制及动画

矢量图也称为面向对象的图像或绘图图像，是根据几何特性来绘制的图形，在安卓开发中可以使用失量图代替原来的图片资源，矢量图具有占用空间小和可以随意缩放但不失真的优势，在我的多个项目中都有运用。

通过学习和实践，我总结了一些与矢量图相关的知识，方便今后更好的使用矢量图，同时也可以供大家查阅参考。

绘制矢量图之前需要先定义画布的宽高，后续的绘制效果都展示在这个画布上。在绘制过程中需要输入的坐标就是这个画布上的点。

安卓的矢量图常见于 drawable 文件夹下，是一个xml文件，由 vector 标签包裹，在 vector 标签中可包含多个 path 标签，依次叠加显示。

在矢量图中最重要的就是 path 属性，图像的样式就是由 path 属性中的数据绘制而成，这些数据由不同的命令组合而成，下面就介绍一些矢量图的绘制命令。

将前面的命令示例连接起来就可以生成一个完整的图像，它大概长这个样子：

画布的尺寸为500x500，图上的顶点是200,10的位置，也是我们开始作图的起点。通过这个图片可以更好的理解每一个绘图命令。

安卓中可以为矢量图添加动画效果，这样用户就可以看到一个动的图片，可以一定程度的提高app的交互效果。矢量图动画是图形内部的变化，可以做到View动画无法实现的效果。

这种动画针对的是矢量图中 path 字段的值，通过连续改变 path 字段的值而达到产生动画的效果。

注：pathData动画所需的AnimatedVectorDrawable最低要求API等级为25

实现一个矢量图动画需要以下几步： 1. 准备起始状态和结束状态的矢量图两张。 2. 创建动画配置文件。 3. 创建动画矢量图文件。 4. 启动动画。

基于这种要求，我准备了两个矢量图：

控制动画运行的是一个 objectAnimator ，此处把 objectAnimator 包裹在一个 set 中也是可以的，说白了就是执行这个动画文件。duration 用来指定动画的持续时间。propertyName 中的pathData指的就是矢量图中的pathData。valueFrom 和 valueTo 一个是起始路径，一个是结束路径，可以想到，这个动画就是在持续修改pathData，从而达到展示动画的效果。而 valueFrom 和 valueTo 的值是直接从先前准备的矢量图中复制过来的，所以那个结束状态的矢量图中唯一有用的东西就是pathData属性，没有那个文件也无所谓。valueType 这里必须填写pathType，这是专门用来计算path的类型。

此时，文件的最外层由 animated-vector 包裹，同时需要添加一个 drawable 参数，这个 drawable 用于指定动画应用于那个矢量图上，我们是要从未启用状态变成启用状态，所以是在未启用状态开始执行动画，在动画未开始的时候展示的也是未启用状态。此处我们指定为 @drawable/icon_filter_off 。 内部有一个 target 标签，这个标签可以有多个，分别对应不同的动画，但同一个 path 只能应用一个动画。name 用于指定要执行动画的 path 。status正是我们为右下角小图标path设置的名称。animation 用于指定需要执行的动画。此处引用我们刚刚创建的动画资源 @animator/filter_turn_on 。 当我们创建好动画矢量图之后，页面中引用的资源就不再是之前的静态矢量图了，需要把 ImageView 的图片替换成 @drawable/animated_filter_on

经过这么多的步骤，我们终于做出了一个矢量图动画，而且是一个。说实话，有点累，然而我这个状态切换的动画一套就要两个，所以我又加了一个回来的动画和对应的动画矢量图，一共六个文件，完成了筛选状态的两个切换动画。这还是比较简单的实现方式，对于两种状态切换的动画，网上还有一种使用selector的方式，这种方式更麻烦，而且使用方法并没有简单一些，所以我的选择是在需要切换状态的时候更改 ImageView 的图片资源，然后再执行动画。

trimPath动画相当于是改变了矢量图绘制的位置，是从头开始画还是从80%的位置开始画，然后再动态的修改这个百分比，从而达到动画的效果。理解起来倒不是很难。

先放一个我使用trimPath动画做的loading效果，这个动画效果被我用在LoadingDialog中，在界面加载的时候会重复播放这个动画。

android:name=load 不用多说，这个是我们做动画时路径名称。这里为了让心电图路径更清晰，我设置了描边宽度为20( android:strokeWidth=20 )，同时还要设置描边的颜色才能展示出来。后面的 android:trimPathStart=0 和 android:trimPathEnd=0 是本次trimPath动画的重点。

这两个属性都设置为0是因为动画的起始帧都为0，然后通过 objectAnimator 慢慢把这两个属性变为1，这样一个慢慢增长的动画就形成了。网络上一个横线变成搜索按钮的示例是将这两个属性分别应用到了两个 path 上，而我是将两个属性同时应用到一个 path 上，原理都是一样的。

在配置文件中，我将两个动画都设置为3秒且循环播放，起始点的动画慢于终点的动画1秒，达到只画中间1秒间隔线段的效果。和路径变形动画的区别是 android:valueType=floatType ，我们只需要计算从0到1的数字，然后应用到 trimPathStart 和 trimPathEnd 字段上。至此，loading的动画就配置完了。

这一步已经没什么可说的了，就是将指定的矢量图中指定的路径设置一个指定的动画。

通过几天的学习，已经大致掌握了矢量图的展示及动画的制作，但这一套流程下来成本比较高，是程序员方式的动画制作流程。除了制作成本，创意成本也是相当高的，一个好的创意能极大的提升用户体验，而好多时候我们的创意能够被实现也是很困难的。希望以后能实现一些更好的效果，让用户使用起来更舒服。

SVG—最简单的SVG动画 SVG路径（path）中的圆弧(A)指令的语法说明及计算逻辑 Android中的矢量图 Android高级动画（2）

若对本页面资源感兴趣，请点击下方或右方图片，注册登录后

搜索本页相关的【资源名】【软件名】【功能词】或有关的关键词，即可找到您想要的资源

如有其他疑问，请咨询右下角【在线客服】，谢谢支持！