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>

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