Path

路徑繪制組件，根據繪制路徑生成封閉的自定義形狀。

說明：
開發(fā)前請熟悉鴻蒙開發(fā)指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 7開始支持。后續(xù)版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

子組件

無

接口

Path(value?: { width?: number | string; height?: number | string; commands?: string })

從API version 9開始，該接口支持在ArkTS卡片中使用。

參數:

參數名	參數類型	必填	參數描述
width	number	string	否
height	number	string	否
commands	string	否	路徑繪制的命令字符串默認值：''說明：異常值按照默認值處理。

屬性

除支持[通用屬性]外，還支持以下屬性：

名稱	類型	默認值	描述
commands	string	''	路徑繪制的命令字符串，單位為px。像素單位轉換方法請參考[像素單位轉換]。從API version 9開始，該接口支持在ArkTS卡片中使用。說明：異常值按照默認值處理。
fill	[ResourceColor]	Color.Black	設置填充區(qū)域顏色。從API version 9開始，該接口支持在ArkTS卡片中使用。說明：異常值按照默認值處理。
fillOpacity	number	string	[Resource]
stroke	[ResourceColor]	-	設置邊框顏色，不設置時，默認沒有邊框。從API version 9開始，該接口支持在ArkTS卡片中使用。說明：異常值不會繪制邊框。
strokeDashArray	Array	[]	設置線條間隙。從API version 9開始，該接口支持在ArkTS卡片中使用。說明：異常值按照默認值處理。
strokeDashOffset	number	string	0
strokeLineCap	[LineCapStyle]	LineCapStyle.Butt	設置線條端點繪制樣式。從API version 9開始，該接口支持在ArkTS卡片中使用。
strokeLineJoin	[LineJoinStyle]	LineJoinStyle.Miter	設置線條拐角繪制樣式。從API version 9開始，該接口支持在ArkTS卡片中使用。
strokeMiterLimit	number	string	4
strokeOpacity	number	string	[Resource]
strokeWidth	Length	1	設置線條寬度。從API version 9開始，該接口支持在ArkTS卡片中使用。說明：該屬性若為string類型, 暫不支持百分比。異常值按照默認值處理。
antiAlias	boolean	true	是否開啟抗鋸齒效果。從API version 9開始，該接口支持在ArkTS卡片中使用。

commands支持的繪制命令如下：

命令	名稱	參數	說明
M	moveto	（x y）	在給定的 (x, y) 坐標處開始一個新的子路徑。例如，`M 0 0`表示將（0, 0）點作為新子路徑的起始點。
L	lineto	（x y）	從當前點到給定的 (x, y) 坐標畫一條線，該坐標成為新的當前點。例如，`L 50 50`表示繪制當前點到（50, 50）點的直線，并將（50, 50）點作為新子路徑的起始點。
H	horizontal lineto	x	從當前點繪制一條水平線，等效于將y坐標指定為0的L命令。例如，`H 50` 表示繪制當前點到（50, 0）點的直線，并將（50, 0）點作為新子路徑的起始點。
V	vertical lineto	y	從當前點繪制一條垂直線，等效于將x坐標指定為0的L命令。例如，`V 50` 表示繪制當前點到（0, 50）點的直線，并將（0, 50）點作為新子路徑的起始點。
C	curveto	(x1 y1 x2 y2 x y)	使用 (x1, y1) 作為曲線起點的控制點， (x2, y2) 作為曲線終點的控制點，從當前點到 (x, y) 繪制三次貝塞爾曲線。例如，`C100 100 250 100 250 200` 表示繪制當前點到（250, 200）點的三次貝塞爾曲線，并將（250, 200）點作為新子路徑的起始點。
S	smooth curveto	(x2 y2 x y)	(x2, y2) 作為曲線終點的控制點，繪制從當前點到 (x, y) 繪制三次貝塞爾曲線。若前一個命令是C或S，則起點控制點是上一個命令的終點控制點相對于起點的映射。例如，`C100 100 250 100 250 200 S400 300 400 200`第二段貝塞爾曲線的起點控制點為（250, 300）。如果沒有前一個命令或者前一個命令不是 C或S，則第一個控制點與當前點重合。
Q	quadratic Belzier curve	(x1 y1 x y)	使用 (x1, y1) 作為控制點，從當前點到 (x, y) 繪制二次貝塞爾曲線。例如，`Q400 50 600 300` 表示繪制當前點到（600, 300）點的二次貝塞爾曲線，并將（600, 300）點作為新子路徑的起始點。
T	smooth quadratic Belzier curveto	(x y)	繪制從當前點到 (x, y) 繪制二次貝塞爾曲線。若前一個命令是Q或T，則控制點是上一個命令的終點控制點相對于起點的映射。例如，`Q400 50 600 300 T1000 300`第二段貝塞爾曲線的控制點為（800, 350）。如果沒有前一個命令或者前一個命令不是 Q或T，則第一個控制點與當前點重合。
A	elliptical Arc	(rx ry x-axis-rotation large-arc-flag sweep-flag x y)	從當前點到 (x, y) 繪制一條橢圓弧。橢圓的大小和方向由兩個半徑 (rx, ry) 和x-axis-rotation定義，指示整個橢圓相對于當前坐標系如何旋轉（以度為單位）。 large-arc-flag 和 sweep-flag確定弧的繪制方式。
Z	closepath	none	通過將當前路徑連接回當前子路徑的初始點來關閉當前子路徑。

例如： commands('M0 20 L50 50 L50 100 Z')定義了一個三角形，起始于位置（0，20），接著繪制點（0，20）到點（50，50）的直線，再繪制點（50，50）到點（50，100）的直線，最后繪制點（50，100）到（0，20）的直線關閉路徑，形成封閉三角形。

QQ截圖20240715201704.png

示例

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`
// xxx.ets
@Entry
@Component
struct PathExample {
  build() {
    Column({ space: 10 }) {
      Text('Straight line')
        .fontSize(11)
        .fontColor(0xCCCCCC)
        .width('90%')
      // 繪制一條長600px，寬3vp的直線
      Path()
        .width('600px')
        .height('10px')
        .commands('M0 0 L600 0')
        .stroke(Color.Black)
        .strokeWidth(3)

      Text('Straight line graph')
        .fontSize(11)
        .fontColor(0xCCCCCC)
        .width('90%')
      // 繪制直線圖形
      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
        Path()
          .width('210px')
          .height('310px')
          .commands('M100 0 L200 240 L0 240 Z')
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width('210px')
          .height('310px')
          .commands('M0 0 H200 V200 H0 Z')
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width('210px')
          .height('310px')
          .commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z')
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
      }.width('95%')

      Text('Curve graphics').fontSize(11).fontColor(0xCCCCCC).width('90%')
      // 繪制弧線圖形
      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
        Path()
          .width('250px')
          .height('310px')
          .commands("M0 300 S100 0 240 300 Z")
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width('210px')
          .height('310px')
          .commands('M0 150 C0 100 140 0 200 150 L100 300 Z')
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width('210px')
          .height('310px')
          .commands('M0 100 A30 20 20 0 0 200 100 Z')
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
      }.width('95%')
    }.width('100%')
    .margin({ top: 5 })
  }
}