android:pathData 属性

本文详细介绍了SVG(可缩放矢量图形)中用于绘制图形的基本指令,包括直线、曲线和弧线的绘制方法。通过这些指令,可以精确地控制图形的形状和路径,适用于网页设计和其他矢量图形应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先来说明下,大写字母表示绝对位置,小写字母表示相对前一个点的位置

一、直线

(1)只标注点

x、y 分别表示点的横、纵坐标,不做绘制操作

M x, y

(2)画线

L 用来画某个点到(x, y)的直线

L x, y

H 用来画横坐标的线,参数表示直线长度

H x

V 用来画纵坐标的线,参数表示直线长度

V y

(3)闭合

L 起点坐标 可实现闭合,或者 Z 来实现

L 0, 0
Z

二、曲线

(1)贝塞尔曲线

三次贝塞尔曲线

(x1, y1)表示起点的控制点,(x2, y2)表示终点的控制点,(x3, y3)表示终点

C x1 y1, x2 y2, x3 y3

如果 S 前面有 C 或者 S 命令,则以前一个曲线的终点控制点的对称点作为起始控制点,(x1, y1)表示终点的控制点,(x2, y2)表示终点。
如果 S 单独使用,则等同 Q 命令。

S x1 y1, x2 y2

二次贝塞尔曲线

(x1, y1)表示起终点的控制点,(x2, y2)表示终点

Q x1 y1, x2 y2

如果 T 前面有 Q 或者 T 命令,则以前一个曲线的控制点的对称点作为起终控制点,(x1, y1)表示终点。
如果 T 单独使用,则等同一条直线。

T x1 y1

(2)弧线

rx, ry 指所在椭圆的半轴大小。
x-axis-rotation 指椭圆的X轴与水平方向顺时针方向夹角,可以想像成一个水平的椭圆绕中心点顺时针旋转 x-axis-rotation 的角度。
large-arc-flag 只有两个值,1表示大角度弧线,0为小角度弧线。
sweep-flag 只有两个值,确定从起点至终点的方向,1为顺时针,0为逆时针
x, y 为终点坐标

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

只对 命令+参数 做个记录

