路徑繪制組件

2024-01-22 18:04 更新

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

說明

該組件從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨標(biāo)記該內(nèi)容的起始版本。

子組件

無

接口

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

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

參數(shù):

參數(shù)名

參數(shù)類型

必填

參數(shù)描述

width

number | string

否

路徑所在矩形的寬度

默認(rèn)值：0

說明：

異常值按照默認(rèn)值處理。

height

number | string

否

路徑所在矩形的高度

默認(rèn)值：0

說明：

異常值按照默認(rèn)值處理。

commands

string

否

路徑繪制的命令字符串

默認(rèn)值：''

說明：

異常值按照默認(rèn)值處理。

屬性

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

名稱

類型

默認(rèn)值

描述

commands

string

''

路徑繪制的命令字符串，單位為px。像素單位轉(zhuǎn)換方法請參考像素單位轉(zhuǎn)換。

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

說明：

異常值按照默認(rèn)值處理。

fill

ResourceColor

Color.Black

設(shè)置填充區(qū)域顏色。

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

說明：

異常值按照默認(rèn)值處理。

fillOpacity

number | string | Resource

1

設(shè)置填充區(qū)域透明度。

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

說明：

異常值按照默認(rèn)值處理。

stroke

ResourceColor

-

設(shè)置邊框顏色，不設(shè)置時，默認(rèn)沒有邊框。

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

說明：

異常值不會繪制邊框。

strokeDashArray

Array<Length>

[]

設(shè)置線條間隙。

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

說明：

異常值按照默認(rèn)值處理。

strokeDashOffset

number | string

0

線條繪制起點的偏移量。

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

說明：

異常值按照默認(rèn)值處理。

strokeLineCap

LineCapStyle

LineCapStyle.Butt

設(shè)置線條端點繪制樣式。

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

strokeLineJoin

LineJoinStyle

LineJoinStyle.Miter

設(shè)置線條拐角繪制樣式。

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

strokeMiterLimit

number | string

4

設(shè)置斜接長度與邊框?qū)挾缺戎档臉O限值。斜接長度表示外邊框外邊交點到內(nèi)邊交點的距離，邊框?qū)挾燃磗trokeWidth屬性的值。

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

說明：

該屬性取值需在strokeLineJoin屬性取值LineJoinStyle.Miter時生效。

該屬性的合法值范圍應(yīng)當(dāng)大于等于1.0，當(dāng)取值范圍在[0,1)時按1.0處理，其余異常值按默認(rèn)值處理。

strokeOpacity

number | string | Resource

1

設(shè)置線條透明度。

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

說明：

該屬性的取值范圍是[0.0, 1.0]，若給定值小于0.0，則取值為0.0；若給定值大于1.0，則取值為1.0，其余異常值按1.0處理 。

strokeWidth

Length

1

設(shè)置線條寬度。

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

說明：

該屬性若為string類型, 暫不支持百分比。

異常值按照默認(rèn)值處理。

antiAlias

boolean

true

是否開啟抗鋸齒效果。

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

commands支持的繪制命令如下：

命令

名稱

參數(shù)

說明

M

moveto

（x y）

在給定的 (x, y) 坐標(biāo)處開始一個新的子路徑。例如，M 0 0 表示將（0, 0）點作為新子路徑的起始點。

L

lineto

（x y）

從當(dāng)前點到給定的 (x, y) 坐標(biāo)畫一條線，該坐標(biāo)成為新的當(dāng)前點。例如，L 50 50 表示繪制當(dāng)前點到（50, 50）點的直線，并將（50, 50）點作為新子路徑的起始點。

H

horizontal lineto

x

從當(dāng)前點繪制一條水平線，等效于將y坐標(biāo)指定為0的L命令。例如，H 50 表示繪制當(dāng)前點到（50, 0）點的直線，并將（50, 0）點作為新子路徑的起始點。

V

vertical lineto

y

從當(dāng)前點繪制一條垂直線，等效于將x坐標(biāo)指定為0的L命令。例如，V 50 表示繪制當(dāng)前點到（0, 50）點的直線，并將（0, 50）點作為新子路徑的起始點。

C

curveto

(x1 y1 x2 y2 x y)

使用 (x1, y1) 作為曲線起點的控制點， (x2, y2) 作為曲線終點的控制點，從當(dāng)前點到 (x, y) 繪制三次貝塞爾曲線。例如，C100 100 250 100 250 200 表示繪制當(dāng)前點到（250, 200）點的三次貝塞爾曲線，并將（250, 200）點作為新子路徑的起始點。

