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