<vector android:height="24dp" android:viewportHeight="512.0" android:viewportWidth="512.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android"> <path android:name="dress_path" android:fillColor="#74A32E" android:pathData="M376,367.5l-53.9,-7.2l0,0c-28.9,36.5 -81.8,42.7 -118.3,13.8c-5.1,-4 -9.7,-8.7 -13.8,-13.8l0,0l-53.9,7.2c-33.9,4.5 -59.2,33.5 -59.2,67.7V512h358.4v-76.8C435.2,401 409.9,372.1 376,367.5z"/> <path android:fillColor="#FEDAC6" android:pathData="M322,360.4L322,360.4c-8.6,-1.1 -14.9,-8.4 -14.8,-17.1v-44.6h-102.4v44.8c0.1,8.6 -6.3,15.9 -14.8,17.1l0,0c28.9,36.4 81.9,42.5 118.3,13.6C313.4,370.1 318,365.5 322,360.4z"/> <path android:fillColor="#F5C4B0" android:pathData="M307.2,336.4v-37.7h-102.4v37.7C243.2,354.4 268.8,354.4 307.2,336.4z"/> <path android:fillColor="#FEDAC6" android:pathData="M349.9,153.6h-8.5v51.2h8.5c14.1,0 25.6,-11.5 25.6,-25.6C375.5,165.1 364,153.6 349.9,153.6z"/> <path android:fillColor="#FEDAC6" android:pathData="M162.1,153.6c-14.1,0 -25.6,11.5 -25.6,25.6c0,14.1 11.5,25.6 25.6,25.6h8.5v-51.2H162.1z"/> <path android:fillColor="#FEDAC6" android:pathData="M349.9,136.5V230.4c0.1,12.5 -4.4,24.7 -12.6,34.1l-36.9,41.7c-6.5,7.4 -15.8,11.6 -25.6,11.6h-37.4c-9.8,-0 -19.1,-4.2 -25.6,-11.6l-37,-41.7c-8.3,-9.4 -12.7,-21.6 -12.6,-34.1V119.5c25.9,-4.2 51.5,-9.9 76.8,-17.1c20.4,-7.4 40.3,-15.9 59.7,-25.6c7.8,11.9 16.4,23.3 25.6,34.1L349.9,136.5z"/> <!--<path android:fillColor="#688E26" android:pathData="M76.8,435.2V512h34.1V376.1C89.8,388.3 76.8,410.8 76.8,435.2z"/>--> <path android:fillColor="#A15D3000" android:pathData="M324.3,42.7c0,-16.2 -12.5,-34.1 -68.3,-34.1c-102.4,0 -128,102.4 -128,102.4c77.9,13 145.9,-18.4 174,-34.1c6.5,14.9 22.4,53.5 47.9,59.7l5,-50.6C356.9,65.9 343.8,47.4 324.3,42.7z"/> <path android:fillColor="#F5C4B0" android:pathData="M199.6,213.3l-3.3,-102.4l-34.1,8.5v104.4c0,19.6 8.5,38.3 23.3,51.2c0,0 34.7,38.1 39.8,40.6l-18.8,-53.5C200.8,246.6 198.5,229.9 199.6,213.3z"/> <path android:fillColor="#8F4F2400" android:pathData="M144.5,73.4c-7.1,11.7 -12.7,24.4 -16.5,37.5c73.2,12.2 139.9,-17.7 170.7,-34.1C221.9,93.9 179.2,85.3 144.5,73.4z"/> <path android:fillColor="#FF000000" android:pathData="M349.9,204.8h-8.5v-17.1h8.5c9.4,0 17.1,-7.7 17.1,-17.1c0,-9.4 -7.7,-17.1 -17.1,-17.1h-8.5v-17.1h8.5c18.8,0 34.1,15.3 34.1,34.1S368.7,204.8 349.9,204.8z"/> <path android:fillColor="#FF000000" android:pathData="M170.7,213.3h-8.5c-18.8,0 -34.1,-15.3 -34.1,-34.1s15.3,-34.1 34.1,-34.1h8.5v17.1h-8.5c-9.4,0 -17.1,7.7 -17.1,17.1s7.7,17.1 17.1,17.1h8.5V213.3z"/> <path android:fillColor="#FF000000" android:pathData="M264.5,213.7h-25.6c-2.4,0 -4.8,-1 -6.4,-2.9s-2.4,-4.3 -2.1,-6.7l8.5,-68.3l16.9,2.1l-7.3,58.7h15.9V213.7z"/> <path android:fillColor="#FF000000" android:pathData="M274.8,324.6h-37.4c-12.3,-0 -23.9,-5.3 -32,-14.5l-36.9,-42.2c-9.6,-11 -14.9,-25.2 -14.7,-39.8v-117.2h17.1v117.2c-0.1,10.5 3.6,20.6 10.5,28.5l36.9,42.1c4.8,5.5 11.8,8.7 19.2,8.7h37.4c7.3,-0 14.3,-3.2 19.2,-8.7l36.9,-41.7c6.9,-7.8 10.6,-17.9 10.5,-28.4V128h17.1v100.6c0.1,14.6 -5.1,28.7 -14.7,39.7l-36.9,41.8C298.7,319.3 287,324.6 274.8,324.6z"/> <group android:name="eyes_group" > <path android:fillColor="#FF000000" android:pathData="M204.8,153.9m-17.1,0a17.1,17.1 0,1 1,34.1 0a17.1,17.1 0,1 1,-34.1 0"/> <path android:fillColor="#FF000000" android:pathData="M298.7,153.9m-17.1,0a17.1,17.1 0,1 1,34.1 0a17.1,17.1 0,1 1,-34.1 0"/> </group> <path android:fillColor="#FF000000" android:pathData="M349.9,145.1c-0.7,0 -1.4,-0.1 -2,-0.2c-25.3,-6.2 -41.5,-37.3 -50,-56.1c-31.5,16.2 -97.3,43 -171.3,30.7c-2.3,-0.4 -4.4,-1.7 -5.7,-3.7c-1.3,-2 -1.7,-4.4 -1.1,-6.8C120,107.8 148.2,0 256,0c56.6,0 73.3,18.5 76.3,36.3c20.2,7.8 33.3,28.5 31.1,50.5l-5,50.6c-0.2,2.5 -1.5,4.7 -3.6,6.1C353.3,144.5 351.6,145.1 349.9,145.1zM302,68.3c0.9,0 1.8,0.2 2.7,0.4c2.3,0.8 4.1,2.5 5.1,4.7l0.7,1.5c4.8,11.1 16.3,37.7 32.1,48.9l3.8,-38.7c1.6,-15.7 -8.8,-30.4 -24.2,-34.1c-3.8,-0.9 -6.5,-4.4 -6.5,-8.3c0,-21.2 -32.5,-25.6 -59.7,-25.6c-77.9,0 -108.1,62.8 -116.8,86.8c71.8,8.6 134.4,-21 158.7,-34.6C299.1,68.6 300.5,68.3 302,68.3z"/> <group android:name="mouth_group"> <path android:fillColor="#FF000000" android:pathData="M254,247.5c-0,0 -0,0 -0,0h-23.6V230.4h23.6c0,0 0,0 0,0c11.2,0 22.4,-2.6 32.3,-7.6l7.6,15.3C281.6,244.2 267.8,247.5 254,247.5z"/> </group> <path android:fillColor="#FF000000" android:pathData="M85.3,512H68.3v-76.8c0,-38.3 28.6,-71 66.6,-76.1l53.9,-7.2c4.3,-0.6 7.5,-4.2 7.4,-8.5v-44.7h17.1v44.6c0.1,12.8 -9.5,23.8 -22.3,25.5l-53.9,7.2c-29.5,4 -51.8,29.4 -51.8,59.2V512z"/> <path android:fillColor="#FF000000" android:pathData="M443.7,512h-17.1v-76.8c-0.1,-29.7 -22.3,-55.1 -51.8,-59l-53.9,-7.2c-12.8,-1.7 -22.4,-12.7 -22.3,-25.6v-44.7h17.1v44.8c-0,4.4 3.1,8 7.4,8.6l53.9,7.2c37.9,5.1 66.5,37.7 66.6,75.9V512H443.7z"/> <path android:fillColor="#FF000000" android:pathData="M136.5,443.7h17.1v68.3h-17.1z"/> <path android:fillColor="#FF000000" android:pathData="M358.4,443.7h17.1v68.3h-17.1z"/> <path android:fillColor="#FF000000" android:pathData="M256.1,400.8c-27.4,0 -54.6,-12 -72.8,-35.2l13.4,-10.6c25.9,32.7 73.6,38.3 106.3,12.4c4.6,-3.6 8.8,-7.8 12.4,-12.4l13.4,10.6c-4.4,5.6 -9.6,10.7 -15.2,15.2C296.5,394.3 276.2,400.8 256.1,400.8z"/> </vector> 我要动态修改这个里面的属性可以吗
05-31
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值