1# Path2D 2 3路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口或者fill接口进行绘制。 4 5> **说明：** 6> 7> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 接口 10 11Path2D(unit?: LengthMetricsUnit) 12 13构造一个空的Path2D对象。 14 15**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 16 17**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 18 19**系统能力：** SystemCapability.ArkUI.ArkUI.Full 20 21**参数：** 22 23| 参数名 | 类型 | 必填 | 说明 | 24| ----- | -------- | ---- | ---------- | 25| unit<sup>12+</sup> | [LengthMetricsUnit](../js-apis-arkui-graphics.md#lengthmetricsunit12) | 否 | 用来配置Path2D对象的单位模式，配置后无法动态更改，配置方法同[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md#lengthmetricsunit12)。<br>默认值：DEFAULT。| 26 27Path2D(description: string, unit?: LengthMetricsUnit) 28 29使用符合SVG路径描述规范的路径字符串构造一个Path2D对象。 30 31**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 32 33**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 34 35**系统能力：** SystemCapability.ArkUI.ArkUI.Full 36 37**参数：** 38 39| 参数名 | 类型 | 必填 | 说明 | 40| ----- | -------- | ---- | ---------- | 41| description | string | 是 | 符合 SVG 路径描述规范的路径字符串 | 42| unit<sup>12+</sup> | [LengthMetricsUnit](../js-apis-arkui-graphics.md#lengthmetricsunit12) | 否 | 用来配置Path2D对象的单位模式，配置后无法动态更改，配置方法同[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md#lengthmetricsunit12)。<br>默认值：DEFAULT。| 43 44## addPath 45 46addPath(path: Path2D, transform?: Matrix2D): void 47 48将另一个路径添加到当前的路径对象中。 49 50**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 51 52**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 53 54**系统能力：** SystemCapability.ArkUI.ArkUI.Full 55 56**参数：** 57 58| 参数名 | 类型 | 必填 | 说明 | 59| ----- | -------- | ---- | ---------- | 60| path | [Path2D](ts-components-canvas-path2d.md) | 是 | 需要添加到当前路径的路径对象，路径单位：px。 | 61| transform | [Matrix2D](ts-components-canvas-matrix2d.md) | 否 | 新增路径的变换矩阵对象。<br>默认值：null。 | 62 63 64**示例：** 65 66 ```ts 67 // xxx.ets 68 @Entry 69 @Component 70 struct AddPath { 71 private settings: RenderingContextSettings = new RenderingContextSettings(true) 72 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 73 74 private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z") 75 private path2Db: Path2D = new Path2D() 76 77 build() { 78 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 79 Canvas(this.context) 80 .width('100%') 81 .height('100%') 82 .backgroundColor('#ffff00') 83 .onReady(() =>{ 84 this.path2Db.addPath(this.path2Da) 85 this.context.stroke(this.path2Db) 86 }) 87 } 88 .width('100%') 89 .height('100%') 90 } 91 } 92 ``` 93 94  95 96 97## closePath 98 99closePath(): void 100 101将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。 102 103**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 104 105**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 106 107**系统能力：** SystemCapability.ArkUI.ArkUI.Full 108 109**示例：** 110 111 ```ts 112 // xxx.ets 113 @Entry 114 @Component 115 struct ClosePath { 116 private settings: RenderingContextSettings = new RenderingContextSettings(true) 117 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 118 private path2Db: Path2D = new Path2D() 119 120 build() { 121 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 122 Canvas(this.context) 123 .width('100%') 124 .height('100%') 125 .backgroundColor('#ffff00') 126 .onReady(() =>{ 127 this.path2Db.moveTo(200, 100) 128 this.path2Db.lineTo(300, 100) 129 this.path2Db.lineTo(200, 200) 130 this.path2Db.closePath() 131 this.context.stroke(this.path2Db) 132 }) 133 } 134 .width('100%') 135 .height('100%') 136 } 137 } 138 ``` 139 140  141 142 143## moveTo 144 145moveTo(x: number, y: number): void 146 147将路径的当前坐标点移动到目标点，移动过程中不绘制线条。 148 149**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 150 151**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 152 153**系统能力：** SystemCapability.ArkUI.ArkUI.Full 154 155**参数：** 156 157| 参数 | 类型 | 必填 | 描述 | 158| ---- | ------ | ---- | -------- | 159| x | number | 是 | 目标点X轴坐标。<br>默认单位：vp。 | 160| y | number | 是 | 目标点Y轴坐标。<br>默认单位：vp。 | 161 162**示例：** 163 164 ```ts 165 // xxx.ets 166 @Entry 167 @Component 168 struct MoveTo { 169 private settings: RenderingContextSettings = new RenderingContextSettings(true) 170 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 171 private path2Db: Path2D = new Path2D() 172 173 build() { 174 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 175 Canvas(this.context) 176 .width('100%') 177 .height('100%') 178 .backgroundColor('#ffff00') 179 .onReady(() =>{ 180 this.path2Db.moveTo(50, 100) 181 this.path2Db.lineTo(250, 100) 182 this.path2Db.lineTo(150, 200) 183 this.path2Db.closePath() 184 this.context.stroke(this.path2Db) 185 }) 186 } 187 .width('100%') 188 .height('100%') 189 } 190 } 191 ``` 192 193  194 195 196## lineTo 197 198lineTo(x: number, y: number): void 199 200从当前点绘制一条直线到目标点。 201 202**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 203 204**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 205 206**系统能力：** SystemCapability.ArkUI.ArkUI.Full 207 208**参数：** 209 210| 参数名 | 类型 | 必填 | 说明 | 211| ----- | -------- | ---- | ---------- | 212| x | number | 是 | 目标点X轴坐标。<br>默认单位：vp。 | 213| y | number | 是 | 目标点Y轴坐标。<br>默认单位：vp。 | 214 215**示例：** 216 217 ```ts 218 // xxx.ets 219 @Entry 220 @Component 221 struct LineTo { 222 private settings: RenderingContextSettings = new RenderingContextSettings(true) 223 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 224 private path2Db: Path2D = new Path2D() 225 226 build() { 227 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 228 Canvas(this.context) 229 .width('100%') 230 .height('100%') 231 .backgroundColor('#ffff00') 232 .onReady(() =>{ 233 this.path2Db.moveTo(100, 100) 234 this.path2Db.lineTo(100, 200) 235 this.path2Db.lineTo(200, 200) 236 this.path2Db.lineTo(200, 100) 237 this.path2Db.closePath() 238 this.context.stroke(this.path2Db) 239 }) 240 } 241 .width('100%') 242 .height('100%') 243 } 244 } 245 ``` 246 247  248 249 250## bezierCurveTo 251 252bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 253 254创建三次贝赛尔曲线的路径。 255 256**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 257 258**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 259 260**系统能力：** SystemCapability.ArkUI.ArkUI.Full 261 262**参数：** 263 264| 参数名 | 类型 | 必填 | 说明 | 265| ----- | -------- | ---- | ---------- | 266| cp1x | number | 是 | 第一个贝塞尔参数的x坐标值。<br>默认单位：vp。 | 267| cp1y | number | 是 | 第一个贝塞尔参数的y坐标值。<br>默认单位：vp。 | 268| cp2x | number | 是 | 第二个贝塞尔参数的x坐标值。<br>默认单位：vp。 | 269| cp2y | number | 是 | 第二个贝塞尔参数的y坐标值。<br>默认单位：vp。 | 270| x | number | 是 | 路径结束时的x坐标值。<br>默认单位：vp。 | 271| y | number | 是 | 路径结束时的y坐标值。<br>默认单位：vp。 | 272 273**示例：** 274 275 ```ts 276 // xxx.ets 277 @Entry 278 @Component 279 struct BezierCurveTo { 280 private settings: RenderingContextSettings = new RenderingContextSettings(true) 281 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 282 private path2Db: Path2D = new Path2D() 283 284 build() { 285 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 286 Canvas(this.context) 287 .width('100%') 288 .height('100%') 289 .backgroundColor('#ffff00') 290 .onReady(() =>{ 291 this.path2Db.moveTo(10, 10) 292 this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20) 293 this.context.stroke(this.path2Db) 294 }) 295 } 296 .width('100%') 297 .height('100%') 298 } 299 } 300 ``` 301 302  303 304 305## quadraticCurveTo 306 307quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 308 309创建二次贝赛尔曲线的路径。 310 311**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 312 313**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 314 315**系统能力：** SystemCapability.ArkUI.ArkUI.Full 316 317**参数：** 318 319| 参数名 | 类型 | 必填 | 说明 | 320| ----- | -------- | ---- | ---------- | 321| cpx | number | 是 | 贝塞尔参数的x坐标值。<br>默认单位：vp。 | 322| cpy | number | 是 | 贝塞尔参数的y坐标值。<br>默认单位：vp。 | 323| x | number | 是 | 路径结束时的x坐标值。<br>默认单位：vp。 | 324| y | number | 是 | 路径结束时的y坐标值。<br>默认单位：vp。 | 325 326**示例：** 327 328 ```ts 329 // xxx.ets 330 @Entry 331 @Component 332 struct QuadraticCurveTo { 333 private settings: RenderingContextSettings = new RenderingContextSettings(true) 334 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 335 private path2Db: Path2D = new Path2D() 336 337 build() { 338 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 339 Canvas(this.context) 340 .width('100%') 341 .height('100%') 342 .backgroundColor('#ffff00') 343 .onReady(() =>{ 344 this.path2Db.moveTo(10, 10) 345 this.path2Db.quadraticCurveTo(100, 100, 200, 20) 346 this.context.stroke(this.path2Db) 347 }) 348 } 349 .width('100%') 350 .height('100%') 351 } 352 } 353 ``` 354 355  356 357 358## arc 359 360arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 361 362绘制弧线路径。 363 364**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 365 366**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 367 368**系统能力：** SystemCapability.ArkUI.ArkUI.Full 369 370**参数：** 371 372| 参数名 | 类型 | 必填 | 说明 | 373| ----- | -------- | ---- | ---------- | 374| x | number | 是 | 弧线圆心的x坐标值。<br>默认单位：vp。 | 375| y | number | 是 | 弧线圆心的y坐标值。<br>默认单位：vp。 | 376| radius | number | 是 | 弧线的圆半径。<br>默认单位：vp。 | 377| startAngle | number | 是 | 弧线的起始弧度。<br>单位：弧度。 | 378| endAngle | number | 是 | 弧线的终止弧度。<br>单位：弧度。 | 379| counterclockwise | boolean | 否 | 是否逆时针绘制圆弧。<br>true:逆时针方向绘制椭圆。<br>false:顺时针方向绘制椭圆。<br>默认值：false。 | 380 381**示例：** 382 383 ```ts 384 // xxx.ets 385 @Entry 386 @Component 387 struct Arc { 388 private settings: RenderingContextSettings = new RenderingContextSettings(true) 389 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 390 private path2Db: Path2D = new Path2D() 391 392 build() { 393 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 394 Canvas(this.context) 395 .width('100%') 396 .height('100%') 397 .backgroundColor('#ffff00') 398 .onReady(() =>{ 399 this.path2Db.arc(100, 75, 50, 0, 6.28) 400 this.context.stroke(this.path2Db) 401 }) 402 } 403 .width('100%') 404 .height('100%') 405 } 406 } 407 ``` 408 409  410 411 412## arcTo 413 414arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 415 416依据圆弧经过的点和圆弧半径创建圆弧路径。 417 418**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 419 420**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 421 422**系统能力：** SystemCapability.ArkUI.ArkUI.Full 423 424**参数：** 425 426| 参数名 | 类型 | 必填 | 说明 | 427| ----- | -------- | ---- | ---------- | 428| x1 | number | 是 | 圆弧经过的第一个点的x坐标值。<br>默认单位：vp。 | 429| y1 | number | 是 | 圆弧经过的第一个点的y坐标值。<br>默认单位：vp。 | 430| x2 | number | 是 | 圆弧经过的第二个点的x坐标值。<br>默认单位：vp。 | 431| y2 | number | 是 | 圆弧经过的第二个点的y坐标值。<br>默认单位：vp。 | 432| radius | number | 是 | 圆弧的圆半径值。<br>默认单位：vp。 | 433 434**示例：** 435 436 ```ts 437 // xxx.ets 438 @Entry 439 @Component 440 struct ArcTo { 441 private settings: RenderingContextSettings = new RenderingContextSettings(true) 442 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 443 private path2Db: Path2D = new Path2D() 444 445 build() { 446 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 447 Canvas(this.context) 448 .width('100%') 449 .height('100%') 450 .backgroundColor('#ffff00') 451 .onReady(() =>{ 452 this.path2Db.arcTo(150, 20, 150, 70, 50) 453 this.context.stroke(this.path2Db) 454 }) 455 } 456 .width('100%') 457 .height('100%') 458 } 459 } 460 ``` 461 462  463 464 465## ellipse 466 467ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 468 469在规定的矩形区域绘制一个椭圆。 470 471**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 472 473**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 474 475**系统能力：** SystemCapability.ArkUI.ArkUI.Full 476 477**参数：** 478 479| 参数名 | 类型 | 必填 | 说明 | 480| ----- | -------- | ---- | ---------- | 481| x | number | 是 | 椭圆圆心的x轴坐标。<br>默认单位：vp。| 482| y | number | 是 | 椭圆圆心的y轴坐标。<br>默认单位：vp。| 483| radiusX | number | 是 | 椭圆x轴的半径长度。<br>默认单位：vp。| 484| radiusY | number | 是 | 椭圆y轴的半径长度。<br>默认单位：vp。| 485| rotation | number | 是 | 椭圆的旋转角度。<br>单位：弧度。 | 486| startAngle | number | 是 | 椭圆绘制的起始点角度。<br>单位：弧度。 | 487| endAngle | number | 是 | 椭圆绘制的结束点角度。<br>单位：弧度。 | 488| counterclockwise | boolean | 否 | 是否以逆时针方向绘制椭圆。<br>true:逆时针方向绘制椭圆。<br>false:顺时针方向绘制椭圆。<br>默认值：false。 | 489 490**示例：** 491 492 ```ts 493 // xxx.ets 494 @Entry 495 @Component 496 struct CanvasExample { 497 private settings: RenderingContextSettings = new RenderingContextSettings(true) 498 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 499 private path2Db: Path2D = new Path2D() 500 501 build() { 502 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 503 Canvas(this.context) 504 .width('100%') 505 .height('100%') 506 .backgroundColor('#ffff00') 507 .onReady(() =>{ 508 this.path2Db.ellipse(200, 200, 50, 100, 0, Math.PI * 1, Math.PI*2) 509 this.context.stroke(this.path2Db) 510 }) 511 } 512 .width('100%') 513 .height('100%') 514 } 515 } 516 ``` 517 518  519 520 521## rect 522 523rect(x: number, y: number, w: number, h: number): void 524 525创建矩形路径。 526 527**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 528 529**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 530 531**系统能力：** SystemCapability.ArkUI.ArkUI.Full 532 533**参数：** 534 535| 参数名 | 类型 | 必填 | 说明 | 536| ----- | -------- | ---- | ---------- | 537| x | number | 是 | 指定矩形的左上角x坐标值。<br>默认单位：vp。 | 538| y | number | 是 | 指定矩形的左上角y坐标值。<br>默认单位：vp。 | 539| w | number | 是 | 指定矩形的宽度。<br>默认单位：vp。 | 540| h | number | 是 | 指定矩形的高度。<br>默认单位：vp。 | 541 542**示例：** 543 544 ```ts 545 // xxx.ets 546 @Entry 547 @Component 548 struct CanvasExample { 549 private settings: RenderingContextSettings = new RenderingContextSettings(true) 550 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 551 private path2Db: Path2D = new Path2D() 552 553 build() { 554 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 555 Canvas(this.context) 556 .width('100%') 557 .height('100%') 558 .backgroundColor('#ffff00') 559 .onReady(() =>{ 560 this.path2Db.rect(20, 20, 100, 100); 561 this.context.stroke(this.path2Db) 562 }) 563 } 564 .width('100%') 565 .height('100%') 566 } 567 } 568 ``` 569 570  571
