位於res/drawable/face.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="200dp" android:width="200dp" android:viewportHeight="100" android:viewportWidth="100" > <path android:strokeColor="@android:color/holo_red_dark" android:fillColor="@color/yellow" android:pathData="@string/path_circle"/> <path android:fillColor="@android:color/black" android:pathData="@string/path_face_left_eye"/> <path android:fillColor="@android:color/black" android:pathData="@string/path_face_right_eye"/> <path android:name="mouth" android:strokeColor="@android:color/black" android:strokeWidth="@integer/stroke_width" android:strokeLineCap="round" android:pathData="@string/path_face_mouth_sad"/> </vector>
res/values/strings.xmlhtml
<string name="path_circle"> M 50,50 m -48,0 a 48,48 0 1,0 96,0 a 48,48 0 1,0 -96,0 </string> <string name="path_face_left_eye"> M 35,40 m -7,0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0 </string> <string name="path_face_right_eye"> M 65,40 m -7,0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0 </string> <string name="path_face_mouth_sad"> M 30,75 Q 50,55 70,75 </string> <string name="path_face_mouth_happy"> M 30,65 Q 50,85 70,65 </string>
參考文章: http://www.w3.org/TR/SVG/paths.html#PathData M是移動的意思,大寫表明絕對座標,小寫是相對座標,注意相對的對象是其前一個對象。 a是畫弧,48,48分別是所畫弧的x,y軸的半徑,0是x軸偏移量,1是取大弧,0是逆時針,(96,0)是終點座標。
下面的a同理。 <span style="font-family: Arial, Helvetica, sans-serif;">若將48全換成24,96全換成48,會看到圓的半徑爲原來的一半。 </span><span style="font-family: Arial, Helvetica, sans-serif;"> </span>