S

smooth curveto

(x2 y2 x y)

(x2, y2) 作為曲線終點的控制點，繪制從當(dāng)前點到 (x, y) 繪制三次貝塞爾曲線。若前一個命令是C或S，則起點控制點是上一個命令的終點控制點相對于起點的映射。 例如，C100 100 250 100 250 200 S400 300 400 200第二段貝塞爾曲線的起點控制點為（250, 300）。如果沒有前一個命令或者前一個命令不是 C或S，則第一個控制點與當(dāng)前點重合。

Q

quadratic Belzier curve

(x1 y1 x y)

使用 (x1, y1) 作為控制點，從當(dāng)前點到 (x, y) 繪制二次貝塞爾曲線。例如，Q400 50 600 300 表示繪制當(dāng)前點到（600, 300）點的二次貝塞爾曲線，并將（600, 300）點作為新子路徑的起始點。

T

smooth quadratic Belzier curveto

(x y)

繪制從當(dāng)前點到 (x, y) 繪制二次貝塞爾曲線。若前一個命令是Q或T，則控制點是上一個命令的終點控制點相對于起點的映射。 例如，Q400 50 600 300 T1000 300第二段貝塞爾曲線的控制點為（800, 350）。 如果沒有前一個命令或者前一個命令不是 Q或T，則第一個控制點與當(dāng)前點重合。

A

elliptical Arc

(rx ry x-axis-rotation large-arc-flag sweep-flag x y)

從當(dāng)前點到 (x, y) 繪制一條橢圓弧。橢圓的大小和方向由兩個半徑 (rx, ry) 和x-axis-rotation定義，指示整個橢圓相對于當(dāng)前坐標(biāo)系如何旋轉(zhuǎn)（以度為單位）。 large-arc-flag 和 sweep-flag確定弧的繪制方式。

Z

closepath

none

通過將當(dāng)前路徑連接回當(dāng)前子路徑的初始點來關(guān)閉當(dāng)前子路徑。

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

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct PathExample {
  5.   build() {
  6.     Column({ space: 10 }) {
  7.       Text('Straight line')
  8.         .fontSize(11)
  9.         .fontColor(0xCCCCCC)
  10.         .width('90%')
  11.       // 繪制一條長900px，寬3vp的直線
  12.       Path()
  13.         .height(10)
  14.         .commands('M0 0 L600 0')
  15.         .stroke(Color.Black)
  16.         .strokeWidth(3)
  17. 

  18.       Text('Straight line graph')
  19.         .fontSize(11)
  20.         .fontColor(0xCCCCCC)
  21.         .width('90%')
  22.       // 繪制直線圖形
  23.       Flex({ justifyContent: FlexAlign.SpaceBetween }) {
  24.         Path()
  25.           .commands('M100 0 L200 240 L0 240 Z')
  26.           .fillOpacity(0)
  27.           .stroke(Color.Black)
  28.           .strokeWidth(3)
  29.         Path()
  30.           .commands('M0 0 H200 V200 H0 Z')
  31.           .fillOpacity(0)
  32.           .stroke(Color.Black)
  33.           .strokeWidth(3)
  34.         Path()
  35.           .commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z')
  36.           .fillOpacity(0)
  37.           .stroke(Color.Black)
  38.           .strokeWidth(3)
  39.       }.width('95%')
  40. 

  41.       Text('Curve graphics').fontSize(11).fontColor(0xCCCCCC).width('90%')
  42.       // 繪制弧線圖形
  43.       Flex({ justifyContent: FlexAlign.SpaceBetween }) {
  44.         Path()
  45.           .commands("M0 300 S100 0 240 300 Z")
  46.           .fillOpacity(0)
  47.           .stroke(Color.Black)
  48.           .strokeWidth(3)
  49.         Path()
  50.           .commands('M0 150 C0 100 140 0 200 150 L100 300 Z')
  51.           .fillOpacity(0)
  52.           .stroke(Color.Black)
  53.           .strokeWidth(3)
  54.         Path()
  55.           .commands('M0 100 A30 20 20 0 0 200 100 Z')
  56.           .fillOpacity(0)
  57.           .stroke(Color.Black)
  58.           .strokeWidth(3)
  59.       }.width('95%')
  60.     }.width('100%')
  61.     .margin({ top: 5 })
  62.   }
  63. }

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號