android PathData生成问题

Path的Data数据有三种生成方式:

1. 最简单的是用Expression Design。可以粘贴来自其它软件的矢量图形。导出时选择,文件->导出->导出属性->格式->XAML Silverlight 画布,即可得到XAML格式的矢量图形,也就是Path。

2. 如果只是把文字转成图形,相当于印刷行业里的文字转曲,可以直接用Expression Blend。对象->路径->转换为路径,即可。

3. 自己动手写。当然这也是最难的方式。不过对于简单图形来说非常有用。用Design生成的数据量很大,手写就会变得很简洁。命令的使用方法如下:

==============================

1. 移动指令:Move Command(M):M 起始点,或者:m 起始点
比如:M 100,240 或 m 100,240
使用大写M时,表示绝对值; 使用小写m时; 表示相对于前一点的值,如果前一点没有指定,则使用(0,0)。

2. 绘制指令(Draw Command): 
(1) 直线:Line(L)
(2) 水平直线: Horizontal line(H)
(3) 垂直直线: Vertical line(V)
(4) 三次方程式贝塞尔曲线: Cubic Bezier curve(C)
(5) 二次方程式贝塞尔曲线: Quadratic Bezier curve(Q)
(6) 平滑三次方程式贝塞尔曲线: Smooth cubic Bezier curve(S)
(7) 平滑二次方程式贝塞尔曲线: smooth quadratic Bezier curve(T)
(8) 椭圆圆弧: elliptical Arc(A)

上面每种形状后用括号括起的英文字母为命令简写的大写形式,但你也可以使用小写。使用大写与小写的区别是:大写是绝对值,小写是相对值。重复使用同一种类型时,就可以省略前面的命令。比如:L 100,200 L 300,400简写为:L 100,200 300,400。

绘制指令格式语法:

(1) 直线:Line(L)
格式:L 结束点座标 或: l 结束点座标。
比如:L 100,100 或 l 100 100。座标值可以使用x,y(中间用英文逗号隔开)或x y(中间用半角空格隔开)的形式。

(2) 水平直线  Horizontal line(H):绘制从当前点到指定x座标的直线。
格式:H x值 或 h x值(x为System.Double类型的值)
比如:H 100或h 100,也可以是:H 100.00或h 100.00等形式。

(3) 垂直直线 Vertical line(V):绘制从当前点到指定y座标的直线。
格式:V y值 或 v y值(y为System.Double类型的值)
比如:V 100或y 100,也可以是:V 100.00或v 100.00等形式。

(4) 三次方程式贝塞尔曲线 Cubic Bezier curve(C):通过指定两个控制点来绘制由当前点到指定结束点间的三次方程贝塞尔曲线。
格式:C 第一控制点 第二控制点 结束点 或 c 第一控制点 第二控制点 结束点
比如:C 100,200 200,400 300,200 或 c 100,200 200,400 300,200
其中,点(100,200)为第一控制点,点(200,400)为第二控制点,点(300,200)为结束点。

(5) 二次方程式贝塞尔曲线 Quadratic Bezier curve(Q):通过指定的一个控制点来绘制由当前点到指定结束点间的二次方程贝塞尔曲线。
格式:Q 控制点 结束点 或 q 控制点 结束点
比如:q 100,200 300,200。其中,点(100,200)为控制点,点(300,200)为结束点。

(6) 平滑三次方程式贝塞尔曲线: Smooth cubic Bezier curve(S):通过一个指定点来“平滑地”控制当前点到指定点的贝塞尔曲线。
格式:S 控制点 结束点 或 s 控制点 结束点
比如:S 100,200 200,300

(7) 平滑二次方程式贝塞尔曲线 smooth quadratic Bezier curve(T):与平滑三次方程贝塞尔曲线类似。
格式:T 控制点 结束点 或 t 控制点 结束点
比如:T 100,200 200,300

