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