(8) 椭圆圆弧: elliptical Arc(A) : 在当前点与指定结束点间绘制圆弧。
A 尺寸 圆弧旋转角度值 优势弧的标记 正负角度标记 结束点 或: a 尺寸 圆弧旋转角度值 优势弧的标记 正负角度标记 结束点
尺寸(Size): System.Windows.Size类型,指定椭圆圆弧X,Y方向上的半径值。
旋转角度(rotationAngle):System.Double类型。
圆弧旋转角度值(rotationAngle):椭圆弧的旋转角度值。
优势弧的标记(isLargeArcFlag):是否为优势弧,如果弧的角度大于等于180度,则设为1,否则为0。
正负角度标记(sweepDirectionFlag):当正角方向绘制时设为1,否则为0。
结束点(endPoint):System.Windows.Point类型。
比如:A 5,5 0 0 1 10,10

3. 关闭指令(close Command):用以将图形的首、尾点用直线连接,以形成一个封闭的区域。
用Z或z表示。

F0 指定 EvenOdd 填充规则。
F1 指定 Nonzero 填充规则。
如果省略此命令,则路径使用默认行为,即 EvenOdd。如果指定此命令,则必须将其置于最前面。
EvenOdd 确定一个点是否位于填充区域内的规则,具体方法是从该点沿任意方向画一条无限长的射线,然后计算该射线在给定形状中因交叉而形成的路径段数。如果该数为奇数,则点在内部;如果为偶数,则点在外部。 

Nonzero 确定一个点是否位于路径填充区域内的规则,具体方法是从该点沿任意方向画一条无限长的射线,然后检查形状段与该射线的交点。从 0 开始计数,每当线段从左向右穿过该射线时加 1,而每当路径段从右向左穿过该射线时减 1。计算交点的数目后,如果结果为 0,则说明该点位于路径外部。否则,它位于路径内部。



5.0以上支持VectorDrawable了,可以创建vector的xml资源文件。vector其实就使用来绘制矢量图形的。

看一个例子:

复制代码
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    
    <path
         android:fillColor="#000000"
         android:pathData="M25,0 l 50,50 -50,50Z"/>

</vector>
复制代码

首先vector 标签是一个drawable对象,所以是放在res/drawable目录的。

vector 标签下有android:width和android:height属性,这两个属性是必填的,定义矢量图形的绝对大小,虽然说是矢量图形随意缩放,但是不能说这里不定义宽高直接到要设置到的目标控件上定义控件的宽高,这样是不允许的,一定要设置这个绝对宽高,要不然会报错。

然后还有个android:viewportHeight和android:viewportWidth属性,这个是画布宽高,也是必填的,定义Path路径的时候就必须在这个画布大小里去绘制,超出画布就显示不出来了。

path标签android:fillColor属性定义绘制颜色,android:pathData定义绘制路径。

M25,0 l 50,50 -50,50Z这个路径表示:在100*100的画布内,先把绘制点移动到绝对座标(25,0)这个点,然后画直线到(50,50)这个点,l指令是相对座标,大写的L表示绝对座标,那么l 50,50就是在原点(25,0)的x轴往前移50,往下移50,绝对座标就是(75,50),也就是三角形的右边那个点。
然后从(50,50)这个点绘制到三角形最下面那个点(-50,50),这也是相对右边那个点相对座标,也就是把(75,50)这个绝对座标当作是原点(0,0),参作这个原点往后移动50再往下移动50,在整个画布中的绝对座标就是(25,100)


 再看一种画法:

M300,70 l 0,-70 70,70 0,0 -70,70z

这个官方的画法,先定点,然后把定点固定在原点垂直上方,然后往右下移确定三角形右边的定点,最后把点水平向后移动70往下移动70,回到原点的水平轴在y轴上移动140.

是先画三角的上半部分再画下半部分。

同样是画上面这个三角形:

先移动到随便一个点:M300,70

然后把线段一端定在三角形下边那个点l 0,70(也就是垂直往下移动了70)

后面再补上三角形右边的点l 0,70 70,70(下面的点x轴和y轴都移动70,就到三角形右边的点)

M300,70 l 0,70 70,-70  这样就把三角形下半段画好了

再补上上半段M300,70 l 0,70 70,-70 -70,-70

如果要把这个三角形旋转角度怎么办?

就要在path外层顶一个group节点,利用这个group对它进行旋转

复制代码
<vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    
    <group android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0">
        
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70"/>
    </group>
</vector>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章