1# @ohos.graphics.drawing (Drawing) 2 3The Drawing module provides basic drawing capabilities, such as drawing rectangles, circles, points, straight lines, custom paths, and fonts. 4 5> **NOTE** 6> 7> - The initial APIs of this module are supported since API version 11. Newly added APIs will be marked with a superscript to indicate their earliest API version. 8> 9> - This module uses the physical pixel unit, px. 10> 11> - The module operates under a single-threaded model. The caller needs to manage thread safety and context state transitions. 12 13## Modules to Import 14 15```ts 16import { drawing } from '@kit.ArkGraphics2D'; 17``` 18 19## BlendMode 20 21Enumerates the blend modes. In blend mode, each operation generates a new color from two colors (source color and destination color). These operations are the same for the red, green, and blue color channels (the alpha channel follows a different rule). For simplicity, the following description uses the alpha channel as an example rather than naming each channel individually. 22 23For brevity, the following abbreviations are used: 24 25- **s**: source. 26- **d**: destination. 27- **sa**: source alpha. 28- **da**: destination alpha. 29 30The following abbreviations are used in the calculation result: 31 32- **r**: used when the calculation method is the same for the four channels (alpha, red, green, and blue channels). 33- **ra**: used when only the alpha channel is manipulated. 34- **rc**: used when the other three color channels are manipulated. 35 36The table below shows the effect of each blend mode, where the yellow rectangle is the source and the blue circle is the destination. 37 38**System capability**: SystemCapability.Graphics.Drawing 39 40| Name | Value | Description | Diagram | 41| ----------- | ---- | ------------------------------------------------------------ | -------- | 42| CLEAR | 0 | r = 0, sets the the destination pixels to fully transparent. |  | 43| SRC | 1 | r = s (all channels of the result equal those of the source), replaces the destination pixels with the source pixels.|  | 44| DST | 2 | r = d (all channels of the result equal those of the destination), keeps the destination pixels unchanged.|  | 45| SRC_OVER | 3 | r = s + (1 - sa) * d, draws the source pixels over the destination pixels, considering the source's transparency.|  | 46| DST_OVER | 4 | r = d + (1 - da) * s, draws the destination pixels over the source pixels, considering the destination's transparency.|  | 47| SRC_IN | 5 | r = s * da, retains only the intersection of the source pixels with the opaque parts of the destination.|  | 48| DST_IN | 6 | r = d * sa, retains only the intersection of the destination pixels with the opaque parts of the source.|  | 49| SRC_OUT | 7 | r = s * (1 - da), retains the parts of the source pixels that do not overlap with the destination.|  | 50| DST_OUT | 8 | r = d * (1 - sa), retains the parts of the destination pixels that do not overlap with the source.|  | 51| SRC_ATOP | 9 | r = s * da + d * (1 - sa), covers the destination pixels with the source pixels, showing the source only in the opaque parts of the destination.|  | 52| DST_ATOP | 10 | r = d * sa + s * (1 - da), covers the source pixels with the destination pixels, showing the destination only in the opaque parts of the source.|  | 53| XOR | 11 | r = s * (1 - da) + d * (1 - sa), shows only the non-overlapping parts of the source and destination pixels.|  | 54| PLUS | 12 | r = min(s + d, 1), adds the color values of the source and destination pixels. |  | 55| MODULATE | 13 | r = s * d, multiplies the color values of the source and destination pixels. |  | 56| SCREEN | 14 | r = s + d - s * d, inverts the color values of the source and destination pixels, multiplies them, and then inverts the result, typically producing a brighter outcome.|  | 57| OVERLAY | 15 | Selectively applies **MULTIPLY** or **SCREEN** based on the brightness of the destination pixels, enhancing contrast.|  | 58| DARKEN | 16 | rc = s + d - max(s * da, d * sa), ra = s + (1 - sa) * d, takes the darker color values between the source and destination pixels.|  | 59| LIGHTEN | 17 | rc = s + d - min(s * da, d * sa), ra = s + (1 - sa) * d, takes the lighter color values between the source and destination pixels.|  | 60| COLOR_DODGE | 18 | Brightens the destination pixels by reducing contrast to reflect the source pixels. |  | 61| COLOR_BURN | 19 | Darkens the destination pixels by increasing contrast to reflect the source pixels. |  | 62| HARD_LIGHT | 20 | Selectively applies **MULTIPLY** or **SCREEN** based on the brightness of the source pixels. |  | 63| SOFT_LIGHT | 21 | Softly brightens or darkens the destination pixels based on the brightness of the source pixels. |  | 64| DIFFERENCE | 22 | rc = s + d - 2 * (min(s * da, d * sa)), ra = s + (1 - sa) * d, calculates the difference between the color values of the source and destination pixels.|  | 65| EXCLUSION | 23 | rc = s + d - two(s * d), ra = s + (1 - sa) * d, similar to **DIFFERENCE** but with lower contrast.|  | 66| MULTIPLY | 24 | r = s * (1 - da) + d * (1 - sa) + s * d, multiplies the color values of the source and destination pixels, typically resulting in a darker outcome.|  | 67| HUE | 25 | Uses the hue of the source pixels and the saturation and brightness of the destination pixels. |  | 68| SATURATION | 26 | Uses the saturation of the source pixels and the hue and brightness of the destination pixels. |  | 69| COLOR | 27 | Uses the hue and saturation of the source pixels and the brightness of the destination pixels. |  | 70| LUMINOSITY | 28 | Uses the brightness of the source pixels and the hue and saturation of the destination pixels. |  | 71 72## PathMeasureMatrixFlags<sup>12+</sup> 73 74Enumerates the types of matrix information obtained during path measurement. 75 76**System capability**: SystemCapability.Graphics.Drawing 77 78| Name | Value | Description | 79| ----------- | ---- | ------------------------------------------------------------ | 80| GET_POSITION_MATRIX | 0 | Matrix corresponding to the position information. | 81| GET_TANGENT_MATRIX | 1 | Matrix corresponding to the tangent information.| 82| GET_POSITION_AND_TANGENT_MATRIX | 2 | Matrix corresponding to the position and tangent information.| 83 84## SrcRectConstraint<sup>12+</sup> 85 86Enumerates the constraint types of the source rectangle. 87 88**System capability**: SystemCapability.Graphics.Drawing 89 90| Name | Value | Description | 91| ----------- | ---- | ------------------------------------------------------------ | 92| STRICT | 0 | The sampling range is strictly confined to the source rectangle, resulting in a slow sampling speed. | 93| FAST | 1 | The sampling range is not limited to the source rectangle and can extend beyond it, allowing for a high sampling speed.| 94 95## ShadowFlag<sup>12+</sup> 96 97Enumerates the flags used to control shadow drawing to create various shadow effects. 98 99**System capability**: SystemCapability.Graphics.Drawing 100 101| Name | Value | Description | 102| -------------------------- | ---- | ------------------ | 103| NONE | 0 | None of the flags are enabled. | 104| TRANSPARENT_OCCLUDER | 1 | The occluder is transparent. | 105| GEOMETRIC_ONLY | 2 | Only the geometric shadow effect is used. | 106| ALL | 3 | All the flags are enabled.| 107 108## PathOp<sup>12+</sup> 109 110Enumerates the operation modes available for a path. 111 112**System capability**: SystemCapability.Graphics.Drawing 113 114| Name | Value | Description | 115| ---------------------- | ---- | ------------------------------ | 116| DIFFERENCE | 0 | Difference operation.| 117| INTERSECT | 1 | Intersection operation.| 118| UNION | 2 | Union operation.| 119| XOR | 3 | XOR operation.| 120| REVERSE_DIFFERENCE | 4 | Reverse difference operation.| 121 122## PathIteratorVerb<sup>18+</sup> 123 124Enumerates the types of path operations contained in the iterator. 125 126**System capability**: SystemCapability.Graphics.Drawing 127 128| Name | Value | Description | 129| ----- | ---- | ------------------------------ | 130| MOVE | 0 | Sets the start point.| 131| LINE | 1 | Adds a line segment.| 132| QUAD | 2 | Adds a quadratic Bezier curve for smooth transitions.| 133| CONIC | 3 | Adds a conic curve.| 134| CUBIC | 4 | Adds a cubic Bezier curve for smooth transitions.| 135| CLOSE | 5 | Closes a path.| 136| DONE | CLOSE + 1 | The path setting is complete.| 137 138## PathIterator<sup>18+</sup> 139 140Implements a path operation iterator. 141 142### constructor<sup>18+</sup> 143 144constructor(path: Path) 145 146Creates an iterator and binds it with a path. 147 148**System capability**: SystemCapability.Graphics.Drawing 149 150**Parameters** 151 152| Name | Type | Mandatory| Description | 153| -------- | -------------------------------------------- | ---- | ------------------------------- | 154| path | [Path](#path) | Yes | **Path** object bound to the iterator. | 155 156**Example** 157 158```ts 159import { drawing } from '@kit.ArkGraphics2D'; 160let path: drawing.Path = new drawing.Path(); 161let iter: drawing.PathIterator = new drawing.PathIterator(path); 162``` 163 164### next<sup>18+</sup> 165 166next(points: Array<common2D.Point>, offset?: number): PathIteratorVerb 167 168Retrieves the next operation in this path and moves the iterator to that operation. 169 170**System capability**: SystemCapability.Graphics.Drawing 171 172**Parameters** 173 174| Name | Type | Mandatory| Description | 175| -------- | -------------------------------------------- | ---- | ------------------------------- | 176| points | Array\<[common2D.Point](js-apis-graphics-common2D.md#point)> | Yes | An array of coordinate points. The array must be at least 4 elements long. After the operation, the array will be overwritten. The number of coordinate point pairs written to the array depends on the path operation type. Specifically: **MOVE** inserts 1 pair; **LINE** inserts 2 pairs; **QUAD** inserts 3 pairs; **CONIC** inserts 3.5 pairs (3 pairs plus the weight for the conic curve); **CUBIC** inserts 4 pairs; **CLOSE** and **DONE** do not insert any pairs. The array length should be at least the offset plus 4.| 177| offset | number | No | Offset from the start of the array where writing begins. The default value is **0**. The value range is [0, size - 4], where **size** is the length of the coordinate point array.| 178 179**Return value** 180 181| Type | Description | 182| --------------------- | -------------- | 183| [PathIteratorVerb](#pathiteratorverb18) | Path operation type contained in the iterator.| 184 185**Error codes** 186 187For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 188 189| ID| Error Message| 190| ------- | --------------------------------------------| 191| 401 | Parameter error.Possible causes:1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed. | 192 193**Example** 194 195```ts 196import { common2D, drawing } from '@kit.ArkGraphics2D'; 197let path: drawing.Path = new drawing.Path(); 198path.moveTo(10, 20); 199let iter: drawing.PathIterator = new drawing.PathIterator(path); 200let verbStr: Array<string> = ["MOVE", "LINE", "QUAD", "CONIC", "CUBIC", "CLOSE", "DONE"]; 201let pointCount: Array<number> = [1,2,3,4,4,0,0]; //1,2,3,3.5,4,0,0 202let points: Array<common2D.Point> = [{x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}]; 203let offset = 0; 204let verb = iter.next(points, offset); 205let outputMessage: string = "pathIteratorNext: "; 206outputMessage += "verb =" + verbStr[verb] + "; has " + pointCount[verb] + " pairs: "; 207for (let j = 0; j < pointCount[verb] + offset; j++) { 208 outputMessage += "[" + points[j].x + ", " + points[j].y + "]"; 209} 210console.info(outputMessage); 211``` 212 213### peek<sup>18+</sup> 214 215peek(): PathIteratorVerb 216 217Retrieves the next operation in this path, without moving the iterator. 218 219**System capability**: SystemCapability.Graphics.Drawing 220 221**Return value** 222 223| Type | Description | 224| --------------------- | -------------- | 225| [PathIteratorVerb](#pathiteratorverb18) | Path operation type contained in the iterator.| 226 227**Example** 228 229```ts 230import { drawing } from '@kit.ArkGraphics2D'; 231let path: drawing.Path = new drawing.Path(); 232let iter: drawing.PathIterator = new drawing.PathIterator(path); 233let res = iter.peek(); 234``` 235 236### hasNext<sup>18+</sup> 237 238hasNext(): boolean 239 240Checks whether there are other operations in the path operation iterator. 241 242**System capability**: SystemCapability.Graphics.Drawing 243 244**Return value** 245 246| Type | Description | 247| ------- | -------------- | 248| boolean | Check result. The value **true** means that there are other operations in the path operation iterator, and **false** means the opposite.| 249 250**Example** 251 252```ts 253import { drawing } from '@kit.ArkGraphics2D'; 254let path: drawing.Path = new drawing.Path(); 255let iter: drawing.PathIterator = new drawing.PathIterator(path); 256let res = iter.hasNext(); 257``` 258 259## Path 260 261A compound geometric path consisting of line segments, arcs, quadratic Bezier curves, and cubic Bezier curves. 262 263### constructor<sup>12+</sup> 264 265constructor() 266 267Constructs a path. 268 269**System capability**: SystemCapability.Graphics.Drawing 270 271**Example** 272 273```ts 274import { drawing } from '@kit.ArkGraphics2D'; 275let path: drawing.Path = new drawing.Path(); 276``` 277 278### constructor<sup>12+</sup> 279 280constructor(path: Path) 281 282Constructs a copy of an existing path. 283 284**System capability**: SystemCapability.Graphics.Drawing 285 286**Parameters** 287 288| Name | Type | Mandatory| Description | 289| -------- | -------------------------------------------- | ---- | ------------------------------- | 290| path | [Path](#path) | Yes | Path to copy. | 291 292**Example** 293 294```ts 295import { drawing } from '@kit.ArkGraphics2D'; 296let path: drawing.Path = new drawing.Path(); 297path.moveTo(0, 0); 298path.lineTo(0, 700); 299path.lineTo(700, 0); 300path.close(); 301let path1: drawing.Path = new drawing.Path(path); 302``` 303 304### moveTo 305 306moveTo(x: number, y: number) : void 307 308Sets the start point of this path. 309 310**System capability**: SystemCapability.Graphics.Drawing 311 312**Parameters** 313 314| Name| Type | Mandatory| Description | 315| ------ | ------ | ---- | ----------------------- | 316| x | number | Yes | X coordinate of the start point. The value is a floating point number.| 317| y | number | Yes | Y coordinate of the start point. The value is a floating point number.| 318 319**Error codes** 320 321For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 322 323| ID| Error Message| 324| ------- | --------------------------------------------| 325| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 326 327**Example** 328 329```ts 330import { drawing } from '@kit.ArkGraphics2D'; 331let path = new drawing.Path(); 332path.moveTo(10,10); 333``` 334 335### lineTo 336 337lineTo(x: number, y: number) : void 338 339Draws a line segment from the last point of this path to the target point. If the path is empty, the start point (0, 0) is used. 340 341**System capability**: SystemCapability.Graphics.Drawing 342 343**Parameters** 344 345| Name| Type | Mandatory| Description | 346| ------ | ------ | ---- | ----------------------- | 347| x | number | Yes | X coordinate of the target point. The value is a floating point number.| 348| y | number | Yes | Y coordinate of the target point. The value is a floating point number.| 349 350**Error codes** 351 352For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 353 354| ID| Error Message| 355| ------- | --------------------------------------------| 356| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 357 358**Example** 359 360```ts 361import { drawing } from '@kit.ArkGraphics2D'; 362let path = new drawing.Path(); 363path.moveTo(10,10); 364path.lineTo(10, 15); 365``` 366 367### arcTo 368 369arcTo(x1: number, y1: number, x2: number, y2: number, startDeg: number, sweepDeg: number): void 370 371Draws an arc to this path. This is done by using angle arc mode. In this mode, a rectangle that encloses an ellipse is specified first, and then a start angle and a sweep angle are specified. The arc is a portion of the ellipse defined by the start angle and the sweep angle. By default, a line segment from the last point of the path to the start point of the arc is also added. 372 373**System capability**: SystemCapability.Graphics.Drawing 374 375**Parameters** 376 377| Name | Type | Mandatory| Description | 378| -------- | ------ | ---- | -------------------------- | 379| x1 | number | Yes | X coordinate of the upper left corner of the rectangle. The value is a floating point number.| 380| y1 | number | Yes | Y coordinate of the upper left corner of the rectangle. The value is a floating point number.| 381| x2 | number | Yes | X coordinate of the lower right corner of the rectangle. The value is a floating point number.| 382| y2 | number | Yes | Y coordinate of the lower right corner of the rectangle. The value is a floating point number.| 383| startDeg | number | Yes | Start angle. The start direction (0°) of the angle is the positive direction of the X axis.| 384| sweepDeg | number | Yes | Angle to sweep, in degrees. A positive number indicates a clockwise sweep, and a negative value indicates a counterclockwise swipe. The actual swipe degree is the modulo operation result of the input parameter by 360.| 385 386**Error codes** 387 388For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 389 390| ID| Error Message| 391| ------- | --------------------------------------------| 392| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 393 394**Example** 395 396```ts 397import { drawing } from '@kit.ArkGraphics2D'; 398let path = new drawing.Path(); 399path.moveTo(10,10); 400path.arcTo(10, 15, 10, 10, 10, 10); 401``` 402 403### quadTo 404 405quadTo(ctrlX: number, ctrlY: number, endX: number, endY: number): void 406 407Draws a quadratic Bezier curve from the last point of this path to the target point. If the path is empty, the start point (0, 0) is used. 408 409**System capability**: SystemCapability.Graphics.Drawing 410 411**Parameters** 412 413| Name| Type | Mandatory| Description | 414| ------ | ------ | ---- | --------------------- | 415| ctrlX | number | Yes | X coordinate of the control point. The value is a floating point number.| 416| ctrlY | number | Yes | Y coordinate of the control point. The value is a floating point number.| 417| endX | number | Yes | X coordinate of the target point. The value is a floating point number.| 418| endY | number | Yes | Y coordinate of the target point. The value is a floating point number.| 419 420**Error codes** 421 422For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 423 424| ID| Error Message| 425| ------- | --------------------------------------------| 426| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 427 428**Example** 429 430```ts 431import { drawing } from '@kit.ArkGraphics2D'; 432let path = new drawing.Path(); 433path.moveTo(10,10); 434path.quadTo(10, 15, 10, 10); 435``` 436 437### conicTo<sup>12+</sup> 438 439conicTo(ctrlX: number, ctrlY: number, endX: number, endY: number, weight: number): void 440 441Draws a conic curve from the last point of this path to the target point. If the path is empty, the start point (0, 0) is used. 442 443**System capability**: SystemCapability.Graphics.Drawing 444 445**Parameters** 446 447| Name| Type | Mandatory| Description | 448| ------ | ------ | ---- | --------------------- | 449| ctrlX | number | Yes | X coordinate of the control point. The value is a floating point number.| 450| ctrlY | number | Yes | Y coordinate of the control point. The value is a floating point number.| 451| endX | number | Yes | X coordinate of the target point. The value is a floating point number.| 452| endY | number | Yes | Y coordinate of the target point. The value is a floating point number.| 453| weight | number | Yes | Weight of the curve, which determines its shape. The larger the value, the closer of the curve to the control point. If the value is less than or equal to 0, this API is equivalent to [lineTo](#lineto), that is, adding a line segment from the last point of the path to the target point. If the value is 1, this API is equivalent to [quadTo](#quadto). The value is a floating point number.| 454 455**Error codes** 456 457For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 458 459| ID| Error Message| 460| ------- | --------------------------------------------| 461| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 462 463**Example** 464 465```ts 466import { drawing } from '@kit.ArkGraphics2D'; 467 468const path = new drawing.Path(); 469path.conicTo(200, 400, 100, 200, 0); 470``` 471 472### cubicTo 473 474cubicTo(ctrlX1: number, ctrlY1: number, ctrlX2: number, ctrlY2: number, endX: number, endY: number): void 475 476Draws a cubic Bezier curve from the last point of this path to the target point. If the path is empty, the start point (0, 0) is used. 477 478**System capability**: SystemCapability.Graphics.Drawing 479 480**Parameters** 481 482| Name| Type | Mandatory| Description | 483| ------ | ------ | ---- | --------------------------- | 484| ctrlX1 | number | Yes | X coordinate of the first control point. The value is a floating point number.| 485| ctrlY1 | number | Yes | Y coordinate of the first control point. The value is a floating point number.| 486| ctrlX2 | number | Yes | X coordinate of the second control point. The value is a floating point number.| 487| ctrlY2 | number | Yes | Y coordinate of the second control point. The value is a floating point number.| 488| endX | number | Yes | X coordinate of the target point. The value is a floating point number.| 489| endY | number | Yes | Y coordinate of the target point. The value is a floating point number.| 490 491**Error codes** 492 493For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 494 495| ID| Error Message| 496| ------- | --------------------------------------------| 497| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 498 499**Example** 500 501```ts 502import { drawing } from '@kit.ArkGraphics2D'; 503let path = new drawing.Path(); 504path.moveTo(10,10); 505path.cubicTo(100, 100, 80, 150, 300, 150); 506``` 507 508### rMoveTo<sup>12+</sup> 509 510rMoveTo(dx : number, dy : number): void 511 512Sets the start position relative to the last point of this path. If the path is empty, the start point (0, 0) is used. 513 514**System capability**: SystemCapability.Graphics.Drawing 515 516**Parameters** 517 518| Name| Type | Mandatory| Description | 519| ------ | ------ | ---- | ----------------------- | 520| dx | number | Yes | X offset of the start point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.| 521| dy | number | Yes | Y offset of the start point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.| 522 523**Error codes** 524 525For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 526 527| ID| Error Message| 528| ------- | --------------------------------------------| 529| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 530 531**Example** 532 533```ts 534import { drawing } from '@kit.ArkGraphics2D'; 535 536const path = new drawing.Path(); 537path.rMoveTo(10, 10); 538``` 539 540### rLineTo<sup>12+</sup> 541 542rLineTo(dx : number, dy : number): void 543 544Draws a line segment from the last point of this path to a point relative to the last point. If the path is empty, the start point (0, 0) is used. 545 546**System capability**: SystemCapability.Graphics.Drawing 547 548**Parameters** 549 550| Name| Type | Mandatory| Description | 551| ------ | ------ | ---- | ----------------------- | 552| dx | number | Yes | X offset of the target point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.| 553| dy | number | Yes | Y offset of the target point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.| 554 555**Error codes** 556 557For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 558 559| ID| Error Message| 560| ------- | --------------------------------------------| 561| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 562 563**Example** 564 565```ts 566import { drawing } from '@kit.ArkGraphics2D'; 567 568const path = new drawing.Path(); 569path.rLineTo(400, 200); 570``` 571 572### rQuadTo<sup>12+</sup> 573 574rQuadTo(dx1: number, dy1: number, dx2: number, dy2: number): void 575 576Draws a quadratic Bezier curve from the last point of this path to a point relative to the last point. If the path is empty, the start point (0, 0) is used. 577 578**System capability**: SystemCapability.Graphics.Drawing 579 580**Parameters** 581 582| Name| Type | Mandatory| Description | 583| ------ | ------ | ---- | --------------------- | 584| dx1 | number | Yes | X offset of the control point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.| 585| dy1 | number | Yes | Y offset of the control point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.| 586| dx2 | number | Yes | X offset of the target point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.| 587| dy2 | number | Yes | Y offset of the target point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.| 588 589**Error codes** 590 591For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 592 593| ID| Error Message| 594| ------- | --------------------------------------------| 595| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 596 597**Example** 598 599```ts 600import { drawing } from '@kit.ArkGraphics2D'; 601 602const path = new drawing.Path(); 603path.rQuadTo(100, 0, 0, 200); 604``` 605 606### rConicTo<sup>12+</sup> 607 608rConicTo(ctrlX: number, ctrlY: number, endX: number, endY: number, weight: number): void 609 610Draws a conic curve from the last point of this path to a point relative to the last point. If the path is empty, the start point (0, 0) is used. 611 612**System capability**: SystemCapability.Graphics.Drawing 613 614**Parameters** 615 616| Name| Type | Mandatory| Description | 617| ------ | ------ | ---- | --------------------- | 618| ctrlX | number | Yes | X offset of the control point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.| 619| ctrlY | number | Yes | Y offset of the control point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.| 620| endX | number | Yes | X offset of the target point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.| 621| endY | number | Yes | Y offset of the target point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.| 622| weight | number | Yes | Weight of the curve, which determines its shape. The larger the value, the closer of the curve to the control point. If the value is less than or equal to 0, this API is equivalent to [rLineTo](#rlineto12), that is, adding a line segment from the last point of the path to the target point. If the value is 1, this API is equivalent to [rQuadTo](#rquadto12). The value is a floating point number.| 623 624**Error codes** 625 626For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 627 628| ID| Error Message| 629| ------- | --------------------------------------------| 630| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 631 632**Example** 633 634```ts 635import { drawing } from '@kit.ArkGraphics2D'; 636 637const path = new drawing.Path(); 638path.rConicTo(200, 400, 100, 200, 0); 639``` 640 641### rCubicTo<sup>12+</sup> 642 643rCubicTo(ctrlX1: number, ctrlY1: number, ctrlX2: number, ctrlY2: number, endX: number, endY: number): void 644 645Draws a cubic Bezier curve from the last point of this path to a point relative to the last point. If the path is empty, the start point (0, 0) is used. 646 647**System capability**: SystemCapability.Graphics.Drawing 648 649**Parameters** 650 651| Name| Type | Mandatory| Description | 652| ------ | ------ | ---- | --------------------------- | 653| ctrlX1 | number | Yes | X offset of the first control point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.| 654| ctrlY1 | number | Yes | Y offset of the first control point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.| 655| ctrlX2 | number | Yes | X offset of the second control point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.| 656| ctrlY2 | number | Yes | Y offset of the second control point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.| 657| endX | number | Yes | X offset of the target point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.| 658| endY | number | Yes | Y offset of the target point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.| 659 660**Error codes** 661 662For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 663 664| ID| Error Message| 665| ------- | --------------------------------------------| 666| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 667 668**Example** 669 670```ts 671import { drawing } from '@kit.ArkGraphics2D'; 672 673const path = new drawing.Path(); 674path.rCubicTo(200, 0, 0, 200, -20, 0); 675``` 676 677### addArc<sup>12+</sup> 678 679addArc(rect: common2D.Rect, startAngle: number, sweepAngle: number): void 680 681Adds an arc to this path. 682When **startAngle** and **sweepAngle** meet the following conditions, an oval instead of an arc is added: 6831. The result of **startAngle** modulo 90 is close to 0. 6842. The value of **sweepAngle** is not in the range of (-360, 360). 685In other cases, this API adds an arc by applying the result of **sweepAngle** modulo 360 to the path. 686 687**System capability**: SystemCapability.Graphics.Drawing 688 689**Parameters** 690 691| Name | Type | Mandatory | Description | 692| ----------- | ---------------------------------------- | ---- | ------------------- | 693| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangular boundary that encapsulates the oval including the arc. | 694| startAngle | number | Yes | Start angle of the arc, in degrees. The value 0 indicates the positive direction of the X axis. The value is a floating point number.| 695| sweepAngle | number | Yes | Angle to sweep, in degrees. A positive number indicates a clockwise sweep, and a negative number indicates a counterclockwise sweep. The value is a floating point number.| 696 697**Error codes** 698 699For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 700 701| ID| Error Message| 702| ------- | --------------------------------------------| 703| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 704 705**Example** 706 707```ts 708import { common2D, drawing } from '@kit.ArkGraphics2D'; 709 710let path = new drawing.Path(); 711const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 712path.addArc(rect, 90, 180); 713``` 714 715### addCircle<sup>12+</sup> 716 717addCircle(x: number, y: number, radius: number, pathDirection?: PathDirection): void 718 719Adds a circle to this path in the specified direction. The start point of the circle is (x + radius, y). 720 721**System capability**: SystemCapability.Graphics.Drawing 722 723**Parameters** 724 725| Name | Type | Mandatory | Description | 726| ----------- | ---------------------------------------- | ---- | ------------------- | 727| x | number | Yes | X coordinate of the center of the circle. The value is a floating point number.| 728| y | number | Yes | Y coordinate of the center of the circle. The value is a floating point number.| 729| radius | number | Yes | Radius of the circle. The value is a floating point number. If the value is less than or equal to 0, there is no effect.| 730| pathDirection | [PathDirection](#pathdirection12) | No | Direction of the path. The default direction is clockwise.| 731 732**Error codes** 733 734For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 735 736| ID| Error Message| 737| ------- | --------------------------------------------| 738| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed. | 739 740**Example** 741 742```ts 743 744import { drawing } from '@kit.ArkGraphics2D'; 745 746let path = new drawing.Path(); 747path.addCircle(100, 200, 50, drawing.PathDirection.CLOCKWISE); 748``` 749 750### addOval<sup>12+</sup> 751 752addOval(rect: common2D.Rect, start: number, pathDirection?: PathDirection): void 753 754Adds an oval to this path in the specified direction, where the **common2D.Rect** object specifies the outer tangent rectangle of the oval. 755 756**System capability**: SystemCapability.Graphics.Drawing 757 758**Parameters** 759 760| Name | Type | Mandatory | Description | 761| ----------- | ---------------------------------------- | ---- | ------------------- | 762| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangular boundary of the oval. | 763| start | number | Yes | Start point of the oval, where 0, 1, 2, and 3 correspond to the upper, right, lower, and left points, respectively. The value is an integer greater than or equal to 0. If the value is greater than or equal to 4, the remainder of 4 is used.| 764| pathDirection | [PathDirection](#pathdirection12) | No | Direction of the path. The default direction is clockwise.| 765 766**Error codes** 767 768For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 769 770| ID| Error Message| 771| ------- | --------------------------------------------| 772| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 773 774**Example** 775 776```ts 777import { common2D, drawing } from '@kit.ArkGraphics2D'; 778 779let path = new drawing.Path(); 780const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 781path.addOval(rect, 5, drawing.PathDirection.CLOCKWISE); 782``` 783 784### addRect<sup>12+</sup> 785 786addRect(rect: common2D.Rect, pathDirection?: PathDirection): void 787 788Adds a rectangle to this path in the specified direction. The start point is the upper left corner of the rectangle. 789 790**System capability**: SystemCapability.Graphics.Drawing 791 792**Parameters** 793 794| Name | Type | Mandatory | Description | 795| ----------- | ---------------------------------------- | ---- | ------------------- | 796| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangle. | 797| pathDirection | [PathDirection](#pathdirection12) | No | Direction of the path. The default direction is clockwise.| 798 799**Error codes** 800 801For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 802 803| ID| Error Message| 804| ------- | --------------------------------------------| 805| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 806 807**Example** 808 809```ts 810import { common2D, drawing } from '@kit.ArkGraphics2D'; 811 812let path = new drawing.Path(); 813const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 814path.addRect(rect, drawing.PathDirection.CLOCKWISE); 815``` 816 817### addRoundRect<sup>12+</sup> 818 819addRoundRect(roundRect: RoundRect, pathDirection?: PathDirection): void 820 821Adds a rounded rectangle to this path in the specified direction. When the path direction is clockwise, the start point is at the intersection of the rounded rectangle's left boundary and its lower left corner. When the path direction is counterclockwise, the start point is at the intersection point between the left boundary and the upper left corner. 822 823**System capability**: SystemCapability.Graphics.Drawing 824 825**Parameters** 826 827| Name | Type | Mandatory | Description | 828| ----------- | ---------------------------------------- | ---- | ------------------- | 829| roundRect | [RoundRect](#roundrect12) | Yes | Rounded rectangle. | 830| pathDirection | [PathDirection](#pathdirection12) | No | Direction of the path. The default direction is clockwise.| 831 832**Error codes** 833 834For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 835 836| ID| Error Message| 837| ------- | --------------------------------------------| 838| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 839 840**Example** 841 842```ts 843import { common2D, drawing } from '@kit.ArkGraphics2D'; 844 845let path = new drawing.Path(); 846const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 847let roundRect = new drawing.RoundRect(rect, 50, 50); 848path.addRoundRect(roundRect, drawing.PathDirection.CLOCKWISE); 849``` 850 851### addPath<sup>12+</sup> 852 853addPath(path: Path, matrix?: Matrix | null): void 854 855Transforms the points in a path by a matrix and stores the resulting path in the current **Path** object. 856 857**System capability**: SystemCapability.Graphics.Drawing 858 859**Parameters** 860 861| Name | Type | Mandatory | Description | 862| ----------- | ---------------------------------------- | ---- | ------------------- | 863| path | [Path](#path) | Yes | Source **Path** object. | 864| matrix | [Matrix](#matrix12)\|null | No | **Matrix** object. The default value is an identity matrix.| 865 866**Error codes** 867 868For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 869 870| ID| Error Message| 871| ------- | --------------------------------------------| 872| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 873 874**Example** 875 876```ts 877import { common2D, drawing } from '@kit.ArkGraphics2D'; 878 879let path = new drawing.Path(); 880let matrix = new drawing.Matrix(); 881const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 882let roundRect = new drawing.RoundRect(rect, 50, 50); 883path.addRoundRect(roundRect, drawing.PathDirection.CLOCKWISE); 884let dstPath = new drawing.Path(); 885dstPath.addPath(path, matrix); 886``` 887 888### transform<sup>12+</sup> 889 890transform(matrix: Matrix): void 891 892Transforms the points in this path by a matrix. 893 894**System capability**: SystemCapability.Graphics.Drawing 895 896**Parameters** 897 898| Name | Type | Mandatory | Description | 899| ----------- | ---------------------------------------- | ---- | ------------------- | 900| matrix | [Matrix](#matrix12) | Yes | **Matrix** object.| 901 902**Error codes** 903 904For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 905 906| ID| Error Message| 907| ------- | --------------------------------------------| 908| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 909 910**Example** 911 912```ts 913import { common2D, drawing } from '@kit.ArkGraphics2D'; 914 915let path = new drawing.Path(); 916let matrix = new drawing.Matrix(); 917matrix.setScale(1.5, 1.5, 10, 10); 918const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 919let roundRect = new drawing.RoundRect(rect, 50, 50); 920path.addRoundRect(roundRect, drawing.PathDirection.CLOCKWISE); 921path.transform(matrix); 922``` 923 924### contains<sup>12+</sup> 925 926contains(x: number, y: number): boolean 927 928Checks whether a coordinate point is included in this path. For details, see [PathFillType](#pathfilltype12). 929 930**System capability**: SystemCapability.Graphics.Drawing 931 932**Parameters** 933 934| Name| Type | Mandatory| Description | 935| ------ | ------ | ---- | ----------------------- | 936| x | number | Yes | X coordinate. The value is a floating point number.| 937| y | number | Yes | Y coordinate. The value is a floating point number.| 938 939**Return value** 940 941| Type | Description | 942| ------- | -------------- | 943| boolean | Check result. The value **true** means that the coordinate point is included in the path, and **false** means the opposite.| 944 945**Error codes** 946 947For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 948 949| ID| Error Message| 950| ------- | --------------------------------------------| 951| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 952 953**Example** 954 955```ts 956import { common2D, drawing } from '@kit.ArkGraphics2D'; 957 958const path = new drawing.Path(); 959let rect : common2D.Rect = {left: 50, top: 50, right: 250, bottom: 250}; 960path.addRect(rect, drawing.PathDirection.CLOCKWISE); 961console.info("test contains: " + path.contains(0, 0)); 962console.info("test contains: " + path.contains(60, 60)); 963``` 964 965### setFillType<sup>12+</sup> 966 967setFillType(pathFillType: PathFillType): void 968 969Sets the fill type of this path. The fill type determines how "inside" of the path is drawn. For example, when the fill type **Winding** is used, "inside" of the path is determined by a non-zero sum of signed edge crossings. When **EvenOdd** is used, "inside" of the path is determined by an odd number of edge crossings. 970 971**System capability**: SystemCapability.Graphics.Drawing 972 973**Parameters** 974 975| Name | Type | Mandatory | Description | 976| ----------- | ---------------------------------------- | ---- | ------------------- | 977| pathFillType | [PathFillType](#pathfilltype12) | Yes | Fill type of the path.| 978 979**Error codes** 980 981For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 982 983| ID| Error Message| 984| ------- | --------------------------------------------| 985| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 986 987**Example** 988 989```ts 990import { drawing } from '@kit.ArkGraphics2D'; 991 992const path = new drawing.Path(); 993path.setFillType(drawing.PathFillType.WINDING); 994``` 995 996### getBounds<sup>12+</sup> 997 998getBounds(): common2D.Rect 999 1000Obtains the minimum bounding rectangle that encloses this path. 1001 1002**System capability**: SystemCapability.Graphics.Drawing 1003 1004**Return value** 1005 1006| Type | Description | 1007| -------------------------------------------------- | ---------------------- | 1008| [common2D.Rect](js-apis-graphics-common2D.md#rect) | Minimum bounding rectangle.| 1009 1010**Example** 1011 1012```ts 1013import { common2D, drawing } from '@kit.ArkGraphics2D'; 1014 1015const path = new drawing.Path(); 1016path.lineTo(50, 40) 1017let rect : common2D.Rect = {left: 0, top: 0, right: 0, bottom: 0}; 1018rect = path.getBounds(); 1019console.info("test rect.left: " + rect.left); 1020console.info("test rect.top: " + rect.top); 1021console.info("test rect.right: " + rect.right); 1022console.info("test rect.bottom: " + rect.bottom); 1023``` 1024 1025### addPolygon<sup>12+</sup> 1026 1027addPolygon(points: Array\<common2D.Point>, close: boolean): void 1028 1029Adds a polygon to this path. 1030 1031**System capability**: SystemCapability.Graphics.Drawing 1032 1033**Parameters** 1034 1035| Name| Type | Mandatory| Description | 1036| ------ | ------ | ---- | ----------------------- | 1037| points | Array\<[common2D.Point](js-apis-graphics-common2D.md#point)> | Yes | Array that holds the vertex coordinates of the polygon.| 1038| close | boolean | Yes | Whether to close the path, that is, whether to add a line segment from the start point to the end point of the path. The value **true** means to close the path, and **false** means the opposite.| 1039 1040**Error codes** 1041 1042For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1043 1044| ID| Error Message| 1045| ------- | --------------------------------------------| 1046| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1047 1048**Example** 1049 1050```ts 1051import { common2D, drawing } from '@kit.ArkGraphics2D'; 1052 1053let pointsArray = new Array<common2D.Point>(); 1054const point1: common2D.Point = { x: 200, y: 200 }; 1055const point2: common2D.Point = { x: 400, y: 200 }; 1056const point3: common2D.Point = { x: 100, y: 400 }; 1057const point4: common2D.Point = { x: 300, y: 400 }; 1058pointsArray.push(point1); 1059pointsArray.push(point2); 1060pointsArray.push(point3); 1061pointsArray.push(point4); 1062const path = new drawing.Path(); 1063path.addPolygon(pointsArray, false); 1064``` 1065 1066### offset<sup>12+</sup> 1067 1068offset(dx: number, dy: number): Path 1069 1070Offsets this path by specified distances along the X axis and Y axis and stores the resulting path in the **Path** object returned. 1071 1072**System capability**: SystemCapability.Graphics.Drawing 1073 1074**Parameters** 1075 1076| Name| Type | Mandatory| Description | 1077| ------ | ------ | ---- | ----------------------- | 1078| dx | number | Yes | X offset. A positive number indicates an offset towards the positive direction of the X axis, and a negative number indicates an offset towards the negative direction of the X axis. The value is a floating point number.| 1079| dy | number | Yes | Y offset. A positive number indicates an offset towards the positive direction of the Y axis, and a negative number indicates an offset towards the negative direction of the Y axis. The value is a floating point number.| 1080 1081**Return value** 1082 1083| Type | Description | 1084| ------ | ------------------ | 1085| [Path](#path) | New path generated.| 1086 1087**Error codes** 1088 1089For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1090 1091| ID| Error Message| 1092| ------- | --------------------------------------------| 1093| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1094 1095**Example** 1096 1097```ts 1098import { drawing } from '@kit.ArkGraphics2D'; 1099 1100const path = new drawing.Path(); 1101path.moveTo(200, 200); 1102path.lineTo(300, 300); 1103const dst = path.offset(200, 200); 1104``` 1105 1106### op<sup>12+</sup> 1107 1108op(path: Path, pathOp: PathOp): boolean 1109 1110Combines this path with the passed-in path based on the specified operation mode. 1111 1112**System capability**: SystemCapability.Graphics.Drawing 1113 1114**Parameters** 1115 1116| Name| Type | Mandatory| Description | 1117| ------ | ------ | ---- | ----------------------- | 1118| path | [Path](#path) | Yes | Path object, which will be combined with the current path.| 1119| pathOp | [PathOp](#pathop12) | Yes | Operation mode. | 1120 1121**Return value** 1122 1123| Type | Description | 1124| ------ | ------------------ | 1125| boolean | Result of the path combination result. The value **true** means that the path combination is successful, and **false** means the opposite.| 1126 1127**Error codes** 1128 1129For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1130 1131| ID| Error Message| 1132| ------- | --------------------------------------------| 1133| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 1134 1135**Example** 1136 1137```ts 1138import { drawing } from '@kit.ArkGraphics2D'; 1139 1140const path = new drawing.Path(); 1141const path2 = new drawing.Path(); 1142path.addCircle(100, 200, 100, drawing.PathDirection.CLOCKWISE); 1143console.info("get pathOp: ", path2.op(path, drawing.PathOp.DIFFERENCE)); 1144``` 1145 1146### close 1147 1148close(): void 1149 1150Draws a line segment from the current point to the start point of this path. 1151 1152**System capability**: SystemCapability.Graphics.Drawing 1153 1154**Example** 1155 1156```ts 1157import { drawing } from '@kit.ArkGraphics2D'; 1158let path = new drawing.Path(); 1159path.moveTo(10,10); 1160path.cubicTo(10, 10, 10, 10, 15, 15); 1161path.close(); 1162``` 1163 1164### reset 1165 1166reset(): void 1167 1168Resets the path data. 1169 1170**System capability**: SystemCapability.Graphics.Drawing 1171 1172**Example** 1173 1174```ts 1175import { drawing } from '@kit.ArkGraphics2D'; 1176let path = new drawing.Path(); 1177path.moveTo(10,10); 1178path.cubicTo(10, 10, 10, 10, 15, 15); 1179path.reset(); 1180``` 1181 1182### getLength<sup>12+</sup> 1183 1184getLength(forceClosed: boolean): number 1185 1186Obtains the path length. 1187 1188**System capability**: SystemCapability.Graphics.Drawing 1189 1190**Parameters** 1191 1192| Name| Type | Mandatory| Description | 1193| ----- | ------ | ---- | --------- | 1194| forceClosed | boolean | Yes | Whether the path is measured as a closed path. The value **true** means that the path is considered closed during measurement, and **false** means that the path is measured based on the actual closed status.| 1195 1196**Return value** 1197 1198| Type | Description| 1199| ------ | ---- | 1200| number | Path length.| 1201 1202**Example** 1203 1204```ts 1205import { drawing } from '@kit.ArkGraphics2D' 1206let path = new drawing.Path(); 1207path.arcTo(20, 20, 180, 180, 180, 90); 1208let len = path.getLength(false); 1209console.info("path length = " + len); 1210``` 1211 1212### getPositionAndTangent<sup>12+</sup> 1213 1214getPositionAndTangent(forceClosed: boolean, distance: number, position: common2D.Point, tangent: common2D.Point): boolean 1215 1216Obtains the coordinates and tangent at a distance from the start point of this path. 1217 1218**System capability**: SystemCapability.Graphics.Drawing 1219 1220**Parameters** 1221 1222| Name | Type | Mandatory| Description | 1223| -------- | -------------------------------------------- | ---- | ------------------------------- | 1224| forceClosed | boolean | Yes | Whether the path is measured as a closed path. The value **true** means that the path is considered closed during measurement, and **false** means that the path is measured based on the actual closed status. | 1225| distance | number | Yes | Distance from the start point. If a negative number is passed in, the value **0** is used. If a value greater than the path length is passed in, the path length is used. The value is a floating point number. | 1226| position | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | Coordinates obtained. | 1227| tangent | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | Tangent obtained, where **tangent.x** and **tangent.y** represent the cosine and sine of the tangent of the point, respectively. | 1228 1229**Return value** 1230 1231| Type | Description | 1232| --------------------- | -------------- | 1233| boolean |Check result. The value **true** means that they are obtained, and **false** means the opposite. The values of **position** and **tangent** are not changed.| 1234 1235**Error codes** 1236 1237For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1238 1239| ID| Error Message| 1240| ------- | --------------------------------------------| 1241| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1242 1243**Example** 1244 1245```ts 1246import { common2D, drawing } from '@kit.ArkGraphics2D'; 1247let path: drawing.Path = new drawing.Path(); 1248path.moveTo(0, 0); 1249path.lineTo(0, 700); 1250path.lineTo(700, 0); 1251let position: common2D.Point = { x: 0.0, y: 0.0 }; 1252let tangent: common2D.Point = { x: 0.0, y: 0.0 }; 1253if (path.getPositionAndTangent(false, 0.1, position, tangent)) { 1254 console.info("getPositionAndTangent-----position: "+ position.x); 1255 console.info("getPositionAndTangent-----position: "+ position.y); 1256 console.info("getPositionAndTangent-----tangent: "+ tangent.x); 1257 console.info("getPositionAndTangent-----tangent: "+ tangent.y); 1258} 1259``` 1260 1261### getSegment<sup>18+</sup> 1262 1263getSegment(forceClosed: boolean, start: number, stop: number, startWithMoveTo: boolean, dst: Path): boolean 1264 1265Extracts a segment of this path and appends it to a destination path. 1266 1267**System capability**: SystemCapability.Graphics.Drawing 1268 1269**Parameters** 1270 1271| Name | Type | Mandatory| Description | 1272| -------- | -------------------------------------------- | ---- | ------------------------------- | 1273| forceClosed | boolean | Yes | Whether the path is measured as a closed path. The value **true** means that the path is considered closed during measurement, and **false** means that the path is measured based on the actual closed status. | 1274| start | number | Yes | Distance from the start point of the path to the start point of the segment. If it is less than 0, it defaults to 0. If it is greater than or equal to **stop**, the extraction fails. The value is a floating point number. | 1275| stop | number | Yes | Distance from the start point of the path to the end point of the segment. If it is less than or equal to **start**, the extraction fails. If it is greater than the path length, it defaults to the path length. The value is a floating point number. | 1276| startWithMoveTo | boolean | Yes | Whether to execute [moveTo](#moveto) in the destination path to move to its start point. The value **true** means to move to the start point, and **false** means the opposite. | 1277| dst | [Path](#path) | Yes | Destination path. If the extraction succeeds, the segment is appended to the path. If the extraction fails, nothing changes. | 1278 1279**Return value** 1280 1281| Type | Description | 1282| --------------------- | -------------- | 1283| boolean |Extraction result. The value **true** means that the extraction is successful, and **false** means the opposite.| 1284 1285**Error codes** 1286 1287For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1288 1289| ID| Error Message| 1290| ------- | --------------------------------------------| 1291| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1292 1293**Example** 1294 1295```ts 1296import { drawing } from '@kit.ArkGraphics2D'; 1297let path: drawing.Path = new drawing.Path(); 1298path.moveTo(0, 0); 1299path.lineTo(0, 700); 1300path.lineTo(700, 0); 1301let dstPath: drawing.Path = new drawing.Path(); 1302console.info("getSegment-----result: "+ path.getSegment(true, 10.0, 20.0, true, dstPath)); 1303``` 1304 1305### isClosed<sup>12+</sup> 1306 1307isClosed(): boolean 1308 1309Checks whether a path is closed. 1310 1311**System capability**: SystemCapability.Graphics.Drawing 1312 1313**Return value** 1314 1315| Type | Description | 1316| --------------------- | -------------- | 1317| boolean | Check result. The value **true** means that the path is closed, and **false** means the opposite.| 1318 1319**Example** 1320 1321```ts 1322import { drawing } from '@kit.ArkGraphics2D'; 1323let path: drawing.Path = new drawing.Path(); 1324path.moveTo(0, 0); 1325path.lineTo(0, 700); 1326if (path.isClosed()) { 1327 console.info("path is closed."); 1328} else { 1329 console.info("path is not closed."); 1330} 1331``` 1332 1333### getMatrix<sup>12+</sup> 1334 1335getMatrix(forceClosed: boolean, distance: number, matrix: Matrix, flags: PathMeasureMatrixFlags): boolean 1336 1337Obtains a transformation matrix at a distance from the start point of this path. 1338 1339**System capability**: SystemCapability.Graphics.Drawing 1340 1341**Parameters** 1342 1343| Name | Type | Mandatory| Description | 1344| -------- | -------------------------------------------- | ---- | ------------------------------- | 1345| forceClosed | boolean | Yes | Whether the path is measured as a closed path. The value **true** means that the path is considered closed during measurement, and **false** means that the path is measured based on the actual closed status. | 1346| distance | number | Yes | Distance from the start point. If a negative number is passed in, the value **0** is used. If a value greater than the path length is passed in, the path length is used. The value is a floating point number. | 1347| matrix | [Matrix](#matrix12) | Yes | **Matrix** object used to store the matrix obtained. | 1348| flags | [PathMeasureMatrixFlags](#pathmeasurematrixflags12) | Yes | Type of the matrix information obtained. | 1349 1350**Return value** 1351 1352| Type | Description | 1353| --------------------- | -------------- | 1354| boolean | Check result. The value **true** means that a transformation matrix is obtained, and **false** means the opposite.| 1355 1356**Error codes** 1357 1358For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1359 1360| ID| Error Message| 1361| ------- | --------------------------------------------| 1362| 401 | Parameter error. Possible causes: Mandatory parameters are left unspecified. | 1363 1364**Example** 1365 1366```ts 1367import { drawing } from '@kit.ArkGraphics2D'; 1368let path: drawing.Path = new drawing.Path(); 1369let matrix = new drawing.Matrix(); 1370if(path.getMatrix(false, 10, matrix, drawing.PathMeasureMatrixFlags.GET_TANGENT_MATRIX)) { 1371 console.info("path.getMatrix return true"); 1372} else { 1373 console.info("path.getMatrix return false"); 1374} 1375``` 1376 1377### buildFromSvgString<sup>12+</sup> 1378 1379buildFromSvgString(str: string): boolean 1380 1381Parses the path represented by an SVG string. 1382 1383**System capability**: SystemCapability.Graphics.Drawing 1384 1385**Parameters** 1386 1387| Name | Type | Mandatory| Description | 1388| -------- | -------------------------------------------- | ---- | ------------------------------- | 1389| str | string | Yes | String in SVG format, which is used to describe the path. | 1390 1391**Return value** 1392 1393| Type | Description | 1394| --------------------- | -------------- | 1395| boolean | Check result. The value **true** means that the parsing is successful, and **false** means the opposite.| 1396 1397**Error codes** 1398 1399For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1400 1401| ID| Error Message| 1402| ------- | --------------------------------------------| 1403| 401 | Parameter error. Possible causes: Mandatory parameters are left unspecified. | 1404 1405**Example** 1406 1407```ts 1408import { drawing } from '@kit.ArkGraphics2D'; 1409let path: drawing.Path = new drawing.Path(); 1410let svgStr: string = "M150 100 L75 300 L225 300 Z"; 1411if(path.buildFromSvgString(svgStr)) { 1412 console.info("buildFromSvgString return true"); 1413} else { 1414 console.info("buildFromSvgString return false"); 1415} 1416``` 1417 1418### getPathIterator<sup>18+</sup> 1419 1420getPathIterator(): PathIterator 1421 1422Obtains the operation iterator of this path. 1423 1424**System capability**: SystemCapability.Graphics.Drawing 1425 1426**Return value** 1427 1428| Type | Description | 1429| --------------------- | -------------- | 1430| [PathIterator](#pathiterator18) | **Iterator** object of the path.| 1431 1432**Example** 1433 1434```ts 1435import { drawing } from '@kit.ArkGraphics2D'; 1436let path: drawing.Path = new drawing.Path(); 1437let iter = path.getPathIterator(); 1438``` 1439 1440## Canvas 1441 1442A carrier that carries the drawn content and drawing status. 1443 1444> **NOTE** 1445> 1446> By default, the canvas has a black brush with anti-aliasing enabled but no any other style. This default brush takes effect only when no brush or pen is proactively set in the canvas. 1447 1448### constructor 1449 1450constructor(pixelmap: image.PixelMap) 1451 1452A constructor used to create a **Canvas** object. 1453 1454**System capability**: SystemCapability.Graphics.Drawing 1455 1456**Parameters** 1457 1458| Name | Type | Mandatory| Description | 1459| -------- | -------------------------------------------- | ---- | -------------- | 1460| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap used to create the object.| 1461 1462**Error codes** 1463 1464For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1465 1466| ID| Error Message| 1467| ------- | --------------------------------------------| 1468| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1469 1470**Example** 1471 1472```ts 1473import { drawing } from '@kit.ArkGraphics2D'; 1474import { image } from '@kit.ImageKit'; 1475const color = new ArrayBuffer(96); 1476let opts : image.InitializationOptions = { 1477 editable: true, 1478 pixelFormat: 3, 1479 size: { 1480 height: 4, 1481 width: 6 1482 } 1483} 1484image.createPixelMap(color, opts).then((pixelMap) => { 1485 const canvas = new drawing.Canvas(pixelMap); 1486}) 1487``` 1488 1489### drawRect 1490 1491drawRect(rect: common2D.Rect): void 1492 1493Draws a rectangle. By default, black is used for filling. 1494 1495**System capability**: SystemCapability.Graphics.Drawing 1496 1497**Parameters** 1498 1499| Name| Type | Mandatory| Description | 1500| ------ | -------------------------------------------------- | ---- | -------------- | 1501| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangle to draw.| 1502 1503**Error codes** 1504 1505For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1506 1507| ID| Error Message| 1508| ------- | --------------------------------------------| 1509| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1510 1511**Example** 1512 1513```ts 1514import { RenderNode } from '@kit.ArkUI'; 1515import { common2D, drawing } from '@kit.ArkGraphics2D'; 1516class DrawingRenderNode extends RenderNode { 1517 draw(context : DrawContext) { 1518 const canvas = context.canvas; 1519 const pen = new drawing.Pen(); 1520 pen.setStrokeWidth(5); 1521 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1522 canvas.attachPen(pen); 1523 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 1524 canvas.detachPen(); 1525 } 1526} 1527``` 1528 1529### drawRect<sup>12+</sup> 1530 1531drawRect(left: number, top: number, right: number, bottom: number): void 1532 1533Draws a rectangle. By default, black is used for filling. This API provides better performance than [drawRect](#drawrect) and is recommended. 1534 1535**System capability**: SystemCapability.Graphics.Drawing 1536 1537**Parameters** 1538 1539| Name| Type | Mandatory| Description | 1540| ------ | ------ | ---- | -------------- | 1541| left | number | Yes | X coordinate of the upper left corner of the rectangle. The value is a floating point number.| 1542| top | number | Yes | Y coordinate of the upper left corner of the rectangle. The value is a floating point number.| 1543| right | number | Yes | X coordinate of the lower right corner of the rectangle. The value is a floating point number.| 1544| bottom | number | Yes | Y coordinate of the lower right corner of the rectangle. The value is a floating point number.| 1545 1546**Error codes** 1547 1548For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1549 1550| ID| Error Message| 1551| ------- | --------------------------------------------| 1552| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1553 1554**Example** 1555 1556```ts 1557import { RenderNode } from '@kit.ArkUI'; 1558import { drawing } from '@kit.ArkGraphics2D'; 1559class DrawingRenderNode extends RenderNode { 1560 1561 draw(context : DrawContext) { 1562 const canvas = context.canvas; 1563 const pen = new drawing.Pen(); 1564 pen.setStrokeWidth(5); 1565 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1566 canvas.attachPen(pen); 1567 canvas.drawRect(0, 0, 10, 10); 1568 canvas.detachPen(); 1569 } 1570} 1571``` 1572 1573### drawRoundRect<sup>12+</sup> 1574 1575drawRoundRect(roundRect: RoundRect): void 1576 1577Draws a rounded rectangle. 1578 1579**System capability**: SystemCapability.Graphics.Drawing 1580 1581**Parameters** 1582 1583| Name | Type | Mandatory| Description | 1584| ---------- | ----------------------- | ---- | ------------ | 1585| roundRect | [RoundRect](#roundrect12) | Yes | Rounded rectangle.| 1586 1587**Error codes** 1588 1589For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1590 1591| ID| Error Message| 1592| ------- | --------------------------------------------| 1593| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1594 1595**Example** 1596 1597```ts 1598import { RenderNode } from '@kit.ArkUI'; 1599import { common2D, drawing } from '@kit.ArkGraphics2D'; 1600class DrawingRenderNode extends RenderNode { 1601 draw(context : DrawContext) { 1602 const canvas = context.canvas; 1603 let rect: common2D.Rect = { left : 100, top : 100, right : 400, bottom : 500 }; 1604 let roundRect = new drawing.RoundRect(rect, 10, 10); 1605 canvas.drawRoundRect(roundRect); 1606 } 1607} 1608``` 1609 1610### drawNestedRoundRect<sup>12+</sup> 1611 1612drawNestedRoundRect(outer: RoundRect, inner: RoundRect): void 1613 1614Draws two nested rounded rectangles. The outer rectangle boundary must contain the inner rectangle boundary. Otherwise, there is no drawing effect. 1615 1616**System capability**: SystemCapability.Graphics.Drawing 1617 1618**Parameters** 1619 1620| Name | Type | Mandatory| Description | 1621| ------ | ----------------------- | ---- | ------------ | 1622| outer | [RoundRect](#roundrect12) | Yes | Outer rounded rectangle.| 1623| inner | [RoundRect](#roundrect12) | Yes | Inner rounded rectangle.| 1624 1625**Error codes** 1626 1627For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1628 1629| ID| Error Message| 1630| ------- | --------------------------------------------| 1631| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1632 1633**Example** 1634 1635```ts 1636import { RenderNode } from '@kit.ArkUI'; 1637import { common2D, drawing } from '@kit.ArkGraphics2D'; 1638class DrawingRenderNode extends RenderNode { 1639 draw(context : DrawContext) { 1640 const canvas = context.canvas; 1641 let inRect: common2D.Rect = { left : 200, top : 200, right : 400, bottom : 500 }; 1642 let outRect: common2D.Rect = { left : 100, top : 100, right : 400, bottom : 500 }; 1643 let outRoundRect = new drawing.RoundRect(outRect, 10, 10); 1644 let inRoundRect = new drawing.RoundRect(inRect, 10, 10); 1645 canvas.drawNestedRoundRect(outRoundRect, inRoundRect); 1646 canvas.drawRoundRect(outRoundRect); 1647 } 1648} 1649``` 1650 1651### drawBackground<sup>12+</sup> 1652 1653drawBackground(brush: Brush): void 1654 1655Uses a brush to fill the drawable area of the canvas. 1656 1657**System capability**: SystemCapability.Graphics.Drawing 1658 1659**Parameters** 1660 1661| Name| Type | Mandatory| Description | 1662| ------ | --------------- | ---- | ---------- | 1663| brush | [Brush](#brush) | Yes | **Brush** object.| 1664 1665**Error codes** 1666 1667For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1668 1669| ID| Error Message| 1670| ------- | --------------------------------------------| 1671| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1672 1673**Example** 1674 1675```ts 1676import { RenderNode } from '@kit.ArkUI'; 1677import { common2D, drawing } from '@kit.ArkGraphics2D'; 1678class DrawingRenderNode extends RenderNode { 1679 draw(context : DrawContext) { 1680 const canvas = context.canvas; 1681 const brush = new drawing.Brush(); 1682 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 1683 brush.setColor(color); 1684 canvas.drawBackground(brush); 1685 } 1686} 1687``` 1688 1689### drawShadow<sup>12+</sup> 1690 1691drawShadow(path: Path, planeParams: common2D.Point3d, devLightPos: common2D.Point3d, lightRadius: number, ambientColor: common2D.Color, spotColor: common2D.Color, flag: ShadowFlag) : void 1692 1693Draws a spot shadow and uses a given path to outline the ambient shadow. 1694 1695**System capability**: SystemCapability.Graphics.Drawing 1696 1697**Parameters** 1698 1699| Name | Type | Mandatory | Description | 1700| ------------ | ---------------------------------------- | ---- | ---------- | 1701| path | [Path](#path) | Yes | **Path** object, which is used to outline the shadow.| 1702| planeParams | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | Yes | 3D vector, which is used to determine the z-axis offset of an occluder relative to the canvas, based on its x and y coordinates.| 1703| devLightPos | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | Yes | Position of the light relative to the canvas.| 1704| lightRadius | number | Yes | Radius of the light. The value is a floating point number. | 1705| ambientColor | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color of the ambient shadow.| 1706| spotColor | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color of the spot shadow.| 1707| flag | [ShadowFlag](#shadowflag12) | Yes | Shadow flag. | 1708 1709**Error codes** 1710 1711For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1712 1713| ID| Error Message| 1714| ------- | --------------------------------------------| 1715| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 1716 1717**Example** 1718 1719```ts 1720import { RenderNode } from '@kit.ArkUI'; 1721import { common2D, drawing } from '@kit.ArkGraphics2D'; 1722class DrawingRenderNode extends RenderNode { 1723 draw(context : DrawContext) { 1724 const canvas = context.canvas; 1725 const path = new drawing.Path(); 1726 path.addCircle(100, 200, 100, drawing.PathDirection.CLOCKWISE); 1727 let pen = new drawing.Pen(); 1728 pen.setAntiAlias(true); 1729 let pen_color : common2D.Color = { alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00 }; 1730 pen.setColor(pen_color); 1731 pen.setStrokeWidth(10.0); 1732 canvas.attachPen(pen); 1733 let brush = new drawing.Brush(); 1734 let brush_color : common2D.Color = { alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00 }; 1735 brush.setColor(brush_color); 1736 canvas.attachBrush(brush); 1737 let point1 : common2D.Point3d = {x: 100, y: 80, z:80}; 1738 let point2 : common2D.Point3d = {x: 200, y: 10, z:40}; 1739 let color1 : common2D.Color = {alpha: 0xFF, red:0, green:0, blue:0xFF}; 1740 let color2 : common2D.Color = {alpha: 0xFF, red:0xFF, green:0, blue:0}; 1741 let shadowFlag : drawing.ShadowFlag = drawing.ShadowFlag.ALL; 1742 canvas.drawShadow(path, point1, point2, 30, color1, color2, shadowFlag); 1743 } 1744} 1745``` 1746 1747### drawShadow<sup>18+</sup> 1748 1749drawShadow(path: Path, planeParams: common2D.Point3d, devLightPos: common2D.Point3d, lightRadius: number, ambientColor: common2D.Color | number, spotColor: common2D.Color | number, flag: ShadowFlag) : void 1750 1751Draws a spot shadow and uses a given path to outline the ambient shadow. 1752 1753**System capability**: SystemCapability.Graphics.Drawing 1754 1755**Parameters** 1756 1757| Name | Type | Mandatory | Description | 1758| ------------ | ---------------------------------------- | ---- | ---------- | 1759| path | [Path](#path) | Yes | **Path** object, which is used to outline the shadow.| 1760| planeParams | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | Yes | 3D vector, which is used to calculate the offset in the Z axis.| 1761| devLightPos | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | Yes | Position of the light relative to the canvas.| 1762| lightRadius | number | Yes | Radius of the light. The value is a floating point number. | 1763| ambientColor |[common2D.Color](js-apis-graphics-common2D.md#color) \| number | Yes | Ambient shadow color, represented by a 32-bit unsigned integer in hexadecimal ARGB format.| 1764| spotColor |[common2D.Color](js-apis-graphics-common2D.md#color) \| number | Yes | Spot shadow color, represented by a 32-bit unsigned integer in hexadecimal ARGB format.| 1765| flag | [ShadowFlag](#shadowflag12) | Yes | Shadow flag. | 1766 1767**Error codes** 1768 1769For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1770 1771| ID| Error Message| 1772| ------- | --------------------------------------------| 1773| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 1774 1775**Example** 1776 1777```ts 1778import { RenderNode } from '@kit.ArkUI'; 1779import { common2D, drawing } from '@kit.ArkGraphics2D'; 1780class DrawingRenderNode extends RenderNode { 1781 draw(context : DrawContext) { 1782 const canvas = context.canvas; 1783 const path = new drawing.Path(); 1784 path.addCircle(300, 600, 100, drawing.PathDirection.CLOCKWISE); 1785 let point1 : common2D.Point3d = {x: 100, y: 80, z:80}; 1786 let point2 : common2D.Point3d = {x: 200, y: 10, z:40}; 1787 let shadowFlag : drawing.ShadowFlag = drawing.ShadowFlag.ALL; 1788 canvas.drawShadow(path, point1, point2, 30, 0xFF0000FF, 0xFFFF0000, shadowFlag); 1789 } 1790} 1791``` 1792 1793### getLocalClipBounds<sup>12+</sup> 1794 1795getLocalClipBounds(): common2D.Rect 1796 1797Obtains the bounds of the cropping region of the canvas. 1798 1799**System capability**: SystemCapability.Graphics.Drawing 1800 1801**Return value** 1802 1803| Type | Description | 1804| ---------------------------------------- | -------- | 1805| [common2D.Rect](js-apis-graphics-common2D.md#rect) | Bounds of the cropping region.| 1806 1807**Example** 1808 1809```ts 1810import { RenderNode } from '@kit.ArkUI'; 1811import { common2D, drawing } from '@kit.ArkGraphics2D'; 1812class DrawingRenderNode extends RenderNode { 1813 draw(context : DrawContext) { 1814 const canvas = context.canvas; 1815 let clipRect: common2D.Rect = { 1816 left : 150, top : 150, right : 300, bottom : 400 1817 }; 1818 canvas.clipRect(clipRect,drawing.ClipOp.DIFFERENCE, true); 1819 console.info("test rect.left: " + clipRect.left); 1820 console.info("test rect.top: " + clipRect.top); 1821 console.info("test rect.right: " + clipRect.right); 1822 console.info("test rect.bottom: " + clipRect.bottom); 1823 canvas.getLocalClipBounds(); 1824 } 1825} 1826``` 1827 1828### getTotalMatrix<sup>12+</sup> 1829 1830getTotalMatrix(): Matrix 1831 1832Obtains the canvas matrix. 1833 1834**System capability**: SystemCapability.Graphics.Drawing 1835 1836**Return value** 1837 1838| Type | Description | 1839| ----------------- | -------- | 1840| [Matrix](#matrix12) |Canvas matrix.| 1841 1842**Example** 1843 1844```ts 1845import { RenderNode } from '@kit.ArkUI'; 1846import { drawing } from '@kit.ArkGraphics2D'; 1847class DrawingRenderNode extends RenderNode { 1848 draw(context : DrawContext) { 1849 const canvas = context.canvas; 1850 let matrix = new drawing.Matrix(); 1851 matrix.setMatrix([5, 0, 0, 0, 1, 1, 0, 0, 1]); 1852 canvas.setMatrix(matrix); 1853 let matrixResult =canvas.getTotalMatrix(); 1854 } 1855} 1856``` 1857 1858### drawCircle 1859 1860drawCircle(x: number, y: number, radius: number): void 1861 1862Draws a circle. If the radius is less than or equal to zero, nothing is drawn. By default, black is used for filling. 1863 1864**System capability**: SystemCapability.Graphics.Drawing 1865 1866**Parameters** 1867 1868| Name| Type | Mandatory| Description | 1869| ------ | ------ | ---- | ------------------- | 1870| x | number | Yes | X coordinate of the center of the circle. The value is a floating point number.| 1871| y | number | Yes | Y coordinate of the center of the circle. The value is a floating point number.| 1872| radius | number | Yes | Radius of the circle. The value is a floating point number greater than 0.| 1873 1874**Error codes** 1875 1876For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1877 1878| ID| Error Message| 1879| ------- | --------------------------------------------| 1880| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 1881 1882**Example** 1883 1884```ts 1885import { RenderNode } from '@kit.ArkUI'; 1886import { drawing } from '@kit.ArkGraphics2D'; 1887class DrawingRenderNode extends RenderNode { 1888 draw(context : DrawContext) { 1889 const canvas = context.canvas; 1890 const pen = new drawing.Pen(); 1891 pen.setStrokeWidth(5); 1892 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1893 canvas.attachPen(pen); 1894 canvas.drawCircle(10, 10, 2); 1895 canvas.detachPen(); 1896 } 1897} 1898``` 1899 1900### drawImage 1901 1902drawImage(pixelmap: image.PixelMap, left: number, top: number, samplingOptions?: SamplingOptions): void 1903 1904Draws an image. The coordinates of the upper left corner of the image are (left, top). 1905 1906**System capability**: SystemCapability.Graphics.Drawing 1907 1908**Parameters** 1909 1910| Name | Type | Mandatory| Description | 1911| -------- | -------------------------------------------- | ---- | ------------------------------- | 1912| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap. | 1913| left | number | Yes | X coordinate of the upper left corner of the image. The value is a floating point number.| 1914| top | number | Yes | Y coordinate of the upper left corner of the image. The value is a floating point number.| 1915| samplingOptions<sup>12+</sup> | [SamplingOptions](#samplingoptions12) | No | Sampling options. By default, the **SamplingOptions** object created using the no-argument constructor is used.| 1916 1917**Error codes** 1918 1919For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1920 1921| ID| Error Message| 1922| ------- | --------------------------------------------| 1923| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1924 1925**Example** 1926 1927```ts 1928import { RenderNode } from '@kit.ArkUI'; 1929import { image } from '@kit.ImageKit'; 1930import { drawing } from '@kit.ArkGraphics2D'; 1931class DrawingRenderNode extends RenderNode { 1932 pixelMap: image.PixelMap | null = null; 1933 1934 async draw(context : DrawContext) { 1935 const canvas = context.canvas; 1936 let options = new drawing.SamplingOptions(drawing.FilterMode.FILTER_MODE_NEAREST); 1937 if (this.pixelMap != null) { 1938 canvas.drawImage(this.pixelMap, 0, 0, options); 1939 } 1940 } 1941} 1942``` 1943 1944### drawImageRect<sup>12+</sup> 1945 1946drawImageRect(pixelmap: image.PixelMap, dstRect: common2D.Rect, samplingOptions?: SamplingOptions): void 1947 1948Draws an image onto a specified area of the canvas. 1949 1950**System capability**: SystemCapability.Graphics.Drawing 1951 1952**Parameters** 1953 1954| Name | Type | Mandatory| Description | 1955| -------- | -------------------------------------------- | ---- | ------------------------------- | 1956| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap. | 1957| dstRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | **Rectangle** object, which specifies the area of the canvas onto which the image will be drawn.| 1958| samplingOptions | [SamplingOptions](#samplingoptions12) | No | Sampling options. By default, the **SamplingOptions** object created using the no-argument constructor is used.| 1959 1960**Error codes** 1961 1962For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1963 1964| ID| Error Message| 1965| ------- | --------------------------------------------| 1966| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1967 1968**Example** 1969 1970```ts 1971import { RenderNode } from '@kit.ArkUI'; 1972import { image } from '@kit.ImageKit'; 1973import { common2D, drawing } from '@kit.ArkGraphics2D'; 1974class DrawingRenderNode extends RenderNode { 1975pixelMap: image.PixelMap | null = null; 1976 draw(context : DrawContext) { 1977 const canvas = context.canvas; 1978 let pen = new drawing.Pen(); 1979 canvas.attachPen(pen); 1980 let rect: common2D.Rect = { left: 0, top: 0, right: 200, bottom: 200 }; 1981 canvas.drawImageRect(this.pixelMap, rect); 1982 canvas.detachPen(); 1983 } 1984} 1985``` 1986 1987### drawImageRectWithSrc<sup>12+</sup> 1988 1989drawImageRectWithSrc(pixelmap: image.PixelMap, srcRect: common2D.Rect, dstRect: common2D.Rect, samplingOptions?: SamplingOptions, constraint?: SrcRectConstraint): void 1990 1991Draws a portion of an image onto a specified area of the canvas. 1992 1993**System capability**: SystemCapability.Graphics.Drawing 1994 1995**Parameters** 1996 1997| Name | Type | Mandatory| Description | 1998| -------- | -------------------------------------------- | ---- | ------------------------------- | 1999| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap. | 2000| srcRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | **Rectangle** object, which specifies the portion of the image to draw.| 2001| dstRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | **Rectangle** object, which specifies the area of the canvas onto which the image will be drawn.| 2002| samplingOptions | [SamplingOptions](#samplingoptions12) | No | Sampling options. By default, the **SamplingOptions** object created using the no-argument constructor is used.| 2003| constraint | [SrcRectConstraint](#srcrectconstraint12) | No | Constraint type of the source rectangle. The default value is **STRICT**.| 2004 2005**Error codes** 2006 2007For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2008 2009| ID| Error Message| 2010| ------- | --------------------------------------------| 2011| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2012 2013**Example** 2014 2015```ts 2016import { RenderNode } from '@kit.ArkUI'; 2017import { image } from '@kit.ImageKit'; 2018import { common2D, drawing } from '@kit.ArkGraphics2D'; 2019class DrawingRenderNode extends RenderNode { 2020pixelMap: image.PixelMap | null = null; 2021 draw(context : DrawContext) { 2022 const canvas = context.canvas; 2023 let pen = new drawing.Pen(); 2024 canvas.attachPen(pen); 2025 let srcRect: common2D.Rect = { left: 0, top: 0, right: 100, bottom: 100 }; 2026 let dstRect: common2D.Rect = { left: 100, top: 100, right: 200, bottom: 200 }; 2027 canvas.drawImageRectWithSrc(this.pixelMap, srcRect, dstRect); 2028 canvas.detachPen(); 2029 } 2030} 2031``` 2032 2033### drawColor 2034 2035drawColor(color: common2D.Color, blendMode?: BlendMode): void 2036 2037Draws the background color. 2038 2039**System capability**: SystemCapability.Graphics.Drawing 2040 2041**Parameters** 2042 2043| Name | Type | Mandatory| Description | 2044| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 2045| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. Each color channel is an integer ranging from 0 to 255. | 2046| blendMode | [BlendMode](#blendmode) | No | Blend mode. The default mode is **SRC_OVER**.| 2047 2048**Error codes** 2049 2050For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2051 2052| ID| Error Message| 2053| ------- | --------------------------------------------| 2054| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2055 2056**Example** 2057 2058```ts 2059import { RenderNode } from '@kit.ArkUI'; 2060import { common2D, drawing } from '@kit.ArkGraphics2D'; 2061class DrawingRenderNode extends RenderNode { 2062 draw(context : DrawContext) { 2063 const canvas = context.canvas; 2064 let color: common2D.Color = { 2065 alpha : 255, 2066 red: 0, 2067 green: 10, 2068 blue: 10 2069 } 2070 canvas.drawColor(color, drawing.BlendMode.CLEAR); 2071 } 2072} 2073``` 2074 2075### drawColor<sup>12+</sup> 2076 2077drawColor(alpha: number, red: number, green: number, blue: number, blendMode?: BlendMode): void 2078 2079Draws the background color. This API provides better performance than [drawColor](#drawcolor) and is recommended. 2080 2081**System capability**: SystemCapability.Graphics.Drawing 2082 2083**Parameters** 2084 2085| Name | Type | Mandatory| Description | 2086| --------- | ----------------------- | ---- | ------------------------------------------------- | 2087| alpha | number | Yes | Alpha channel value of the color in ARGB format. The value is an integer ranging from 0 to 255. Any passed-in floating point number is rounded down.| 2088| red | number | Yes | Red channel value of the color in ARGB format. The value is an integer ranging from 0 to 255. Any passed-in floating point number is rounded down. | 2089| green | number | Yes | Green channel value of the color in ARGB format. The value is an integer ranging from 0 to 255. Any passed-in floating point number is rounded down. | 2090| blue | number | Yes | Blue channel value of the color in ARGB format. The value is an integer ranging from 0 to 255. Any passed-in floating point number is rounded down. | 2091| blendMode | [BlendMode](#blendmode) | No | Blend mode. The default mode is **SRC_OVER**. | 2092 2093**Error codes** 2094 2095For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2096 2097| ID| Error Message| 2098| ------- | --------------------------------------------| 2099| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2100 2101**Example** 2102 2103```ts 2104import { RenderNode } from '@kit.ArkUI'; 2105import { drawing } from '@kit.ArkGraphics2D'; 2106class DrawingRenderNode extends RenderNode { 2107 draw(context : DrawContext) { 2108 const canvas = context.canvas; 2109 canvas.drawColor(255, 0, 10, 10, drawing.BlendMode.CLEAR); 2110 } 2111} 2112``` 2113 2114### drawColor<sup>18+</sup> 2115 2116drawColor(color: number, blendMode?: BlendMode): void 2117 2118Draws the background color. 2119 2120**System capability**: SystemCapability.Graphics.Drawing 2121 2122**Parameters** 2123 2124| Name | Type | Mandatory| Description | 2125| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 2126| color | number | Yes | Color in hexadecimal ARGB format. | 2127| blendMode | [BlendMode](#blendmode) | No | Blend mode. The default mode is **SRC_OVER**.| 2128 2129**Error codes** 2130 2131For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2132 2133| ID| Error Message| 2134| ------- | --------------------------------------------| 2135| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2136 2137**Example** 2138 2139```ts 2140import { RenderNode } from '@kit.ArkUI'; 2141import { drawing } from '@kit.ArkGraphics2D'; 2142class DrawingRenderNode extends RenderNode { 2143 draw(context : DrawContext) { 2144 const canvas = context.canvas; 2145 canvas.drawColor(0xff000a0a, drawing.BlendMode.CLEAR); 2146 } 2147} 2148``` 2149 2150### drawPixelMapMesh<sup>12+</sup> 2151 2152drawPixelMapMesh(pixelmap: image.PixelMap, meshWidth: number, meshHeight: number, vertices: Array\<number>, vertOffset: number, colors: Array\<number>, colorOffset: number): void 2153 2154Draws a PixelMap based on a mesh, where mesh vertices are evenly distributed across the PixelMap. 2155 2156**System capability**: SystemCapability.Graphics.Drawing 2157 2158**Parameters** 2159 2160| Name | Type | Mandatory| Description | 2161| ----------- | ------------- | ---- | ------------------------------- | 2162| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap to draw.| 2163| meshWidth | number | Yes | Number of columns in the mesh. The value is an integer greater than 0.| 2164| meshHeight | number | Yes | Number of rows in the mesh. The value is an integer greater than 0.| 2165| vertices | Array\<number> | Yes | Array of vertices, which specify the position to draw. The value is a floating-point array and the size must be ((meshWidth+1) * (meshHeight+1) + vertOffset) * 2.| 2166| vertOffset | number | Yes | Number of vert elements to skip before drawing. The value is an integer greater than or equal to 0.| 2167| colors | Array\<number> | Yes | Array of colors, which specify the color at each vertex. The value is an integer array and can be null. The size must be (meshWidth+1) * (meshHeight+1) + colorOffset.| 2168| colorOffset | number | Yes | Number of color elements to skip before drawing. The value is an integer greater than or equal to 0.| 2169 2170**Error codes** 2171 2172For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2173 2174| ID| Error Message| 2175| ------- | --------------------------------------------| 2176| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2177 2178**Example** 2179 2180```ts 2181import { RenderNode } from '@kit.ArkUI'; 2182import { image } from '@kit.ImageKit'; 2183import { drawing } from '@kit.ArkGraphics2D'; 2184class DrawingRenderNode extends RenderNode { 2185 pixelMap: image.PixelMap | null = null; 2186 2187 async draw(context : DrawContext) { 2188 const canvas = context.canvas; 2189 if (this.pixelMap != null) { 2190 const brush = new drawing.Brush(); // Only brush is supported. There is no drawing effect when pen is used. 2191 canvas.attachBrush(brush); 2192 let verts : Array<number> = [0, 0, 50, 0, 410, 0, 0, 180, 50, 180, 410, 180, 0, 360, 50, 360, 410, 360]; // 18 2193 canvas.drawPixelMapMesh(this.pixelMap, 2, 2, verts, 0, null, 0); 2194 canvas.detachBrush(); 2195 } 2196 } 2197} 2198``` 2199 2200### clear<sup>12+</sup> 2201 2202clear(color: common2D.Color): void 2203 2204Clears the canvas with a given color. 2205 2206**System capability**: SystemCapability.Graphics.Drawing 2207 2208**Parameters** 2209 2210| Name | Type | Mandatory| Description | 2211| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 2212| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. Each color channel is an integer ranging from 0 to 255. | 2213 2214**Error codes** 2215 2216For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2217 2218| ID| Error Message| 2219| ------- | --------------------------------------------| 2220| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2221 2222**Example** 2223 2224```ts 2225import { RenderNode } from '@kit.ArkUI'; 2226import { common2D, drawing } from '@kit.ArkGraphics2D'; 2227class DrawingRenderNode extends RenderNode { 2228 draw(context : DrawContext) { 2229 const canvas = context.canvas; 2230 let color: common2D.Color = {alpha: 255, red: 255, green: 0, blue: 0}; 2231 canvas.clear(color); 2232 } 2233} 2234``` 2235 2236### clear<sup>18+</sup> 2237 2238clear(color: common2D.Color | number): void 2239 2240Clears the canvas with a given color. 2241 2242**System capability**: SystemCapability.Graphics.Drawing 2243 2244**Parameters** 2245 2246| Name | Type | Mandatory| Description | 2247| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 2248| color | [common2D.Color](js-apis-graphics-common2D.md#color) \| number| Yes | Color, represented by a 32-bit unsigned integer in hexadecimal ARGB format. | 2249 2250**Error codes** 2251 2252For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2253 2254| ID| Error Message| 2255| ------- | --------------------------------------------| 2256| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2257 2258**Example** 2259 2260```ts 2261import { RenderNode } from '@kit.ArkUI'; 2262import { drawing } from '@kit.ArkGraphics2D'; 2263class DrawingRenderNode extends RenderNode { 2264 draw(context : DrawContext) { 2265 const canvas = context.canvas; 2266 let color: number = 0xffff0000; 2267 canvas.clear(color); 2268 } 2269} 2270``` 2271 2272### getWidth<sup>12+</sup> 2273 2274getWidth(): number 2275 2276Obtains the canvas width. 2277 2278**System capability**: SystemCapability.Graphics.Drawing 2279 2280**Return value** 2281 2282| Type | Mandatory| Description | 2283| ------ | ---- | -------------- | 2284| number | Yes | Canvas width. The value is a floating point number.| 2285 2286**Example** 2287 2288```ts 2289import { RenderNode } from '@kit.ArkUI'; 2290import { drawing } from '@kit.ArkGraphics2D'; 2291class DrawingRenderNode extends RenderNode { 2292 draw(context : DrawContext) { 2293 const canvas = context.canvas; 2294 let width = canvas.getWidth(); 2295 console.info('get canvas width:' + width); 2296 } 2297} 2298``` 2299 2300### getHeight<sup>12+</sup> 2301 2302getHeight(): number 2303 2304Obtains the canvas height. 2305 2306**System capability**: SystemCapability.Graphics.Drawing 2307 2308**Return value** 2309 2310| Type | Mandatory| Description | 2311| ------ | ---- | -------------- | 2312| number | Yes | Canvas height. The value is a floating point number.| 2313 2314**Example** 2315 2316```ts 2317import { RenderNode } from '@kit.ArkUI'; 2318import { drawing } from '@kit.ArkGraphics2D'; 2319class DrawingRenderNode extends RenderNode { 2320 draw(context : DrawContext) { 2321 const canvas = context.canvas; 2322 let height = canvas.getHeight(); 2323 console.log('get canvas height:' + height); 2324 } 2325} 2326``` 2327 2328### drawOval<sup>12+</sup> 2329 2330drawOval(oval: common2D.Rect): void 2331 2332Draws an oval on the canvas. The shape and position of the oval are defined by the rectangle parameters that specify the oval boundary. 2333 2334**System capability**: SystemCapability.Graphics.Drawing 2335 2336**Parameters** 2337 2338| Name| Type | Mandatory| Description | 2339| ------ | -------------------------------------------------- | ---- | -------------- | 2340| oval | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangle. The oval inscribed within the rectangle is the oval to draw.| 2341 2342**Error codes** 2343 2344For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2345 2346| ID| Error Message| 2347| ------- | --------------------------------------------| 2348| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2349 2350**Example** 2351 2352```ts 2353import { RenderNode } from '@kit.ArkUI'; 2354import { common2D, drawing } from '@kit.ArkGraphics2D'; 2355class DrawingRenderNode extends RenderNode { 2356 draw(context : DrawContext) { 2357 const canvas = context.canvas; 2358 const pen = new drawing.Pen(); 2359 pen.setStrokeWidth(5); 2360 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 2361 pen.setColor(color); 2362 canvas.attachPen(pen); 2363 const rect: common2D.Rect = {left:100, top:50, right:400, bottom:500}; 2364 canvas.drawOval(rect); 2365 canvas.detachPen(); 2366 } 2367} 2368``` 2369 2370### drawArc<sup>12+</sup> 2371 2372drawArc(arc: common2D.Rect, startAngle: number, sweepAngle: number): void 2373 2374Draws an arc on the canvas, with the start angle and sweep angle specified. If the absolute value of the sweep angle exceeds 360 degrees, an ellipse is drawn. 2375 2376**System capability**: SystemCapability.Graphics.Drawing 2377 2378**Parameters** 2379 2380| Name| Type | Mandatory| Description | 2381| ------ | -------------------------------------------------- | ---- | -------------- | 2382| arc | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangular boundary that encapsulates the oval including the arc.| 2383| startAngle | number | Yes | Start angle, in degrees. The value is a floating point number. When the degree is 0, the start point is located at the right end of the oval. A positive number indicates that the start point is placed clockwise, and a negative number indicates that the start point is placed counterclockwise.| 2384| sweepAngle | number | Yes | Angle to sweep, in degrees. The value is a floating point number. A positive number indicates a clockwise sweep, and a negative value indicates a counterclockwise swipe. The valid range is from -360 degrees to 360 degrees. If the absolute value of the sweep angle exceeds 360 degrees, an ellipse is drawn.| 2385 2386**Error codes** 2387 2388For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2389 2390| ID| Error Message| 2391| ------- | --------------------------------------------| 2392| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2393 2394**Example** 2395 2396```ts 2397import { RenderNode } from '@kit.ArkUI'; 2398import { common2D, drawing } from '@kit.ArkGraphics2D'; 2399class DrawingRenderNode extends RenderNode { 2400 draw(context : DrawContext) { 2401 const canvas = context.canvas; 2402 const pen = new drawing.Pen(); 2403 pen.setStrokeWidth(5); 2404 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 2405 pen.setColor(color); 2406 canvas.attachPen(pen); 2407 const rect: common2D.Rect = {left:100, top:50, right:400, bottom:200}; 2408 canvas.drawArc(rect, 90, 180); 2409 canvas.detachPen(); 2410 } 2411} 2412``` 2413 2414### drawPoint 2415 2416drawPoint(x: number, y: number): void 2417 2418Draws a point. 2419 2420**System capability**: SystemCapability.Graphics.Drawing 2421 2422**Parameters** 2423 2424| Name| Type | Mandatory| Description | 2425| ------ | ------ | ---- | ------------------- | 2426| x | number | Yes | X coordinate of the point. The value is a floating point number.| 2427| y | number | Yes | Y coordinate of the point. The value is a floating point number.| 2428 2429**Error codes** 2430 2431For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2432 2433| ID| Error Message| 2434| ------- | --------------------------------------------| 2435| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2436 2437**Example** 2438 2439```ts 2440import { RenderNode } from '@kit.ArkUI'; 2441import { drawing } from '@kit.ArkGraphics2D'; 2442class DrawingRenderNode extends RenderNode { 2443 draw(context : DrawContext) { 2444 const canvas = context.canvas; 2445 const pen = new drawing.Pen(); 2446 pen.setStrokeWidth(5); 2447 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2448 canvas.attachPen(pen); 2449 canvas.drawPoint(10, 10); 2450 canvas.detachPen(); 2451 } 2452} 2453``` 2454 2455### drawPoints<sup>12+</sup> 2456 2457drawPoints(points: Array\<common2D.Point>, mode?: PointMode): void 2458 2459Draws a group of points, line segments, or polygons on the canvas, with the specified drawing mode. An array is used to hold these points. 2460 2461**System capability**: SystemCapability.Graphics.Drawing 2462 2463**Parameters** 2464 2465| Name | Type | Mandatory | Description | 2466| ---- | ---------------------------------------- | ---- | --------- | 2467| points | Array\<[common2D.Point](js-apis-graphics-common2D.md#point)> | Yes | Array that holds the points to draw. The length cannot be 0. | 2468| mode | [PointMode](#pointmode12) | No | Mode in which the points are drawn. The default value is **drawing.PointMode.POINTS**.| 2469 2470**Error codes** 2471 2472For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2473 2474| ID| Error Message| 2475| ------- | --------------------------------------------| 2476| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 2477 2478**Example** 2479 2480```ts 2481import { RenderNode } from '@kit.ArkUI'; 2482import { common2D, drawing } from '@kit.ArkGraphics2D'; 2483class DrawingRenderNode extends RenderNode { 2484 draw(context : DrawContext) { 2485 const canvas = context.canvas; 2486 const pen = new drawing.Pen(); 2487 pen.setStrokeWidth(30); 2488 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 2489 pen.setColor(color); 2490 canvas.attachPen(pen); 2491 canvas.drawPoints([{x: 100, y: 200}, {x: 150, y: 230}, {x: 200, y: 300}], drawing.PointMode.POINTS); 2492 canvas.detachPen(); 2493 } 2494} 2495``` 2496 2497### drawPath 2498 2499drawPath(path: Path): void 2500 2501Draws a custom path, which contains a set of path outlines. Each path outline can be open or closed. 2502 2503**System capability**: SystemCapability.Graphics.Drawing 2504 2505**Parameters** 2506 2507| Name| Type | Mandatory| Description | 2508| ------ | ------------- | ---- | ------------------ | 2509| path | [Path](#path) | Yes | **Path** object to draw.| 2510 2511**Error codes** 2512 2513For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2514 2515| ID| Error Message| 2516| ------- | --------------------------------------------| 2517| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2518 2519**Example** 2520 2521```ts 2522import { RenderNode } from '@kit.ArkUI'; 2523import { drawing } from '@kit.ArkGraphics2D'; 2524class DrawingRenderNode extends RenderNode { 2525 draw(context : DrawContext) { 2526 const canvas = context.canvas; 2527 const pen = new drawing.Pen(); 2528 pen.setStrokeWidth(5); 2529 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2530 let path = new drawing.Path(); 2531 path.moveTo(10,10); 2532 path.cubicTo(10, 10, 10, 10, 15, 15); 2533 path.close(); 2534 canvas.attachPen(pen); 2535 canvas.drawPath(path); 2536 canvas.detachPen(); 2537 } 2538} 2539``` 2540 2541### drawLine 2542 2543drawLine(x0: number, y0: number, x1: number, y1: number): void 2544 2545Draws a line segment from the start point to the end point. If the coordinates of the start point are the same as those of the end point, nothing is drawn. 2546 2547**System capability**: SystemCapability.Graphics.Drawing 2548 2549**Parameters** 2550 2551| Name| Type | Mandatory| Description | 2552| ------ | ------ | ---- | ----------------------- | 2553| x0 | number | Yes | X coordinate of the start point of the line segment. The value is a floating point number.| 2554| y0 | number | Yes | Y coordinate of the start point of the line segment. The value is a floating point number.| 2555| x1 | number | Yes | X coordinate of the end point of the line segment. The value is a floating point number.| 2556| y1 | number | Yes | Y coordinate of the end point of the line segment. The value is a floating point number.| 2557 2558**Error codes** 2559 2560For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2561 2562| ID| Error Message| 2563| ------- | --------------------------------------------| 2564| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2565 2566**Example** 2567 2568```ts 2569import { RenderNode } from '@kit.ArkUI'; 2570import { drawing } from '@kit.ArkGraphics2D'; 2571class DrawingRenderNode extends RenderNode { 2572 draw(context : DrawContext) { 2573 const canvas = context.canvas; 2574 const pen = new drawing.Pen(); 2575 pen.setStrokeWidth(5); 2576 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2577 canvas.attachPen(pen); 2578 canvas.drawLine(0, 0, 20, 20); 2579 canvas.detachPen(); 2580 } 2581} 2582``` 2583 2584### drawTextBlob 2585 2586drawTextBlob(blob: TextBlob, x: number, y: number): void 2587 2588Draws a text blob. If the typeface used to construct **blob** does not support a character, that character will not be drawn. 2589 2590**System capability**: SystemCapability.Graphics.Drawing 2591 2592**Parameters** 2593 2594| Name| Type | Mandatory| Description | 2595| ------ | --------------------- | ---- | ------------------------------------------ | 2596| blob | [TextBlob](#textblob) | Yes | **TextBlob** object. | 2597| x | number | Yes | X coordinate of the left point (red point in the figure below) of the text baseline (blue line in the figure below). The value is a floating point number.| 2598| y | number | Yes | Y coordinate of the left point (red point in the figure below) of the text baseline (blue line in the figure below). The value is a floating point number.| 2599 2600 2601 2602**Error codes** 2603 2604For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2605 2606| ID| Error Message| 2607| ------- | --------------------------------------------| 2608| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2609 2610**Example** 2611 2612```ts 2613import { RenderNode } from '@kit.ArkUI'; 2614import { drawing } from '@kit.ArkGraphics2D'; 2615class DrawingRenderNode extends RenderNode { 2616 draw(context : DrawContext) { 2617 const canvas = context.canvas; 2618 const brush = new drawing.Brush(); 2619 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2620 const font = new drawing.Font(); 2621 font.setSize(20); 2622 const textBlob = drawing.TextBlob.makeFromString("Hello, drawing", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 2623 canvas.attachBrush(brush); 2624 canvas.drawTextBlob(textBlob, 20, 20); 2625 canvas.detachBrush(); 2626 } 2627} 2628``` 2629 2630### drawSingleCharacter<sup>12+</sup> 2631 2632drawSingleCharacter(text: string, font: Font, x: number, y: number): void 2633 2634Draws a single character. If the typeface of the current font does not support the character to draw, the system typeface is used to draw the character. 2635 2636**System capability**: SystemCapability.Graphics.Drawing 2637 2638**Parameters** 2639 2640| Name| Type | Mandatory| Description | 2641| ------ | ------------------- | ---- | ----------- | 2642| text | string | Yes | Single character to draw. The length of the string must be 1. | 2643| font | [Font](#font) | Yes | **Font** object. | 2644| x | number | Yes | X coordinate of the left point (red point in the figure below) of the character baseline (blue line in the figure below). The value is a floating point number.| 2645| y | number | Yes | Y coordinate of the left point (red point in the figure below) of the character baseline (blue line in the figure below). The value is a floating point number.| 2646 2647 2648 2649**Error codes** 2650 2651For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2652 2653| ID| Error Message| 2654| ------- | --------------------------------------------| 2655| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2656 2657**Example** 2658 2659```ts 2660import { RenderNode } from '@kit.ArkUI'; 2661import { drawing } from '@kit.ArkGraphics2D'; 2662 2663class DrawingRenderNode extends RenderNode { 2664 draw(context : DrawContext) { 2665 const canvas = context.canvas; 2666 const brush = new drawing.Brush(); 2667 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2668 const font = new drawing.Font(); 2669 font.setSize(20); 2670 canvas.attachBrush(brush); 2671 canvas.drawSingleCharacter ("Hello", font, 100, 100); 2672 canvas.drawSingleCharacter ("drawing", font, 120, 100); 2673 canvas.detachBrush(); 2674 } 2675} 2676``` 2677 2678### drawRegion<sup>12+</sup> 2679 2680drawRegion(region: Region): void 2681 2682Draws a region. 2683 2684**System capability**: SystemCapability.Graphics.Drawing 2685 2686**Parameters** 2687 2688| Name| Type | Mandatory| Description | 2689| ------ | ------------------- | ---- | ----------- | 2690| region | [Region](#region12) | Yes | Region to draw. | 2691 2692**Error codes** 2693 2694For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2695 2696| ID| Error Message| 2697| ------- | --------------------------------------------| 2698| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2699 2700**Example** 2701 2702```ts 2703import { RenderNode } from '@kit.ArkUI'; 2704import { drawing } from '@kit.ArkGraphics2D'; 2705class DrawingRenderNode extends RenderNode { 2706 draw(context : DrawContext) { 2707 const canvas = context.canvas; 2708 const pen = new drawing.Pen(); 2709 let region = new drawing.Region(); 2710 pen.setStrokeWidth(10); 2711 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 2712 canvas.attachPen(pen); 2713 region.setRect(100, 100, 400, 400); 2714 canvas.drawRegion(region); 2715 canvas.detachPen(); 2716 } 2717} 2718``` 2719 2720### attachPen 2721 2722attachPen(pen: Pen): void 2723 2724Attaches a pen to a canvas so that the canvas can use the style and color of the pen to outline a shape. 2725 2726> **NOTE** 2727> 2728> If the pen effect changes after this API is called, you must call the API again if you want to use the new effect in the subsequent drawing. 2729 2730**System capability**: SystemCapability.Graphics.Drawing 2731 2732**Parameters** 2733 2734| Name| Type | Mandatory| Description | 2735| ------ | ----------- | ---- | ---------- | 2736| pen | [Pen](#pen) | Yes | **Pen** object.| 2737 2738**Error codes** 2739 2740For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2741 2742| ID| Error Message| 2743| ------- | --------------------------------------------| 2744| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2745 2746**Example** 2747 2748```ts 2749import { RenderNode } from '@kit.ArkUI'; 2750import { drawing } from '@kit.ArkGraphics2D'; 2751class DrawingRenderNode extends RenderNode { 2752 draw(context : DrawContext) { 2753 const canvas = context.canvas; 2754 const pen = new drawing.Pen(); 2755 pen.setStrokeWidth(5); 2756 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2757 canvas.attachPen(pen); 2758 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 2759 canvas.detachPen(); 2760 } 2761} 2762``` 2763 2764### attachBrush 2765 2766attachBrush(brush: Brush): void 2767 2768Attaches a brush to a canvas so that the canvas can use the style and color of the brush to fill in a shape. 2769 2770> **NOTE** 2771> 2772> If the brush effect changes after this API is called, you must call the API again if you want to use the new effect in the subsequent drawing. 2773 2774**System capability**: SystemCapability.Graphics.Drawing 2775 2776**Parameters** 2777 2778| Name| Type | Mandatory| Description | 2779| ------ | --------------- | ---- | ---------- | 2780| brush | [Brush](#brush) | Yes | **Brush** object.| 2781 2782**Error codes** 2783 2784For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2785 2786| ID| Error Message| 2787| ------- | --------------------------------------------| 2788| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2789 2790**Example** 2791 2792```ts 2793import { RenderNode } from '@kit.ArkUI'; 2794import { drawing } from '@kit.ArkGraphics2D'; 2795class DrawingRenderNode extends RenderNode { 2796 draw(context : DrawContext) { 2797 const canvas = context.canvas; 2798 const brush = new drawing.Brush(); 2799 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2800 canvas.attachBrush(brush); 2801 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 2802 canvas.detachBrush(); 2803 } 2804} 2805``` 2806 2807### detachPen 2808 2809detachPen(): void 2810 2811Detaches the pen from a canvas so that the canvas can no longer use the style and color of the pen to outline a shape. 2812 2813**System capability**: SystemCapability.Graphics.Drawing 2814 2815**Example** 2816 2817```ts 2818import { RenderNode } from '@kit.ArkUI'; 2819import { drawing } from '@kit.ArkGraphics2D'; 2820class DrawingRenderNode extends RenderNode { 2821 draw(context : DrawContext) { 2822 const canvas = context.canvas; 2823 const pen = new drawing.Pen(); 2824 pen.setStrokeWidth(5); 2825 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2826 canvas.attachPen(pen); 2827 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 2828 canvas.detachPen(); 2829 } 2830} 2831``` 2832 2833### detachBrush 2834 2835detachBrush(): void 2836 2837Detaches the brush from a canvas so that the canvas can no longer use the style and color of the brush to fill in a shape. 2838 2839**System capability**: SystemCapability.Graphics.Drawing 2840 2841**Example** 2842 2843```ts 2844import { RenderNode } from '@kit.ArkUI'; 2845import { drawing } from '@kit.ArkGraphics2D'; 2846class DrawingRenderNode extends RenderNode { 2847 draw(context : DrawContext) { 2848 const canvas = context.canvas; 2849 const brush = new drawing.Brush(); 2850 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2851 canvas.attachBrush(brush); 2852 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 2853 canvas.detachBrush(); 2854 } 2855} 2856``` 2857 2858### clipPath<sup>12+</sup> 2859 2860clipPath(path: Path, clipOp?: ClipOp, doAntiAlias?: boolean): void 2861 2862Clips a path. 2863 2864**System capability**: SystemCapability.Graphics.Drawing 2865 2866**Parameters** 2867 2868| Name | Type | Mandatory| Description | 2869| ------------ | ----------------- | ---- | ------------------------------------| 2870| path | [Path](#path) | Yes | **Path** object. | 2871| clipOp | [ClipOp](#clipop12) | No | Clip mode. The default value is **INTERSECT**. | 2872| doAntiAlias | boolean | No | Whether to enable anti-aliasing. The value **true** means to enable anti-aliasing, and **false** means the opposite. The default value is **false**.| 2873 2874**Error codes** 2875 2876For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2877 2878| ID| Error Message| 2879| ------- | --------------------------------------------| 2880| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2881 2882**Example** 2883 2884```ts 2885import { RenderNode } from '@kit.ArkUI'; 2886import { common2D, drawing } from '@kit.ArkGraphics2D'; 2887class DrawingRenderNode extends RenderNode { 2888 draw(context : DrawContext) { 2889 const canvas = context.canvas; 2890 let path = new drawing.Path(); 2891 path.moveTo(10, 10); 2892 path.cubicTo(100, 100, 80, 150, 300, 150); 2893 path.close(); 2894 canvas.clipPath(path, drawing.ClipOp.INTERSECT, true); 2895 canvas.clear({alpha: 255, red: 255, green: 0, blue: 0}); 2896 } 2897} 2898``` 2899 2900### clipRect<sup>12+</sup> 2901 2902clipRect(rect: common2D.Rect, clipOp?: ClipOp, doAntiAlias?: boolean): void 2903 2904Clips a rectangle. 2905 2906**System capability**: SystemCapability.Graphics.Drawing 2907 2908**Parameters** 2909 2910| Name | Type | Mandatory | Description | 2911| ----------- | ---------------------------------------- | ---- | ------------------- | 2912| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangle. | 2913| clipOp | [ClipOp](#clipop12) | No | Clip mode. The default value is **INTERSECT**. | 2914| doAntiAlias | boolean | No | Whether to enable anti-aliasing. The value **true** means to enable anti-aliasing, and **false** means the opposite. The default value is **false**.| 2915 2916**Error codes** 2917 2918For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2919 2920| ID| Error Message| 2921| ------- | --------------------------------------------| 2922| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2923 2924**Example** 2925 2926```ts 2927import { RenderNode } from '@kit.ArkUI'; 2928import { common2D, drawing } from '@kit.ArkGraphics2D'; 2929class DrawingRenderNode extends RenderNode { 2930 draw(context : DrawContext) { 2931 const canvas = context.canvas; 2932 canvas.clipRect({left : 10, right : 500, top : 300, bottom : 900}, drawing.ClipOp.DIFFERENCE, true); 2933 canvas.clear({alpha: 255, red: 255, green: 0, blue: 0}); 2934 } 2935} 2936``` 2937 2938### save<sup>12+</sup> 2939 2940save(): number 2941 2942Saves the current canvas status (canvas matrix) to the top of the stack. This API must be used in pair with [restore](#restore12). 2943 2944**System capability**: SystemCapability.Graphics.Drawing 2945 2946**Return value** 2947 2948| Type | Description | 2949| ------ | ------------------ | 2950| number | Number of canvas statuses. The value is a positive integer.| 2951 2952**Example** 2953 2954```ts 2955import { RenderNode } from '@kit.ArkUI'; 2956import { common2D, drawing } from '@kit.ArkGraphics2D'; 2957class DrawingRenderNode extends RenderNode { 2958 draw(context : DrawContext) { 2959 const canvas = context.canvas; 2960 let rect: common2D.Rect = {left: 10, right: 200, top: 100, bottom: 300}; 2961 canvas.drawRect(rect); 2962 let saveCount = canvas.save(); 2963 } 2964} 2965``` 2966 2967### saveLayer<sup>12+</sup> 2968 2969saveLayer(rect?: common2D.Rect | null, brush?: Brush | null): number 2970 2971Saves the matrix and cropping region of the canvas, and allocates a PixelMap for subsequent drawing. If you call [restore](#restore12), changes made to the matrix and clipping region are discarded, and the PixelMap is drawn. 2972 2973**System capability**: SystemCapability.Graphics.Drawing 2974 2975**Parameters** 2976 2977| Name | Type | Mandatory | Description | 2978| ---- | ------ | ---- | ----------------- | 2979| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect)\|null | No | **Rect** object, which is used to limit the size of the graphics layer. The default value is the current canvas size.| 2980| brush | [Brush](#brush)\|null | No | **Brush** object. The alpha value, filter effect, and blend mode of the brush are applied when the bitmap is drawn. If null is passed in, no effect is applied.| 2981 2982**Return value** 2983 2984| Type | Description | 2985| ------ | ------------------ | 2986| number | Number of canvas statuses that have been saved. The value is a positive integer.| 2987 2988**Error codes** 2989 2990For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2991 2992| ID| Error Message| 2993| ------- | --------------------------------------------| 2994| 401 | Parameter error. Possible causes: Mandatory parameters are left unspecified. | 2995 2996**Example** 2997 2998```ts 2999import { RenderNode } from '@kit.ArkUI'; 3000import { common2D, drawing } from '@kit.ArkGraphics2D'; 3001class DrawingRenderNode extends RenderNode { 3002 draw(context : DrawContext) { 3003 const canvas = context.canvas; 3004 canvas.saveLayer(null, null); 3005 const brushRect = new drawing.Brush(); 3006 const colorRect: common2D.Color = {alpha: 255, red: 255, green: 255, blue: 0}; 3007 brushRect.setColor(colorRect); 3008 canvas.attachBrush(brushRect); 3009 const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 3010 canvas.drawRect(rect); 3011 3012 const brush = new drawing.Brush(); 3013 brush.setBlendMode(drawing.BlendMode.DST_OUT); 3014 canvas.saveLayer(rect, brush); 3015 3016 const brushCircle = new drawing.Brush(); 3017 const colorCircle: common2D.Color = {alpha: 255, red: 0, green: 0, blue: 255}; 3018 brushCircle.setColor(colorCircle); 3019 canvas.attachBrush(brushCircle); 3020 canvas.drawCircle(500, 500, 200); 3021 canvas.restore(); 3022 canvas.restore(); 3023 canvas.detachBrush(); 3024 } 3025} 3026``` 3027 3028### scale<sup>12+</sup> 3029 3030scale(sx: number, sy: number): void 3031 3032Scales the canvas. 3033 3034**System capability**: SystemCapability.Graphics.Drawing 3035 3036**Parameters** 3037 3038| Name | Type | Mandatory | Description | 3039| ---- | ------ | ---- | ----------------- | 3040| sx | number | Yes | Scale ratio on the X axis. The value is a floating point number.| 3041| sy | number | Yes | Scale ratio on the Y axis. The value is a floating point number.| 3042 3043**Error codes** 3044 3045For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3046 3047| ID| Error Message| 3048| ------- | --------------------------------------------| 3049| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3050 3051**Example** 3052 3053```ts 3054import { RenderNode } from '@kit.ArkUI'; 3055import { common2D, drawing } from '@kit.ArkGraphics2D'; 3056class DrawingRenderNode extends RenderNode { 3057 draw(context : DrawContext) { 3058 const canvas = context.canvas; 3059 const pen = new drawing.Pen(); 3060 pen.setStrokeWidth(5); 3061 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3062 canvas.attachPen(pen); 3063 canvas.scale(2, 0.5); 3064 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3065 canvas.detachPen(); 3066 } 3067} 3068``` 3069 3070### skew<sup>12+</sup> 3071 3072skew(sx: number, sy: number) : void 3073 3074Skews the canvas in both the horizontal and vertical directions. 3075 3076**System capability**: SystemCapability.Graphics.Drawing 3077 3078**Parameters** 3079 3080| Name | Type | Mandatory | Description | 3081| ---- | ------ | ---- | ----------------- | 3082| sx | number | Yes | Amount of tilt on the X axis. The value is a floating point number. A positive number tilts the drawing rightwards along the positive direction of the Y axis, and a negative number tilts the drawing leftwards along the positive direction of the Y axis. | 3083| sy | number | Yes | Amount of tilt on the Y axis. The value is a floating point number. A positive number tilts the drawing downwards along the positive direction of the X axis, and a negative number tilts the drawing upwards along the positive direction of the X axis. | 3084 3085**Error codes** 3086 3087For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3088 3089| ID| Error Message| 3090| ------- | --------------------------------------------| 3091| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3092 3093**Example** 3094 3095```ts 3096import { RenderNode } from '@kit.ArkUI'; 3097import { common2D, drawing } from '@kit.ArkGraphics2D'; 3098class DrawingRenderNode extends RenderNode { 3099 draw(context : DrawContext) { 3100 const canvas = context.canvas; 3101 const pen = new drawing.Pen(); 3102 pen.setStrokeWidth(5); 3103 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3104 canvas.attachPen(pen); 3105 canvas.skew(0.1, 0.1); 3106 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3107 canvas.detachPen(); 3108 } 3109} 3110``` 3111 3112### rotate<sup>12+</sup> 3113 3114rotate(degrees: number, sx: number, sy: number) : void 3115 3116Rotates the canvas by a certain angle. 3117 3118**System capability**: SystemCapability.Graphics.Drawing 3119 3120**Parameters** 3121 3122| Name | Type | Mandatory | Description | 3123| ---- | ------ | ------ | ------------------------ | 3124| degrees | number | Yes | Angle to rotate, in degrees. The value is a floating point number. A positive value indicates a clockwise rotation, and a negative value indicates a counterclockwise rotation. | 3125| sx | number | Yes | X coordinate of the rotation center. The value is a floating point number.| 3126| sy | number | Yes | Y coordinate of the rotation center. The value is a floating point number.| 3127 3128**Error codes** 3129 3130For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3131 3132| ID| Error Message| 3133| ------- | --------------------------------------------| 3134| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3135 3136**Example** 3137 3138```ts 3139import { RenderNode } from '@kit.ArkUI'; 3140import { common2D, drawing } from '@kit.ArkGraphics2D'; 3141class DrawingRenderNode extends RenderNode { 3142 draw(context : DrawContext) { 3143 const canvas = context.canvas; 3144 const pen = new drawing.Pen(); 3145 pen.setStrokeWidth(5); 3146 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3147 canvas.attachPen(pen); 3148 canvas.rotate(30, 100, 100); 3149 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3150 canvas.detachPen(); 3151 } 3152} 3153``` 3154 3155### translate<sup>12+</sup> 3156 3157translate(dx: number, dy: number): void 3158 3159Translates the canvas by a given distance. 3160 3161**System capability**: SystemCapability.Graphics.Drawing 3162 3163**Parameters** 3164 3165| Name| Type | Mandatory| Description | 3166| ----- | ------ | ---- | ------------------- | 3167| dx | number | Yes | Distance to translate on the X axis. The value is a floating point number. | 3168| dy | number | Yes | Distance to translate on the Y axis. The value is a floating point number. | 3169 3170**Error codes** 3171 3172For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3173 3174| ID| Error Message| 3175| ------- | --------------------------------------------| 3176| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3177 3178**Example** 3179 3180```ts 3181import { RenderNode } from '@kit.ArkUI'; 3182import { common2D, drawing } from '@kit.ArkGraphics2D'; 3183class DrawingRenderNode extends RenderNode { 3184 draw(context : DrawContext) { 3185 const canvas = context.canvas; 3186 const pen = new drawing.Pen(); 3187 pen.setStrokeWidth(5); 3188 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3189 canvas.attachPen(pen); 3190 canvas.translate(10, 10); 3191 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3192 canvas.detachPen(); 3193 } 3194} 3195``` 3196 3197### getSaveCount<sup>12+</sup> 3198 3199getSaveCount(): number 3200 3201Obtains the number of canvas statuses (canvas matrices) saved in the stack. 3202 3203**System capability**: SystemCapability.Graphics.Drawing 3204 3205**Return value** 3206 3207| Type | Description | 3208| ------ | ------------------------------------ | 3209| number | Number of canvas statuses that have been saved. The value is a positive integer.| 3210 3211**Example** 3212 3213```ts 3214import { RenderNode } from '@kit.ArkUI'; 3215import { common2D, drawing } from '@kit.ArkGraphics2D'; 3216class DrawingRenderNode extends RenderNode { 3217 draw(context : DrawContext) { 3218 const canvas = context.canvas; 3219 const pen = new drawing.Pen(); 3220 pen.setStrokeWidth(5); 3221 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3222 canvas.attachPen(pen); 3223 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 300}); 3224 canvas.save(); 3225 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3226 canvas.getSaveCount(); 3227 canvas.detachPen(); 3228 } 3229} 3230``` 3231 3232### restoreToCount<sup>12+</sup> 3233 3234restoreToCount(count: number): void 3235 3236Restores to a given number of canvas statuses (canvas matrices). 3237 3238**System capability**: SystemCapability.Graphics.Drawing 3239 3240**Parameters** 3241 3242| Name | Type | Mandatory | Description | 3243| ----- | ------ | ---- | ----------------------------- | 3244| count | number | Yes | Depth of the canvas statuses to restore. The value is an integer. If the value is less than or equal to 1, the canvas is restored to the initial state. If the value is greater than the number of canvas statuses that have been saved, no operation is performed.| 3245 3246**Error codes** 3247 3248For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3249 3250| ID| Error Message| 3251| ------- | --------------------------------------------| 3252| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3253 3254**Example** 3255 3256```ts 3257import { RenderNode } from '@kit.ArkUI'; 3258import { common2D, drawing } from '@kit.ArkGraphics2D'; 3259class DrawingRenderNode extends RenderNode { 3260 draw(context : DrawContext) { 3261 const canvas = context.canvas; 3262 const pen = new drawing.Pen(); 3263 pen.setStrokeWidth(5); 3264 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3265 canvas.attachPen(pen); 3266 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 300}); 3267 canvas.save(); 3268 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 500}); 3269 canvas.save(); 3270 canvas.drawRect({left: 100, right: 300, top: 100, bottom: 500}); 3271 canvas.save(); 3272 canvas.restoreToCount(2); 3273 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3274 canvas.detachPen(); 3275 } 3276} 3277``` 3278 3279### restore<sup>12+</sup> 3280 3281restore(): void 3282 3283Restores the canvas status (canvas matrix) saved on the top of the stack. 3284 3285**System capability**: SystemCapability.Graphics.Drawing 3286 3287**Example** 3288 3289```ts 3290import { RenderNode } from '@kit.ArkUI'; 3291import { common2D, drawing } from '@kit.ArkGraphics2D'; 3292class DrawingRenderNode extends RenderNode { 3293 draw(context : DrawContext) { 3294 const canvas = context.canvas; 3295 const pen = new drawing.Pen(); 3296 pen.setStrokeWidth(5); 3297 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3298 canvas.attachPen(pen); 3299 canvas.restore(); 3300 canvas.detachPen(); 3301 } 3302} 3303``` 3304 3305### concatMatrix<sup>12+</sup> 3306 3307concatMatrix(matrix: Matrix): void 3308 3309Preconcats the existing matrix of the canvas with the passed-in matrix. The drawing operation triggered before this API is called is not affected. 3310 3311**System capability**: SystemCapability.Graphics.Drawing 3312 3313**Parameters** 3314 3315| Name | Type | Mandatory | Description | 3316| ------ | ----------------- | ---- | ----- | 3317| matrix | [Matrix](#matrix12) | Yes | **Matrix** object.| 3318 3319**Error codes** 3320 3321For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3322 3323| ID| Error Message| 3324| ------- | --------------------------------------------| 3325| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3326 3327**Example** 3328 3329```ts 3330import { RenderNode } from '@kit.ArkUI'; 3331import { drawing } from '@kit.ArkGraphics2D'; 3332class DrawingRenderNode extends RenderNode { 3333 draw(context : DrawContext) { 3334 const canvas = context.canvas; 3335 let matrix = new drawing.Matrix(); 3336 matrix.setMatrix([5, 0, 0, 0, 1, 2, 0, 0, 1]); 3337 canvas.concatMatrix(matrix); 3338 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 500}); 3339 } 3340} 3341``` 3342 3343### setMatrix<sup>12+</sup> 3344 3345setMatrix(matrix: Matrix): void 3346 3347Sets a matrix for the canvas. 3348 3349**System capability**: SystemCapability.Graphics.Drawing 3350 3351**Parameters** 3352 3353| Name | Type | Mandatory | Description | 3354| ------ | ----------------- | ---- | ----- | 3355| matrix | [Matrix](#matrix12) | Yes | **Matrix** object.| 3356 3357**Error codes** 3358 3359For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3360 3361| ID| Error Message| 3362| ------- | --------------------------------------------| 3363| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3364 3365**Example** 3366 3367```ts 3368import { RenderNode } from '@kit.ArkUI'; 3369import { drawing } from '@kit.ArkGraphics2D'; 3370class DrawingRenderNode extends RenderNode { 3371 draw(context : DrawContext) { 3372 const canvas = context.canvas; 3373 let matrix = new drawing.Matrix() 3374 matrix.setMatrix([5, 0, 0, 0, 1, 1, 0, 0, 1]); 3375 canvas.setMatrix(matrix); 3376 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 500}); 3377 } 3378} 3379``` 3380 3381### isClipEmpty<sup>12+</sup> 3382 3383isClipEmpty(): boolean 3384 3385Checks whether the region that can be drawn is empty after clipping. 3386 3387**System capability**: SystemCapability.Graphics.Drawing 3388 3389**Return value** 3390 3391| Type | Description | 3392| --------------------- | -------------- | 3393| boolean | Check result. The value **true** means that the region is empty, and **false** means the opposite.| 3394 3395**Example** 3396 3397```ts 3398import { RenderNode } from '@kit.ArkUI'; 3399import { drawing } from '@kit.ArkGraphics2D'; 3400class DrawingRenderNode extends RenderNode { 3401 draw(context : DrawContext) { 3402 const canvas = context.canvas; 3403 if (canvas.isClipEmpty()) { 3404 console.info("canvas.isClipEmpty() returned true"); 3405 } else { 3406 console.info("canvas.isClipEmpty() returned false"); 3407 } 3408 } 3409} 3410``` 3411 3412### clipRegion<sup>12+</sup> 3413 3414clipRegion(region: Region, clipOp?: ClipOp): void 3415 3416Clips a region on the canvas. 3417 3418**System capability**: SystemCapability.Graphics.Drawing 3419 3420**Parameters** 3421 3422| Name | Type | Mandatory| Description | 3423| --------------- | ------- | ---- | ----------------------------------------------------------- | 3424| region | [Region](#region12) | Yes | **Region** object, which indicates the range to clip.| 3425| clipOp | [ClipOp](#clipop12) | No | Clipping mode. The default value is **INTERSECT**.| 3426 3427**Error codes** 3428 3429For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3430 3431| ID| Error Message| 3432| ------- | --------------------------------------------| 3433| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3434 3435**Example** 3436 3437```ts 3438import { RenderNode } from '@kit.ArkUI'; 3439import { common2D, drawing } from '@kit.ArkGraphics2D'; 3440class DrawingRenderNode extends RenderNode { 3441 draw(context : DrawContext) { 3442 const canvas = context.canvas; 3443 let region : drawing.Region = new drawing.Region(); 3444 region.setRect(0, 0, 500, 500); 3445 canvas.clipRegion(region); 3446 let color: common2D.Color = {alpha: 255, red: 255, green: 0, blue: 0}; 3447 canvas.clear(color); 3448 } 3449} 3450``` 3451 3452### clipRoundRect<sup>12+</sup> 3453 3454clipRoundRect(roundRect: RoundRect, clipOp?: ClipOp, doAntiAlias?: boolean): void 3455 3456Clips a rounded rectangle on the canvas. 3457 3458**System capability**: SystemCapability.Graphics.Drawing 3459 3460**Parameters** 3461 3462| Name | Type | Mandatory| Description | 3463| --------------- | ------- | ---- | ----------------------------------------------------------- | 3464| roundRect | [RoundRect](#roundrect12) | Yes | **RoundRect** object, which indicates the range to clip.| 3465| clipOp | [ClipOp](#clipop12) | No | Clipping mode. The default value is **INTERSECT**.| 3466| doAntiAlias | boolean | No | Whether to enable anti-aliasing. The value **true** means to enable anti-aliasing, and **false** means the opposite. The default value is **false**.| 3467 3468**Error codes** 3469 3470For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3471 3472| ID| Error Message| 3473| ------- | --------------------------------------------| 3474| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3475 3476**Example** 3477 3478```ts 3479import { RenderNode } from '@kit.ArkUI'; 3480import { common2D, drawing } from '@kit.ArkGraphics2D'; 3481class DrawingRenderNode extends RenderNode { 3482 draw(context : DrawContext) { 3483 const canvas = context.canvas; 3484 let rect: common2D.Rect = { left: 10, top: 100, right: 200, bottom: 300 }; 3485 let roundRect = new drawing.RoundRect(rect, 10, 10); 3486 canvas.clipRoundRect(roundRect); 3487 let color: common2D.Color = {alpha: 255, red: 255, green: 0, blue: 0}; 3488 canvas.clear(color); 3489 } 3490} 3491``` 3492 3493### resetMatrix<sup>12+</sup> 3494 3495resetMatrix(): void 3496 3497Resets the matrix of this canvas to an identity matrix. 3498 3499**System capability**: SystemCapability.Graphics.Drawing 3500 3501**Example** 3502 3503```ts 3504import { RenderNode } from '@kit.ArkUI'; 3505import { drawing } from '@kit.ArkGraphics2D'; 3506class DrawingRenderNode extends RenderNode { 3507 draw(context : DrawContext) { 3508 const canvas = context.canvas; 3509 canvas.scale(4, 6); 3510 canvas.resetMatrix(); 3511 } 3512} 3513``` 3514 3515### quickRejectPath<sup>18+</sup> 3516 3517quickRejectPath(path: Path): boolean 3518 3519Checks whether the path is not intersecting with the canvas area. The canvas area includes its boundaries. 3520 3521**System capability**: SystemCapability.Graphics.Drawing 3522 3523**Parameters** 3524 3525| Name| Type | Mandatory| Description | 3526| ------ | ------------- | ---- | ------------------ | 3527| path | [Path](#path) | Yes | Path object.| 3528 3529**Return value** 3530 3531| Type | Description | 3532| --------------------- | -------------- | 3533| boolean | Check result. The value **true** means that the path is not intersecting with the canvas area, and **false** means the opposite.| 3534 3535**Error codes** 3536 3537For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3538 3539| ID| Error Message| 3540| ------- | --------------------------------------------| 3541| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3542 3543**Example** 3544 3545```ts 3546import { RenderNode } from '@kit.ArkUI'; 3547import { drawing } from '@kit.ArkGraphics2D'; 3548 3549class DrawingRenderNode extends RenderNode { 3550 draw(context : DrawContext) { 3551 const canvas = context.canvas; 3552 let path = new drawing.Path(); 3553 path.moveTo(10, 10); 3554 path.cubicTo(10, 10, 10, 10, 15, 15); 3555 path.close(); 3556 if (canvas.quickRejectPath(path)) { 3557 console.info("canvas and path do not intersect."); 3558 } else { 3559 console.info("canvas and path intersect."); 3560 } 3561 } 3562} 3563``` 3564 3565### quickRejectRect<sup>18+</sup> 3566 3567quickRejectRect(rect: common2D.Rect): boolean 3568 3569Checks whether the rectangle is not intersecting with the canvas area. The canvas area includes its boundaries. 3570 3571**System capability**: SystemCapability.Graphics.Drawing 3572 3573**Parameters** 3574 3575| Name| Type | Mandatory| Description | 3576| ------ | -------------------------------------------------- | ---- | -------------- | 3577| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangle.| 3578 3579**Return value** 3580 3581| Type | Description | 3582| --------------------- | -------------- | 3583| boolean | Check result. The value **true** means that the rectangle is not intersecting with the canvas area, and **false** means the opposite.| 3584 3585**Error codes** 3586 3587For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3588 3589| ID| Error Message| 3590| ------- | --------------------------------------------| 3591| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3592 3593**Example** 3594 3595```ts 3596import { RenderNode } from '@kit.ArkUI'; 3597import { common2D, drawing } from '@kit.ArkGraphics2D'; 3598 3599class DrawingRenderNode extends RenderNode { 3600 draw(context : DrawContext) { 3601 const canvas = context.canvas; 3602 let rect: common2D.Rect = { left : 10, top : 20, right : 50, bottom : 30 }; 3603 if (canvas.quickRejectRect(rect)) { 3604 console.info("canvas and rect do not intersect."); 3605 } else { 3606 console.info("canvas and rect intersect."); 3607 } 3608 } 3609} 3610``` 3611 3612### drawArcWithCenter<sup>18+</sup> 3613 3614drawArcWithCenter(arc: common2D.Rect, startAngle: number, sweepAngle: number, useCenter: boolean): void 3615 3616Draws an arc on the canvas. It enables you to define the starting angle, sweep angle, and whether the arc's endpoints should connect to its center. 3617 3618**System capability**: SystemCapability.Graphics.Drawing 3619 3620**Parameters** 3621 3622| Name| Type | Mandatory| Description | 3623| ------ | -------------------------------------------------- | ---- | -------------- | 3624| arc | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangular boundary that encapsulates the oval including the arc.| 3625| startAngle | number | Yes | Start angle, in degrees. The value is a floating point number. When the degree is 0, the start point is located at the right end of the oval. A positive number indicates that the start point is placed clockwise, and a negative number indicates that the start point is placed counterclockwise.| 3626| sweepAngle | number | Yes | Angle to sweep, in degrees. The value is a floating point number. A positive number indicates a clockwise sweep, and a negative value indicates a counterclockwise swipe. The swipe angle can exceed 360 degrees, and a complete ellipse is drawn.| 3627| useCenter | boolean | Yes | Whether the start point and end point of the arc are connected to its center. The value **true** means that they are connected to the center; the value **false** means the opposite.| 3628 3629**Error codes** 3630 3631For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3632 3633| ID| Error Message| 3634| ------- | --------------------------------------------| 3635| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3636 3637**Example** 3638 3639```ts 3640import { RenderNode } from '@kit.ArkUI'; 3641import { common2D, drawing } from '@kit.ArkGraphics2D'; 3642 3643class DrawingRenderNode extends RenderNode { 3644 draw(context : DrawContext) { 3645 const canvas = context.canvas; 3646 const pen = new drawing.Pen(); 3647 pen.setStrokeWidth(5); 3648 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 3649 pen.setColor(color); 3650 canvas.attachPen(pen); 3651 const rect: common2D.Rect = { left: 100, top: 50, right: 400, bottom: 200 }; 3652 canvas.drawArcWithCenter(rect, 90, 180, false); 3653 canvas.detachPen(); 3654 } 3655} 3656``` 3657 3658### drawImageNine<sup>18+</sup> 3659 3660drawImageNine(pixelmap: image.PixelMap, center: common2D.Rect, dstRect: common2D.Rect, filterMode: FilterMode): void 3661 3662Splits an image into nine sections using two horizontal and two vertical lines: four edge sections, four corner sections, and a central section. 3663 3664If the four corner sections are smaller than the target rectangle, they will be drawn in the target rectangle without scaling. Otherwise, they will be scaled to fit the target rectangle. Any remaining space will be filled by stretching or compressing the other five sections to cover the entire target rectangle. 3665 3666**System capability**: SystemCapability.Graphics.Drawing 3667 3668**Parameters** 3669 3670| Name| Type | Mandatory| Description | 3671| ------ | ------ | ---- | -------------- | 3672| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap to split.| 3673| center | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Central rectangle that divides the image into nine sections by extending its four edges.| 3674| dstRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Target rectangle drawn on the canvas.| 3675| filterMode | [FilterMode](#filtermode12) | Yes | Filter mode.| 3676 3677**Error codes** 3678 3679For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3680 3681| ID| Error Message| 3682| ------- | --------------------------------------------| 3683| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 3684 3685**Example** 3686 3687```ts 3688import { RenderNode } from '@kit.ArkUI'; 3689import { common2D, drawing } from '@kit.ArkGraphics2D'; 3690import { image } from '@kit.ImageKit'; 3691 3692class DrawingRenderNode extends RenderNode { 3693pixelMap: image.PixelMap | null = null; 3694 draw(context : DrawContext) { 3695 const canvas = context.canvas; 3696 canvas.drawImage(this.pixelMap, 0, 0); // Original image 3697 let center: common2D.Rect = { left: 20, top: 10, right: 50, bottom: 40 }; 3698 let dst: common2D.Rect = { left: 70, top: 0, right: 100, bottom: 30 }; 3699 let dst1: common2D.Rect = { left: 110, top: 0, right: 200, bottom: 90 }; 3700 canvas.drawImageNine(this.pixelMap, center, dst, drawing.FilterMode.FILTER_MODE_NEAREST); // Example 1 3701 canvas.drawImageNine(this.pixelMap, center, dst1, drawing.FilterMode.FILTER_MODE_NEAREST); // Example 2 3702 } 3703} 3704``` 3705 3706 3707### drawImageLattice<sup>18+</sup> 3708 3709drawImageLattice(pixelmap: image.PixelMap, lattice: Lattice, dstRect: common2D.Rect, filterMode: FilterMode): void 3710 3711Splits an image into multiple sections based on the lattice object's configuration and draws each section into the specified target rectangle on the canvas. 3712 3713The intersections of even-numbered rows and columns (starting from 0) are fixed points. If the fixed lattice area fits within the target rectangle, it will be drawn without scaling. Otherwise, it will be scaled proportionally to fit the target rectangle. Any remaining space will be filled by stretching or compressing the remaining sections to cover the entire target rectangle. 3714 3715**System capability**: SystemCapability.Graphics.Drawing 3716 3717**Parameters** 3718 3719| Name| Type | Mandatory| Description | 3720| ------ | ------ | ---- | -------------- | 3721| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap to split.| 3722| lattice | [Lattice](#lattice12) | Yes | Lattice object.| 3723| dstRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Target rectangle.| 3724| filterMode | [FilterMode](#filtermode12) | Yes | Filter mode.| 3725 3726**Error codes** 3727 3728For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3729 3730| ID| Error Message| 3731| ------- | --------------------------------------------| 3732| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 3733 3734**Example** 3735 3736```ts 3737import { RenderNode } from '@kit.ArkUI'; 3738import { common2D, drawing } from '@kit.ArkGraphics2D'; 3739import { image } from '@kit.ImageKit'; 3740 3741class DrawingRenderNode extends RenderNode { 3742pixelMap: image.PixelMap | null = null; 3743 draw(context : DrawContext) { 3744 const canvas = context.canvas; 3745 canvas.drawImage(this.pixelMap, 0, 0); // Original image 3746 let xDivs: Array<number> = [28, 36, 44, 52]; 3747 let yDivs: Array<number> = [28, 36, 44, 52]; 3748 let lattice = drawing.Lattice.createImageLattice(xDivs, yDivs, 4, 4); 3749 let dst: common2D.Rect = { left: 100, top: 0, right: 164, bottom: 64 }; 3750 let dst1: common2D.Rect = { left: 200, top: 0, right: 360, bottom: 160 }; 3751 canvas.drawImageLattice(this.pixelMap, lattice, dst, drawing.FilterMode.FILTER_MODE_NEAREST); // Example 1 3752 canvas.drawImageLattice(this.pixelMap, lattice, dst1, drawing.FilterMode.FILTER_MODE_NEAREST); // Example 2 3753 } 3754} 3755``` 3756 3757 3758## ImageFilter<sup>12+</sup> 3759 3760Implements an image filter. 3761 3762### createBlurImageFilter<sup>12+</sup> 3763 3764static createBlurImageFilter(sigmaX: number, sigmaY: number, tileMode: TileMode, imageFilter?: ImageFilter | null ): ImageFilter 3765 3766Creates an image filter with a given blur effect. 3767 3768**System capability**: SystemCapability.Graphics.Drawing 3769 3770**Parameters** 3771 3772| Name | Type | Mandatory| Description | 3773| --------------- | ------- | ---- | ----------------------------------------------------------- | 3774| sigmaX | number | Yes | Standard deviation of the Gaussian blur along the X axis. The value must be a floating point number greater than 0.| 3775| sigmaY | number | Yes | Standard deviation of the Gaussian blur along the Y axis. The value must be a floating point number greater than 0.| 3776| tileMode | [TileMode](#tilemode12)| Yes | Tile mode to apply to the edges.| 3777| imageFilter | [ImageFilter](#imagefilter12) \| null | No | Filter to which the image filter will be applied. The default value is null, indicating that the image filter is directly applied to the original image.| 3778 3779**Return value** 3780 3781| Type | Description | 3782| --------------------- | -------------- | 3783| [ImageFilter](#imagefilter12) | Image filter created.| 3784 3785**Error codes** 3786 3787For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3788 3789| ID| Error Message| 3790| ------- | --------------------------------------------| 3791| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 3792 3793**Example** 3794 3795```ts 3796import { drawing } from '@kit.ArkGraphics2D'; 3797let imgFilter = drawing.ImageFilter.createBlurImageFilter(5, 10, drawing.TileMode.CLAMP); 3798``` 3799 3800### createFromColorFilter<sup>12+</sup> 3801 3802static createFromColorFilter(colorFilter: ColorFilter, imageFilter?: ImageFilter | null): ImageFilter 3803 3804Creates an image filter object with a given color filter effect. 3805 3806**System capability**: SystemCapability.Graphics.Drawing 3807 3808**Parameters** 3809 3810| Name | Type | Mandatory| Description | 3811| --------------- | ------- | ---- | ----------------------------------------------------------- | 3812| colorFilter | [ColorFilter](#colorfilter) | Yes | Color filter.| 3813| imageFilter | [ImageFilter](#imagefilter12) \| null | No | Filter to which the image filter will be applied. The default value is null, indicating that the image filter is directly applied to the original image.| 3814 3815**Return value** 3816 3817| Type | Description | 3818| --------------------- | -------------- | 3819| [ImageFilter](#imagefilter12) | Image filter created.| 3820 3821**Error codes** 3822 3823For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3824 3825| ID| Error Message| 3826| ------- | --------------------------------------------| 3827| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3828 3829**Example** 3830 3831```ts 3832import { drawing } from '@kit.ArkGraphics2D'; 3833let imgFilter = drawing.ImageFilter.createBlurImageFilter(5, 10, drawing.TileMode.CLAMP); 3834let clolorfilter = drawing.ColorFilter.createSRGBGammaToLinear(); 3835let imgFilter1 = drawing.ImageFilter.createFromColorFilter(clolorfilter, imgFilter); 3836``` 3837 3838## TextBlobRunBuffer 3839 3840Describes a series of consecutive glyphs with the same attributes in a text blob. 3841 3842**System capability**: SystemCapability.Graphics.Drawing 3843 3844| Name | Type | Readable| Writable| Description | 3845| --------- | ------ | ---- | ---- | ------------------------- | 3846| glyph | number | Yes | Yes | Index of the glyph. The value is an integer. If a floating point number is passed in, the value is rounded down.| 3847| positionX | number | Yes | Yes | X coordinate of the start point of the text blob. The value is a floating point number.| 3848| positionY | number | Yes | Yes | Y coordinate of the start point of the text blob. The value is a floating point number.| 3849 3850## TextEncoding 3851 3852Enumerates the text encoding types. 3853 3854**System capability**: SystemCapability.Graphics.Drawing 3855 3856| Name | Value | Description | 3857| ---------------------- | ---- | ------------------------------ | 3858| TEXT_ENCODING_UTF8 | 0 | One byte is used to indicate UTF-8 or ASCII characters. | 3859| TEXT_ENCODING_UTF16 | 1 | Two bytes are used to indicate most Unicode characters.| 3860| TEXT_ENCODING_UTF32 | 2 | Four bytes are used to indicate all Unicode characters. | 3861| TEXT_ENCODING_GLYPH_ID | 3 | Two bytes are used to indicate the glyph index. | 3862 3863## ClipOp<sup>12+</sup> 3864Enumerates the canvas clipping modes. 3865 3866 3867**System capability**: SystemCapability.Graphics.Drawing 3868 3869| Name | Value | Description | Diagram | 3870| ------------------ | ---- | ---------------- | -------- | 3871| DIFFERENCE | 0 | Clips a specified area. That is, the difference set is obtained.|  | 3872| INTERSECT | 1 | Retains a specified area. That is, the intersection is obtained.|  | 3873 3874> **NOTE** 3875> 3876> The diagrams show the result of cropping a circle based on different enumerated values after a rectangle is cropped in INTERSECT mode. The green area is the final area obtained. 3877 3878## FilterMode<sup>12+</sup> 3879 3880Enumerates the filter modes. 3881 3882**System capability**: SystemCapability.Graphics.Drawing 3883 3884| Name | Value | Description | 3885| ------------------- | ---- | ------- | 3886| FILTER_MODE_NEAREST | 0 | Nearest filter mode.| 3887| FILTER_MODE_LINEAR | 1 | Linear filter mode.| 3888 3889## PathDirection<sup>12+</sup> 3890 3891Enumerates the directions of a closed contour. 3892 3893**System capability**: SystemCapability.Graphics.Drawing 3894 3895| Name | Value | Description | 3896| ------------------- | ---- | ------- | 3897| CLOCKWISE | 0 | Adds a closed contour clockwise.| 3898| COUNTER_CLOCKWISE | 1 | Adds a closed contour counterclockwise.| 3899 3900## PathFillType<sup>12+</sup> 3901 3902Enumerates the fill types of a path. 3903 3904**System capability**: SystemCapability.Graphics.Drawing 3905 3906| Name | Value | Description | 3907| ------------------- | ---- | ------- | 3908| WINDING | 0 | Specifies that "inside" is computed by a non-zero sum of signed edge crossings. Specifically, draws a point and emits a ray in any direction. A count is used to record the number of intersection points of the ray and path, and the initial count is 0. When encountering a clockwise intersection point (the path passes from the left to the right of the ray), the count increases by 1. When encountering a counterclockwise intersection point (the path passes from the right to the left of the ray), the count decreases by 1. If the final count is not 0, the point is inside the path and needs to be colored. If the final count is 0, the point is not colored.| 3909| EVEN_ODD | 1 | Specifies that "inside" is computed by an odd number of edge crossings. Specifically, draws a point and emits a ray in any direction. If the number of intersection points of the ray and path is an odd number, the point is considered to be inside the path and needs to be colored. If the number is an even number, the point is not colored.| 3910| INVERSE_WINDING | 2 | Same as **WINDING**, but draws outside of the path, rather than inside.| 3911| INVERSE_EVEN_ODD | 3 | Same as **EVEN_ODD**, but draws outside of the path, rather than inside.| 3912 3913> **NOTE** 3914> 3915>  3916> As shown in the above figure, the path is a circle, the arrow indicates the path direction, **p** is any point "inside" the path, the blue line is the ray emitted from **p**, and the black arrow indicates the fill result using blue under the corresponding fill type. Under the **WINDING** fill rule, the number of intersection points of the ray and path is 2 (not 0), and therefore **p** is colored. Under the **EVEN_ODD** filling rule, the number of intersection points of the ray and path is 2 (an even number), and therefore **p** is not colored. 3917 3918## PointMode<sup>12+</sup> 3919 3920Enumerates the modes for drawing multiple points in an array. 3921 3922**System capability**: SystemCapability.Graphics.Drawing 3923 3924| Name | Value | Description | 3925| ------------------ | ---- | ------------- | 3926| POINTS | 0 | Draws each point separately. | 3927| LINES | 1 | Draws every two points as a line segment. | 3928| POLYGON | 2 | Draws an array of points as an open polygon.| 3929 3930## FontEdging<sup>12+</sup> 3931 3932Enumerates the font edging types. 3933 3934**System capability**: SystemCapability.Graphics.Drawing 3935 3936| Name | Value | Description | 3937| ------------------- | ---- | ------- | 3938| ALIAS | 0 | No anti-aliasing processing is used.| 3939| ANTI_ALIAS | 1 | Uses anti-aliasing to smooth the jagged edges.| 3940| SUBPIXEL_ANTI_ALIAS | 2 | Uses sub-pixel anti-aliasing to provide a smoother effect for jagged edges.| 3941 3942## FontHinting<sup>12+</sup> 3943 3944Enumerates the font hinting types. 3945 3946**System capability**: SystemCapability.Graphics.Drawing 3947 3948| Name | Value | Description | 3949| ------------------- | ---- | ------- | 3950| NONE | 0 | No font hinting is used.| 3951| SLIGHT | 1 | Slight font hinting is used to improve contrast.| 3952| NORMAL | 2 | Normal font hinting is used to improve contrast.| 3953| FULL | 3 | Full font hinting is used to improve contrast.| 3954 3955## TextBlob 3956 3957Defines a block consisting of one or more characters with the same font. 3958 3959### makeFromPosText<sup>12+</sup> 3960 3961static makeFromPosText(text: string, len: number, points: common2D.Point[], font: Font): TextBlob 3962 3963Creates a **TextBlob** object from the text. The coordinates of each font in the **TextBlob** object are determined by the coordinate information in the **points** array. 3964 3965**System capability**: SystemCapability.Graphics.Drawing 3966 3967**Parameters** 3968 3969| Name | Type | Mandatory| Description | 3970| -------- | ----------------------------- | ---- | -------------------------------------- | 3971| text | string | Yes | Content to be used for drawing the text blob. | 3972| len | number | Yes | Number of fonts. The value is an integer and is obtained from [countText](#counttext12).| 3973| points |[common2D.Point](js-apis-graphics-common2D.md#point)[] | Yes |Array of points, which are used to specify the coordinates of each font. The array length must be the same as the value of **len**.| 3974| font | [Font](#font) | Yes | **Font** object.| 3975 3976**Return value** 3977 3978| Type | Description | 3979| --------------------- | -------------- | 3980| [TextBlob](#textblob) | **TextBlob** object.| 3981 3982 3983**Error codes** 3984 3985For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3986 3987| ID| Error Message| 3988| ------- | --------------------------------------------| 3989| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types. | 3990 3991**Example** 3992 3993```ts 3994import { RenderNode } from '@kit.ArkUI'; 3995import { drawing,common2D} from '@kit.ArkGraphics2D'; 3996 3997class DrawingRenderNode extends RenderNode { 3998 draw(context : DrawContext) { 3999 const canvas = context.canvas; 4000 let text : string = 'makeFromPosText'; 4001 let font : drawing.Font = new drawing.Font(); 4002 font.setSize(100); 4003 let length = font.countText(text); 4004 let points : common2D.Point[] = []; 4005 for (let i = 0; i !== length; ++i) { 4006 points.push({ x: i * 35, y: i * 35 }); 4007 } 4008 let textblob : drawing.TextBlob =drawing.TextBlob.makeFromPosText(text, points.length, points, font); 4009 canvas.drawTextBlob(textblob, 100, 100); 4010 } 4011} 4012``` 4013 4014### uniqueID<sup>12+</sup> 4015 4016uniqueID(): number 4017 4018Obtains the unique identifier of a text blob. The identifier is a non-zero value. 4019 4020**System capability**: SystemCapability.Graphics.Drawing 4021 4022**Return value** 4023 4024| Type | Description | 4025| --------------------- | -------------- | 4026| number | Unique identifier of the text blob.| 4027 4028**Example** 4029 4030```ts 4031import {drawing} from "@kit.ArkGraphics2D" 4032let text : string = 'TextBlobUniqueId'; 4033let font : drawing.Font = new drawing.Font(); 4034font.setSize(100); 4035let textBlob = drawing.TextBlob.makeFromString(text, font, 0); 4036let id = textBlob.uniqueID(); 4037console.info("uniqueID---------------" +id); 4038``` 4039 4040### makeFromString 4041 4042static makeFromString(text: string, font: Font, encoding?: TextEncoding): TextBlob 4043 4044Converts a value of the string type into a **TextBlob** object. 4045 4046**System capability**: SystemCapability.Graphics.Drawing 4047 4048**Parameters** 4049 4050| Name | Type | Mandatory| Description | 4051| -------- | ----------------------------- | ---- | -------------------------------------- | 4052| text | string | Yes | Content to be used for drawing the text blob. | 4053| font | [Font](#font) | Yes | **Font** object. | 4054| encoding | [TextEncoding](#textencoding) | No | Encoding type. The default value is **TEXT_ENCODING_UTF8**. Currently, only **TEXT_ENCODING_UTF8** takes effect, and other encoding types are treated as **TEXT_ENCODING_UTF8**.| 4055 4056**Return value** 4057 4058| Type | Description | 4059| --------------------- | -------------- | 4060| [TextBlob](#textblob) | **TextBlob** object.| 4061 4062**Error codes** 4063 4064For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4065 4066| ID| Error Message| 4067| ------- | --------------------------------------------| 4068| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4069 4070**Example** 4071 4072```ts 4073import { RenderNode } from '@kit.ArkUI'; 4074import { drawing } from '@kit.ArkGraphics2D'; 4075class DrawingRenderNode extends RenderNode { 4076 draw(context : DrawContext) { 4077 const canvas = context.canvas; 4078 const brush = new drawing.Brush(); 4079 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 4080 const font = new drawing.Font(); 4081 font.setSize(20); 4082 const textBlob = drawing.TextBlob.makeFromString("drawing", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4083 canvas.attachBrush(brush); 4084 canvas.drawTextBlob(textBlob, 20, 20); 4085 canvas.detachBrush(); 4086 } 4087} 4088``` 4089 4090### makeFromRunBuffer 4091 4092static makeFromRunBuffer(pos: Array\<TextBlobRunBuffer>, font: Font, bounds?: common2D.Rect): TextBlob 4093 4094Creates a **Textblob** object based on the RunBuffer information. 4095 4096**System capability**: SystemCapability.Graphics.Drawing 4097 4098**Parameters** 4099 4100| Name| Type | Mandatory| Description | 4101| ------ | -------------------------------------------------- | ---- | ------------------------------ | 4102| pos | Array\<[TextBlobRunBuffer](#textblobrunbuffer)> | Yes | **TextBlobRunBuffer** array. | 4103| font | [Font](#font) | Yes | **Font** object. | 4104| bounds | [common2D.Rect](js-apis-graphics-common2D.md#rect) | No | Bounding box. If this parameter is not set, there is no bounding box.| 4105 4106**Return value** 4107 4108| Type | Description | 4109| --------------------- | -------------- | 4110| [TextBlob](#textblob) | **TextBlob** object.| 4111 4112**Error codes** 4113 4114For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4115 4116| ID| Error Message| 4117| ------- | --------------------------------------------| 4118| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4119 4120**Example** 4121 4122```ts 4123import { RenderNode } from '@kit.ArkUI'; 4124import { common2D, drawing } from '@kit.ArkGraphics2D'; 4125class DrawingRenderNode extends RenderNode { 4126 draw(context : DrawContext) { 4127 const canvas = context.canvas; 4128 const font = new drawing.Font(); 4129 font.setSize(20); 4130 let runBuffer : Array<drawing.TextBlobRunBuffer> = [ 4131 { glyph: 65, positionX: 0, positionY: 0 }, 4132 { glyph: 227, positionX: 14.9, positionY: 0 }, 4133 { glyph: 283, positionX: 25.84, positionY: 0 }, 4134 { glyph: 283, positionX: 30.62, positionY: 0 }, 4135 { glyph: 299, positionX: 35.4, positionY: 0} 4136 ]; 4137 const textBlob = drawing.TextBlob.makeFromRunBuffer(runBuffer, font, null); 4138 const brush = new drawing.Brush(); 4139 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 4140 canvas.attachBrush(brush); 4141 canvas.drawTextBlob(textBlob, 20, 20); 4142 canvas.detachBrush(); 4143 } 4144} 4145``` 4146 4147### bounds 4148 4149bounds(): common2D.Rect 4150 4151Obtains the rectangular bounding box of the text blob. 4152 4153**System capability**: SystemCapability.Graphics.Drawing 4154 4155**Return value** 4156 4157| Type | Description | 4158| -------------------------------------------------- | ---------------------- | 4159| [common2D.Rect](js-apis-graphics-common2D.md#rect) | Rectangular bounding box.| 4160 4161**Example** 4162 4163```ts 4164import { common2D, drawing } from '@kit.ArkGraphics2D'; 4165const font = new drawing.Font(); 4166font.setSize(20); 4167const textBlob = drawing.TextBlob.makeFromString("drawing", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4168let bounds = textBlob.bounds(); 4169``` 4170 4171## Typeface 4172 4173Describes the typeface such as SimSun and Kaiti. 4174 4175### getFamilyName 4176 4177getFamilyName(): string 4178 4179Obtains the name of the typeface, that is, the name of the font family. 4180 4181**System capability**: SystemCapability.Graphics.Drawing 4182 4183**Return value** 4184 4185| Type | Description | 4186| ------ | -------------------- | 4187| string | Typeface name.| 4188 4189**Example** 4190 4191```ts 4192import { drawing } from '@kit.ArkGraphics2D'; 4193const font = new drawing.Font(); 4194let typeface = font.getTypeface(); 4195let familyName = typeface.getFamilyName(); 4196``` 4197 4198### makeFromFile<sup>12+</sup> 4199 4200static makeFromFile(filePath: string): Typeface 4201 4202Constructs a typeface from a file. 4203 4204**System capability**: SystemCapability.Graphics.Drawing 4205 4206**Parameters** 4207 4208| Name | Type | Mandatory | Description | 4209| ----------- | ---------------------------------------- | ---- | ------------------- | 4210| filePath | string | Yes | Path of the file. For details, see [Mappings Between Application Sandbox Paths and Physical Paths](../../file-management/app-sandbox-directory.md#mappings-between-application-sandbox-paths-and-physical-paths).| 4211 4212**Return value** 4213 4214| Type | Description | 4215| ------ | -------------------- | 4216| [Typeface](#typeface) | **Typeface** object.| 4217 4218**Error codes** 4219 4220For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4221 4222| ID| Error Message| 4223| ------- | --------------------------------------------| 4224| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4225 4226**Example** 4227 4228```ts 4229import { RenderNode } from '@kit.ArkUI'; 4230import { drawing } from '@kit.ArkGraphics2D'; 4231class TextRenderNode extends RenderNode { 4232 async draw(context: DrawContext) { 4233 const canvas = context.canvas; 4234 let font = new drawing.Font(); 4235 let str = "/system/fonts/HarmonyOS_Sans_Italic.ttf"; 4236 const mytypeface = drawing.Typeface.makeFromFile(str); 4237 font.setTypeface(mytypeface); 4238 const textBlob = drawing.TextBlob.makeFromString("Hello World", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4239 canvas.drawTextBlob(textBlob, 60, 100); 4240 } 4241} 4242``` 4243 4244### makeFromRawFile<sup>18+</sup> 4245 4246static makeFromRawFile(rawfile: Resource): Typeface 4247 4248Constructs a typeface from a file, which must be stored in the **resources/rawfile** directory of the application project. 4249 4250**System capability**: SystemCapability.Graphics.Drawing 4251 4252**Parameters** 4253 4254| Name | Type | Mandatory | Description | 4255| ----------- | ---------------------------------------- | ---- | ------------------- | 4256| rawfile | [Resource](../apis-arkui/arkui-ts/ts-types.md#resource) | Yes | Resource object corresponding to the file. Currently, only resource objects referenced in **$rawfile** format are supported. The corresponding format is **$rawfile('filePath')**, where **filePath** is the relative path of the file to the **resources/rawfile** directory in the project. If the file is stored in **resources/rawfile**, the reference format is **$rawfile('HarmonyOS_Sans_Bold.ttf')**. If the file is stored in a subdirectory, for example, in **resources/rawfile/ttf**, the reference format is **$rawfile('ttf/HarmonyOS_Sans_Bold.ttf')**.| 4257 4258**Return value** 4259 4260| Type | Description | 4261| ------ | -------------------- | 4262| [Typeface](#typeface) | **Typeface** object. In abnormal cases, a null pointer is returned.| 4263 4264**Error codes** 4265 4266For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4267 4268| ID| Error Message| 4269| ------- | --------------------------------------------| 4270| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4271 4272**Example** 4273 4274```ts 4275import { RenderNode } from '@kit.ArkUI'; 4276import { drawing } from '@kit.ArkGraphics2D'; 4277class TextRenderNode extends RenderNode { 4278 async draw(context: DrawContext) { 4279 const canvas = context.canvas; 4280 let font = new drawing.Font(); 4281 const mytypeface = drawing.Typeface.makeFromRawFile($rawfile('HarmonyOS_Sans_Bold.ttf')); 4282 font.setTypeface(mytypeface); 4283 const textBlob = drawing.TextBlob.makeFromString("Hello World", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4284 canvas.drawTextBlob(textBlob, 60, 100); 4285 } 4286} 4287``` 4288 4289## Font 4290 4291Describes the attributes, such as the size, used for drawing text. 4292 4293### isSubpixel<sup>12+</sup> 4294 4295isSubpixel(): boolean 4296 4297Checks whether sub-pixel rendering is used for this font. 4298 4299**System capability**: SystemCapability.Graphics.Drawing 4300 4301**Return value** 4302 4303| Type | Description | 4304| ------ | -------------------- | 4305| boolean | Check result. The value **true** means that sub-pixel rendering is used, and **false** means the opposite.| 4306 4307**Example** 4308 4309```ts 4310import {drawing} from '@kit.ArkGraphics2D'; 4311let font: drawing.Font = new drawing.Font(); 4312font.enableSubpixel(true) 4313console.info("values=" + font.isSubpixel()); 4314``` 4315 4316### isLinearMetrics<sup>12+</sup> 4317 4318isLinearMetrics(): boolean 4319 4320Checks whether linear scaling is used for this font. 4321 4322**System capability**: SystemCapability.Graphics.Drawing 4323 4324**Return value** 4325 4326| Type | Description | 4327| ------ | -------------------- | 4328| boolean | Check result. The value **true** means that linear scaling is used, and **false** means the opposite.| 4329 4330**Example** 4331 4332```ts 4333import {drawing} from '@kit.ArkGraphics2D'; 4334let font: drawing.Font = new drawing.Font(); 4335font.enableLinearMetrics(true) 4336console.info("values=" + font.isLinearMetrics()); 4337``` 4338 4339### getSkewX<sup>12+</sup> 4340 4341getSkewX(): number 4342 4343Obtains the horizontal skew factor of this font. 4344 4345**System capability**: SystemCapability.Graphics.Drawing 4346 4347**Return value** 4348 4349| Type | Description | 4350| ------ | -------------------- | 4351| number | Horizontal skew factor.| 4352 4353**Example** 4354 4355```ts 4356import {drawing} from '@kit.ArkGraphics2D'; 4357let font: drawing.Font = new drawing.Font(); 4358font.setSkewX(-1) 4359console.info("values=" + font.getSkewX()); 4360``` 4361 4362### isEmbolden<sup>12+</sup> 4363 4364isEmbolden(): boolean 4365 4366Checks whether the bold effect is set for this font. 4367 4368**System capability**: SystemCapability.Graphics.Drawing 4369 4370**Return value** 4371 4372| Type | Description | 4373| ------ | -------------------- | 4374| boolean | Check result. The value **true** means that the bold effect is set, and **false** means the opposite.| 4375 4376**Example** 4377 4378```ts 4379import {drawing} from '@kit.ArkGraphics2D'; 4380let font: drawing.Font = new drawing.Font(); 4381font.enableEmbolden(true); 4382console.info("values=" + font.isEmbolden()); 4383``` 4384 4385### getScaleX<sup>12+</sup> 4386 4387getScaleX(): number 4388 4389Obtains the horizontal scale ratio of this font. 4390 4391**System capability**: SystemCapability.Graphics.Drawing 4392 4393**Return value** 4394 4395| Type | Description | 4396| ------ | -------------------- | 4397| number | Horizontal scale ratio.| 4398 4399**Example** 4400 4401```ts 4402import {drawing} from '@kit.ArkGraphics2D'; 4403let font: drawing.Font = new drawing.Font(); 4404font.setScaleX(2); 4405console.info("values=" + font.getScaleX()); 4406``` 4407 4408### getHinting<sup>12+</sup> 4409 4410getHinting(): FontHinting 4411 4412Obtains the font hinting effect. 4413 4414**System capability**: SystemCapability.Graphics.Drawing 4415 4416**Return value** 4417 4418| Type | Description | 4419| ------ | -------------------- | 4420| [FontHinting](#fonthinting12) | Font hinting effect.| 4421 4422**Example** 4423 4424```ts 4425import {drawing} from '@kit.ArkGraphics2D'; 4426let font: drawing.Font = new drawing.Font(); 4427console.info("values=" + font.getHinting()); 4428``` 4429 4430### getEdging<sup>12+</sup> 4431 4432getEdging(): FontEdging 4433 4434Obtains the font edging effect. 4435 4436**System capability**: SystemCapability.Graphics.Drawing 4437 4438**Return value** 4439 4440| Type | Description | 4441| ------ | -------------------- | 4442| [FontEdging](#fontedging12) | Font edging effect.| 4443 4444**Example** 4445 4446```ts 4447import {drawing} from '@kit.ArkGraphics2D'; 4448let font: drawing.Font = new drawing.Font(); 4449console.info("values=" + font.getEdging()); 4450``` 4451 4452### enableSubpixel 4453 4454enableSubpixel(isSubpixel: boolean): void 4455 4456Enables subpixel font rendering. 4457 4458**System capability**: SystemCapability.Graphics.Drawing 4459 4460**Parameters** 4461 4462| Name | Type | Mandatory| Description | 4463| ---------- | ------- | ---- | ------------------------------------------------------------ | 4464| isSubpixel | boolean | Yes | Whether to enable subpixel font rendering. The value **true** means to enable subpixel font rendering, and **false** means the opposite.| 4465 4466**Error codes** 4467 4468For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4469 4470| ID| Error Message| 4471| ------- | --------------------------------------------| 4472| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4473 4474**Example** 4475 4476```ts 4477import { drawing } from '@kit.ArkGraphics2D'; 4478let font = new drawing.Font(); 4479font.enableSubpixel(true); 4480``` 4481 4482### enableEmbolden 4483 4484enableEmbolden(isEmbolden: boolean): void 4485 4486Enables emboldened fonts. 4487 4488**System capability**: SystemCapability.Graphics.Drawing 4489 4490**Parameters** 4491 4492| Name | Type | Mandatory| Description | 4493| ---------- | ------- | ---- | ----------------------------------------------------- | 4494| isEmbolden | boolean | Yes | Whether to enable emboldened fonts. The value **true** means to enable emboldened fonts, and **false** means the opposite.| 4495 4496**Error codes** 4497 4498For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4499 4500| ID| Error Message| 4501| ------- | --------------------------------------------| 4502| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4503 4504**Example** 4505 4506```ts 4507import { drawing } from '@kit.ArkGraphics2D'; 4508let font = new drawing.Font(); 4509font.enableEmbolden(true); 4510``` 4511 4512### enableLinearMetrics 4513 4514enableLinearMetrics(isLinearMetrics: boolean): void 4515 4516Enables linear font scaling. 4517 4518**System capability**: SystemCapability.Graphics.Drawing 4519 4520**Parameters** 4521 4522| Name | Type | Mandatory| Description | 4523| --------------- | ------- | ---- | ----------------------------------------------------------- | 4524| isLinearMetrics | boolean | Yes | Whether to enable linear font scaling. The value **true** means to enable linear font scaling, and **false** means the opposite.| 4525 4526**Error codes** 4527 4528For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4529 4530| ID| Error Message| 4531| ------- | --------------------------------------------| 4532| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4533 4534**Example** 4535 4536```ts 4537import { drawing } from '@kit.ArkGraphics2D'; 4538let font = new drawing.Font(); 4539font.enableLinearMetrics(true); 4540``` 4541 4542### setSize 4543 4544setSize(textSize: number): void 4545 4546Sets the text size. 4547 4548**System capability**: SystemCapability.Graphics.Drawing 4549 4550**Parameters** 4551 4552| Name | Type | Mandatory| Description | 4553| -------- | ------ | ---- | ---------------- | 4554| textSize | number | Yes | Text size. The value is a floating point number. If a negative number is passed in, the size is set to 0. If the size is 0, the text drawn will not be displayed.| 4555 4556**Error codes** 4557 4558For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4559 4560| ID| Error Message| 4561| ------- | --------------------------------------------| 4562| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 4563 4564**Example** 4565 4566```ts 4567import { drawing } from '@kit.ArkGraphics2D'; 4568let font = new drawing.Font(); 4569font.setSize(5); 4570``` 4571 4572### getSize 4573 4574getSize(): number 4575 4576Obtains the text size. 4577 4578**System capability**: SystemCapability.Graphics.Drawing 4579 4580**Return value** 4581 4582| Type | Description | 4583| ------ | ---------------- | 4584| number | Text size. The value is a floating point number.| 4585 4586**Example** 4587 4588```ts 4589import { drawing } from '@kit.ArkGraphics2D'; 4590let font = new drawing.Font(); 4591font.setSize(5); 4592let fontSize = font.getSize(); 4593``` 4594 4595### setTypeface 4596 4597setTypeface(typeface: Typeface): void 4598 4599Sets the typeface. 4600 4601**System capability**: SystemCapability.Graphics.Drawing 4602 4603**Parameters** 4604 4605| Name | Type | Mandatory| Description | 4606| -------- | --------------------- | ---- | ------ | 4607| typeface | [Typeface](#typeface) | Yes | **Typeface** object.| 4608 4609**Error codes** 4610 4611For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4612 4613| ID| Error Message| 4614| ------- | --------------------------------------------| 4615| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4616 4617**Example** 4618 4619```ts 4620import { drawing } from '@kit.ArkGraphics2D'; 4621let font = new drawing.Font(); 4622font.setTypeface(new drawing.Typeface()); 4623``` 4624 4625### getTypeface 4626 4627getTypeface(): Typeface 4628 4629Obtains the typeface. 4630 4631**System capability**: SystemCapability.Graphics.Drawing 4632 4633**Return value** 4634 4635| Type | Description | 4636| --------------------- | ------ | 4637| [Typeface](#typeface) | **Typeface** object.| 4638 4639**Example** 4640 4641```ts 4642import { drawing } from '@kit.ArkGraphics2D'; 4643let font = new drawing.Font(); 4644let typeface = font.getTypeface(); 4645``` 4646 4647### getMetrics 4648 4649getMetrics(): FontMetrics 4650 4651Obtains the font metrics of the typeface. 4652 4653**System capability**: SystemCapability.Graphics.Drawing 4654 4655**Return value** 4656 4657| Type | Description | 4658| --------------------------- | ----------------- | 4659| [FontMetrics](#fontmetrics) | Font metrics.| 4660 4661**Example** 4662 4663```ts 4664import { drawing } from '@kit.ArkGraphics2D'; 4665let font = new drawing.Font(); 4666let metrics = font.getMetrics(); 4667``` 4668 4669### measureText 4670 4671measureText(text: string, encoding: TextEncoding): number 4672 4673Measures the text width. 4674 4675> **NOTE** 4676> 4677> This API is used to measure the text width of the original string. To measure the text width after typesetting, call [measure.measureText](../apis-arkui/js-apis-measure.md#measuretextmeasuretext). 4678 4679**System capability**: SystemCapability.Graphics.Drawing 4680 4681**Parameters** 4682 4683| Name | Type | Mandatory| Description | 4684| -------- | ----------------------------- | ---- | ---------- | 4685| text | string | Yes | Text content.| 4686| encoding | [TextEncoding](#textencoding) | Yes | Encoding format.| 4687 4688**Return value** 4689 4690| Type | Description | 4691| ------ | ---------------- | 4692| number | Width of the text. The value is a floating point number.| 4693 4694**Error codes** 4695 4696For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4697 4698| ID| Error Message| 4699| ------- | --------------------------------------------| 4700| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4701 4702**Example** 4703 4704```ts 4705import { drawing } from '@kit.ArkGraphics2D'; 4706let font = new drawing.Font(); 4707font.measureText("drawing", drawing.TextEncoding.TEXT_ENCODING_UTF8); 4708``` 4709 4710### measureSingleCharacter<sup>12+</sup> 4711 4712measureSingleCharacter(text: string): number 4713 4714Measures the width of a single character. If the typeface of the current font does not support the character to measure, the system typeface is used to measure the character width. 4715 4716**System capability**: SystemCapability.Graphics.Drawing 4717 4718**Parameters** 4719 4720| Name| Type | Mandatory| Description | 4721| ------ | ------------------- | ---- | ----------- | 4722| text | string | Yes | Single character to measure. The length of the string must be 1. | 4723 4724**Return value** 4725 4726| Type | Description | 4727| ------ | ---------------- | 4728| number | Width of the character. The value is a floating point number.| 4729 4730**Error codes** 4731 4732For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4733 4734| ID| Error Message| 4735| ------- | --------------------------------------------| 4736| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 4737 4738**Example** 4739 4740```ts 4741import { RenderNode } from '@kit.ArkUI'; 4742import { drawing } from '@kit.ArkGraphics2D'; 4743 4744class DrawingRenderNode extends RenderNode { 4745 draw(context : DrawContext) { 4746 const canvas = context.canvas; 4747 const font = new drawing.Font(); 4748 font.setSize(20); 4749 let width = font.measureSingleCharacter ("Hello"); 4750 } 4751} 4752``` 4753 4754### setScaleX<sup>12+</sup> 4755 4756setScaleX(scaleX: number): void 4757 4758Sets a horizontal scale factor for this font. 4759 4760**System capability**: SystemCapability.Graphics.Drawing 4761 4762**Parameters** 4763 4764| Name | Type | Mandatory| Description | 4765| -------- | ----------------------------- | ---- | ---------- | 4766| scaleX | number | Yes | Horizontal scale factor. The value is a floating point number.| 4767 4768**Error codes** 4769 4770For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4771 4772| ID| Error Message| 4773| ------- | --------------------------------------------| 4774| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4775 4776**Example** 4777 4778```ts 4779import { RenderNode } from '@kit.ArkUI'; 4780import { common2D, drawing } from '@kit.ArkGraphics2D'; 4781class DrawingRenderNode extends RenderNode { 4782 draw(context : DrawContext) { 4783 const canvas = context.canvas; 4784 const pen = new drawing.Pen(); 4785 pen.setStrokeWidth(5); 4786 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 4787 canvas.attachPen(pen); 4788 let font = new drawing.Font(); 4789 font.setSize(100); 4790 font.setScaleX(2); 4791 const textBlob = drawing.TextBlob.makeFromString("hello", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4792 canvas.drawTextBlob(textBlob, 200, 200); 4793 } 4794} 4795``` 4796 4797### setSkewX<sup>12+</sup> 4798 4799setSkewX(skewX: number): void 4800 4801Sets a horizontal skew factor for this font. 4802 4803**System capability**: SystemCapability.Graphics.Drawing 4804 4805**Parameters** 4806 4807| Name | Type | Mandatory| Description | 4808| -------- | ----------------------------- | ---- | ---------- | 4809| skewX | number | Yes | Horizontal skew factor. A positive number means a skew to the left, and a negative number means a skew to the right. The value is a floating point number.| 4810 4811**Error codes** 4812 4813For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4814 4815| ID| Error Message| 4816| ------- | --------------------------------------------| 4817| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4818 4819**Example** 4820 4821```ts 4822import { RenderNode } from '@kit.ArkUI'; 4823import { common2D, drawing } from '@kit.ArkGraphics2D'; 4824class DrawingRenderNode extends RenderNode { 4825 draw(context : DrawContext) { 4826 const canvas = context.canvas; 4827 const pen = new drawing.Pen(); 4828 pen.setStrokeWidth(5); 4829 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 4830 canvas.attachPen(pen); 4831 let font = new drawing.Font(); 4832 font.setSize(100); 4833 font.setSkewX(1); 4834 const textBlob = drawing.TextBlob.makeFromString("hello", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4835 canvas.drawTextBlob(textBlob, 200, 200); 4836 } 4837} 4838``` 4839 4840### setEdging<sup>12+</sup> 4841 4842setEdging(edging: FontEdging): void 4843 4844Sets a font edging effect. 4845 4846**System capability**: SystemCapability.Graphics.Drawing 4847 4848**Parameters** 4849 4850| Name | Type | Mandatory| Description | 4851| -------- | ----------------------------- | ---- | ---------- | 4852| edging | [FontEdging](#fontedging12) | Yes | Font edging effect.| 4853 4854**Error codes** 4855 4856For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4857 4858| ID| Error Message| 4859| ------- | --------------------------------------------| 4860| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed. | 4861 4862**Example** 4863 4864```ts 4865import { drawing } from '@kit.ArkGraphics2D'; 4866 4867let font = new drawing.Font(); 4868font.setEdging(drawing.FontEdging.SUBPIXEL_ANTI_ALIAS); 4869``` 4870 4871### setHinting<sup>12+</sup> 4872 4873setHinting(hinting: FontHinting): void 4874 4875Sets a font hinting effect. 4876 4877**System capability**: SystemCapability.Graphics.Drawing 4878 4879**Parameters** 4880 4881| Name | Type | Mandatory| Description | 4882| -------- | ----------------------------- | ---- | ---------- | 4883| hinting | [FontHinting](#fonthinting12) | Yes | Font hinting effect.| 4884 4885**Error codes** 4886 4887For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4888 4889| ID| Error Message| 4890| ------- | --------------------------------------------| 4891| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed. | 4892 4893**Example** 4894 4895```ts 4896import { drawing } from '@kit.ArkGraphics2D'; 4897 4898let font = new drawing.Font(); 4899font.setHinting(drawing.FontHinting.FULL); 4900``` 4901 4902### countText<sup>12+</sup> 4903 4904countText(text: string): number 4905 4906Obtains the number of glyphs represented by text. 4907 4908**System capability**: SystemCapability.Graphics.Drawing 4909 4910**Parameters** 4911 4912| Name | Type | Mandatory| Description | 4913| -------- | ----------------------------- | ---- | ---------- | 4914| text | string | Yes | Text content.| 4915 4916**Return value** 4917 4918| Type | Description | 4919| ------ | ---------------- | 4920| number | Number of glyphs represented by the text. The value is an integer.| 4921 4922**Error codes** 4923 4924For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4925 4926| ID| Error Message| 4927| ------- | --------------------------------------------| 4928| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4929 4930**Example** 4931 4932```ts 4933import { drawing } from '@kit.ArkGraphics2D'; 4934 4935let font = new drawing.Font(); 4936let resultNumber: number = font.countText('ABCDE'); 4937console.info("count text number: " + resultNumber); 4938``` 4939 4940### setBaselineSnap<sup>12+</sup> 4941 4942setBaselineSnap(isBaselineSnap: boolean): void 4943 4944Sets whether to request that baselines be snapped to pixels when the current canvas matrix is axis aligned. 4945 4946**System capability**: SystemCapability.Graphics.Drawing 4947 4948**Parameters** 4949 4950| Name | Type | Mandatory| Description | 4951| --------------- | ------- | ---- | ---------------------------------------- | 4952| isBaselineSnap | boolean | Yes | Whether to request that baselines be snapped to pixels. The value **true** means to request that baselines be snapped to pixels, and **false** means the opposite.| 4953 4954**Error codes** 4955 4956For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4957 4958| ID| Error Message| 4959| ------- | --------------------------------------------| 4960| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4961 4962**Example** 4963 4964```ts 4965import { drawing } from '@kit.ArkGraphics2D'; 4966 4967let font : drawing.Font = new drawing.Font(); 4968font.setBaselineSnap(true); 4969console.info("drawing font isBaselineSnap: " + font.isBaselineSnap()); 4970``` 4971 4972### isBaselineSnap()<sup>12+</sup> 4973 4974isBaselineSnap(): boolean 4975 4976Checks whether baselines are requested to be snapped to pixels when the current canvas matrix is axis aligned. 4977 4978**System capability**: SystemCapability.Graphics.Drawing 4979 4980**Return value** 4981 4982| Type | Description | 4983| ------ | ---------------- | 4984| boolean | Check result. The value **true** means that the baselines are requested to be snapped to pixels, and **false** means the opposite.| 4985 4986**Example** 4987 4988```ts 4989import { drawing } from '@kit.ArkGraphics2D'; 4990 4991let font : drawing.Font = new drawing.Font(); 4992font.setTypeface(new drawing.Typeface()); 4993font.setBaselineSnap(true); 4994console.info("drawing font isBaselineSnap: " + font.isBaselineSnap()); 4995``` 4996 4997### setEmbeddedBitmaps<sup>12+</sup> 4998 4999setEmbeddedBitmaps(isEmbeddedBitmaps: boolean): void 5000 5001Sets whether to use bitmaps in this font. 5002 5003**System capability**: SystemCapability.Graphics.Drawing 5004 5005**Parameters** 5006 5007| Name | Type | Mandatory| Description | 5008| -------- | ------ | ---- | ---------------- | 5009| isEmbeddedBitmaps | boolean | Yes | Whether to use bitmaps in the font. The value **true** means to use bitmaps in the font, and **false** means the opposite.| 5010 5011**Error codes** 5012 5013For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5014 5015| ID| Error Message| 5016| ------- | --------------------------------------------| 5017| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5018 5019**Example** 5020 5021```ts 5022import { drawing } from '@kit.ArkGraphics2D'; 5023 5024let font : drawing.Font = new drawing.Font(); 5025font.setTypeface(new drawing.Typeface()); 5026font.setEmbeddedBitmaps(false); 5027console.info("draw isEmbeddedBitmaps: " + font.isEmbeddedBitmaps()); 5028``` 5029 5030### isEmbeddedBitmaps()<sup>12+</sup> 5031 5032isEmbeddedBitmaps(): boolean 5033 5034Checks whether bitmaps are used in this font. 5035 5036**System capability**: SystemCapability.Graphics.Drawing 5037 5038**Return value** 5039 5040| Type | Description | 5041| ------ | ---------------- | 5042| boolean | Check result. The value **true** means that the bitmaps are used, and **false** means the opposite.| 5043 5044**Example** 5045 5046```ts 5047import { drawing } from '@kit.ArkGraphics2D'; 5048 5049let font : drawing.Font = new drawing.Font(); 5050font.setTypeface(new drawing.Typeface()); 5051font.setEmbeddedBitmaps(true); 5052console.info("draw isEmbeddedBitmaps: " + font.isEmbeddedBitmaps()); 5053``` 5054 5055### setForceAutoHinting<sup>12+</sup> 5056 5057setForceAutoHinting(isForceAutoHinting: boolean): void 5058 5059Sets whether to forcibly use auto hinting, that is, whether to always hint glyphs. 5060 5061**System capability**: SystemCapability.Graphics.Drawing 5062 5063**Parameters** 5064 5065| Name | Type | Mandatory| Description | 5066| -------- | ------ | ---- | ---------------- | 5067| isForceAutoHinting | boolean | Yes | Whether to forcibly use auto hinting. The value **true** means to forcibly use auto hinting, and **false** means the opposite.| 5068 5069**Error codes** 5070 5071For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5072 5073| ID| Error Message| 5074| ------- | --------------------------------------------| 5075| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5076 5077**Example** 5078 5079```ts 5080import { drawing } from '@kit.ArkGraphics2D'; 5081 5082let font : drawing.Font = new drawing.Font(); 5083font.setTypeface(new drawing.Typeface()); 5084font.setForceAutoHinting(false); 5085console.info("drawing isForceAutoHinting: " + font.isForceAutoHinting()); 5086``` 5087 5088### isForceAutoHinting<sup>12+</sup> 5089 5090isForceAutoHinting(): boolean 5091 5092Checks whether auto hinting is forcibly used. 5093 5094**System capability**: SystemCapability.Graphics.Drawing 5095 5096**Return value** 5097 5098| Type | Description | 5099| ------ | ---------------- | 5100| boolean | Check result. The value **true** means that auto hinting is forcibly used, and **false** means the opposite.| 5101 5102**Example** 5103 5104```ts 5105import { drawing } from '@kit.ArkGraphics2D'; 5106 5107let font : drawing.Font = new drawing.Font(); 5108font.setTypeface(new drawing.Typeface()); 5109font.setForceAutoHinting(false); 5110console.info("drawing isForceAutoHinting: " + font.isForceAutoHinting()); 5111``` 5112 5113### getWidths<sup>12+</sup> 5114 5115getWidths(glyphs: Array\<number>): Array\<number> 5116 5117Obtains the width of each glyph in an array. 5118 5119**System capability**: SystemCapability.Graphics.Drawing 5120 5121**Parameters** 5122 5123| Name | Type | Mandatory| Description | 5124| -------- | --------------------- | ---- | ------ | 5125| glyphs | Array\<number> | Yes | Glyph array, which can be generated by [textToGlyphs](#texttoglyphs12).| 5126 5127**Return value** 5128 5129| Type | Description | 5130| ------ | ---------------- | 5131| Array\<number> | Array that holds the obtained glyph widths.| 5132 5133**Error codes** 5134 5135For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5136 5137| ID| Error Message| 5138| ------- | --------------------------------------------| 5139| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5140 5141**Example** 5142 5143```ts 5144import { drawing } from '@kit.ArkGraphics2D'; 5145 5146let font: drawing.Font = new drawing.Font(); 5147let text: string = 'hello world'; 5148let glyphs: number[] = font.textToGlyphs(text); 5149let fontWidths: Array<number> = font.getWidths(glyphs); 5150for (let index = 0; index < fontWidths.length; index++) { 5151 console.info("get fontWidths[", index, "]:", fontWidths[index]); 5152} 5153``` 5154 5155### textToGlyphs<sup>12+</sup> 5156 5157textToGlyphs(text: string, glyphCount?: number): Array\<number> 5158 5159Converts text into glyph indexes. 5160 5161**System capability**: SystemCapability.Graphics.Drawing 5162 5163**Parameters** 5164 5165| Name | Type | Mandatory| Description | 5166| -------- | ----------------------------- | ---- | ---------- | 5167| text | string | Yes | Text string.| 5168| glyphCount | number | No | Number of glyphs represented by the text. The value must be the same as the value obtained from [countText](#counttext12). The default value is the number of characters in the text string. The value is an integer.| 5169 5170**Return value** 5171 5172| Type | Description | 5173| ------ | ---------------- | 5174| Array\<number> | Array that holds the glyph indexes.| 5175 5176**Error codes** 5177 5178For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5179 5180| ID| Error Message| 5181| ------- | --------------------------------------------| 5182| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5183 5184**Example** 5185 5186```ts 5187import { drawing } from '@kit.ArkGraphics2D'; 5188 5189let font : drawing.Font = new drawing.Font(); 5190let text : string = 'hello world'; 5191let glyphs : number[] = font.textToGlyphs(text); 5192console.info("drawing text toglyphs OnTestFunction num = " + glyphs.length ); 5193``` 5194 5195### getBounds<sup>18+</sup> 5196 5197getBounds(glyphs: Array\<number>): Array\<common2D.Rect> 5198 5199Obtains the rectangular bounding box of each glyph in an array. 5200 5201**System capability**: SystemCapability.Graphics.Drawing 5202 5203**Parameters** 5204 5205| Name | Type | Mandatory| Description | 5206| -------- | --------------------- | ---- | ------ | 5207| glyphs | Array\<number> | Yes | Glyph array, which can be generated by [textToGlyphs](#texttoglyphs12).| 5208 5209**Return value** 5210 5211| Type | Description | 5212| ------ | ---------------- | 5213| Array\<[common2D.Rect](js-apis-graphics-common2D.md#rect)> | Array that holds the rectangular bounding boxes.| 5214 5215**Error codes** 5216 5217For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5218 5219| ID| Error Message| 5220| ------- | --------------------------------------------| 5221| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5222 5223**Example** 5224 5225```ts 5226import { common2D, drawing } from '@kit.ArkGraphics2D'; 5227 5228let font: drawing.Font = new drawing.Font(); 5229let text: string = 'hello world'; 5230let glyphs: number[] = font.textToGlyphs(text); 5231let fontBounds: Array<common2D.Rect> = font.getBounds(glyphs); 5232for (let index = 0; index < fontBounds.length; index++) { 5233 console.info("get fontWidths[", index, "] left:", fontBounds[index].left, " top:", fontBounds[index].top, 5234 " right:", fontBounds[index].right, " bottom:", fontBounds[index].bottom); 5235} 5236``` 5237 5238### getTextPath<sup>18+</sup> 5239 5240getTextPath(text: string, byteLength: number, x: number, y: number): Path; 5241 5242Obtains the outline path of a text. 5243 5244**System capability**: SystemCapability.Graphics.Drawing 5245 5246**Parameters** 5247 5248| Name | Type | Mandatory| Description | 5249| ------ | ------------------------------------------------ | ---- | ---------------------- | 5250| text | string | Yes | UTF-8 text-encoded characters.| 5251|byteLength| number | Yes | Length of the outline path, which is obtained based on the minimum value between the passed value of **byteLength** and the actual text byte size.| 5252| x | number | Yes | X coordinate of the text in the drawing area, with the origin as the start point.| 5253| y | number | Yes | Y coordinate of the text in the drawing area, with the origin as the start point.| 5254 5255**Return value** 5256 5257| Type | Description | 5258| ------ | ---------------- | 5259| [Path](#path) | Outline path of the text.| 5260 5261**Error codes** 5262 5263For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5264 5265| ID| Error Message| 5266| ------- | --------------------------------------------| 5267| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5268 5269**Example** 5270 5271```ts 5272import { drawing } from '@kit.ArkGraphics2D'; 5273import { buffer } from '@kit.ArkTS'; 5274import { RenderNode } from '@kit.ArkUI'; 5275 5276class DrawingRenderNode extends RenderNode { 5277 draw(context : DrawContext) { 5278 const canvas = context.canvas; 5279 let font = new drawing.Font(); 5280 font.setSize(50) 5281 let myString: string = "Hello, HarmonyOS"; 5282 let length = buffer.from(myString).length; 5283 let path = font.getTextPath(myString, length, 0, 100) 5284 canvas.drawPath(path) 5285 } 5286} 5287``` 5288 5289### createPathForGlyph<sup>18+</sup> 5290 5291createPathForGlyph(index: number): Path 5292 5293Obtains the outline path of a glyph. 5294 5295**System capability**: SystemCapability.Graphics.Drawing 5296 5297**Parameters** 5298 5299| Name | Type | Mandatory| Description | 5300| -------- | --------------------- | ---- | ------ | 5301| index | number | Yes | Index of the glyph.| 5302 5303**Return value** 5304 5305| Type | Description | 5306| ------ | ---------------- | 5307| [Path](#path) | Outline path of the glyph.| 5308 5309**Error codes** 5310 5311For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5312 5313| ID| Error Message| 5314| ------- | --------------------------------------------| 5315| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5316 5317**Example** 5318 5319```ts 5320import { FrameNode, NodeController, RenderNode } from '@kit.ArkUI'; 5321import { drawing } from '@kit.ArkGraphics2D'; 5322 5323class DrawingRenderNode extends RenderNode { 5324 draw(context : DrawContext) { 5325 const canvas = context.canvas; 5326 let font = new drawing.Font(); 5327 font.setSize(50) 5328 let text: string = 'Hello' 5329 let glyphs: number[] = font.textToGlyphs(text); 5330 for (let index = 0; index < glyphs.length; index++) { 5331 let path: drawing.Path = font.createPathForGlyph(glyphs[index]) 5332 canvas.drawPath(path) 5333 } 5334 } 5335} 5336``` 5337 5338### setThemeFontFollowed<sup>15+</sup> 5339 5340setThemeFontFollowed(followed: boolean): void 5341 5342Sets whether to follow the theme font. When **followed** is set to **true**, the theme font is used if it is enabled by the system and no typeface is set. 5343 5344**System capability**: SystemCapability.Graphics.Drawing 5345 5346**Parameters** 5347 5348| Name | Type | Mandatory| Description | 5349| -------- | ------ | ---- | ---------------- | 5350| followed | boolean | Yes | Whether to follow the theme font. The value **true** means to follow the theme font, and **false** means the opposite.| 5351 5352**Error codes** 5353 5354For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5355 5356| ID| Error Message| 5357| ------- | --------------------------------------------| 5358| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5359 5360**Example** 5361 5362```ts 5363import { drawing } from '@kit.ArkGraphics2D'; 5364 5365let font : drawing.Font = new drawing.Font(); 5366font.setThemeFontFollowed(true); 5367console.info("font is theme font followed: " + font.isThemeFontFollowed()); 5368``` 5369 5370### isThemeFontFollowed()<sup>15+</sup> 5371 5372isThemeFontFollowed(): boolean 5373 5374Checks whether the font follows the theme font. By default, the theme font is not followed. 5375 5376**System capability**: SystemCapability.Graphics.Drawing 5377 5378**Return value** 5379 5380| Type | Description | 5381| ------ | ---------------- | 5382| boolean | Check result. The value **true** means that the theme font is followed, and **false** means the opposite.| 5383 5384**Example** 5385 5386```ts 5387import { drawing } from '@kit.ArkGraphics2D'; 5388 5389let font : drawing.Font = new drawing.Font(); 5390font.setThemeFontFollowed(true); 5391console.info("font is theme font followed: " + font.isThemeFontFollowed()); 5392``` 5393 5394## FontMetricsFlags<sup>12+</sup> 5395 5396Enumerates the font measurement flags, which is used to specify whether a field in the font measurement information is valid. 5397 5398**System capability**: SystemCapability.Graphics.Drawing 5399 5400| Name | Value | Description | 5401| ----------------------------- | --------- | ------------------------------ | 5402| UNDERLINE_THICKNESS_VALID | 1 << 0 | The **underlineThickness** field in the [FontMetrics](#fontmetrics) struct is valid. | 5403| UNDERLINE_POSITION_VALID | 1 << 1 | The **underlinePosition** field in the [FontMetrics](#fontmetrics) struct is valid. | 5404| STRIKETHROUGH_THICKNESS_VALID | 1 << 2 | The **strikethroughThickness** field in the [FontMetrics](#fontmetrics) struct is valid.| 5405| STRIKETHROUGH_POSITION_VALID | 1 << 3 | The **strikethroughPosition** field in the [FontMetrics](#fontmetrics) struct is valid. | 5406| BOUNDS_INVALID | 1 << 4 | The boundary metrics (such as **top**, **bottom**, **xMin**, and **xMax**) in the [FontMetrics](#fontmetrics) struct are invalid. | 5407 5408## FontMetrics 5409 5410Describes the attributes that describe the font size and layout. A typeface has similar font metrics. 5411 5412**System capability**: SystemCapability.Graphics.Drawing 5413 5414| Name | Type | Read Only| Optional| Description | 5415| ------- | ------ | ---- | ---- | ------------------------------------------------------------ | 5416| flags<sup>12+</sup> | [FontMetricsFlags](#fontmetricsflags12) | Yes | Yes | Font measurement flags that are valid. | 5417| top | number | Yes | No | Maximum distance from the baseline to the highest coordinate of the text. The value is a floating point number. | 5418| ascent | number | Yes | No | Distance from the baseline to the highest coordinate of the text. The value is a floating point number. | 5419| descent | number | Yes | No | Distance from the baseline to the lowest coordinate of the text. The value is a floating point number. | 5420| bottom | number | Yes | No | Maximum distance from the baseline to the lowest coordinate of the text. The value is a floating point number. | 5421| leading | number | Yes | No | Interline spacing, that is, the distance from the descent of one line of text to the ascent of the next line. The value is a floating point number.| 5422| avgCharWidth<sup>12+</sup> | number | Yes | Yes | Average character width. | 5423| maxCharWidth<sup>12+</sup> | number | Yes | Yes | Maximum character width. | 5424| xMin<sup>12+</sup> | number | Yes | Yes | Horizontal distance from the leftmost edge of any glyph bounding box to the origin. This value is usually less than 0, indicating the minimum horizontal coordinate across all glyph bounding boxes. | 5425| xMax<sup>12+</sup> | number | Yes | Yes | Horizontal distance from the rightmost edge of any glyph bounding box to the origin. The value is a positive number, indicating the maximum horizontal coordinate across all glyph bounding boxes. | 5426| xHeight<sup>12+</sup> | number | Yes | Yes | Height of the lowercase letter x. The value is usually a negative value. | 5427| capHeight<sup>12+</sup> | number | Yes | Yes | Height of a capital letter. The value is usually a negative value. | 5428| underlineThickness<sup>12+</sup> | number | Yes | Yes | Thickness of the underline. | 5429| underlinePosition<sup>12+</sup> | number | Yes | Yes | Vertical distance from the baseline to the top of the underline. The value is usually a positive number. | 5430| strikethroughThickness<sup>12+</sup> | number | Yes | Yes | Thickness of the strikethrough. | 5431| strikethroughPosition<sup>12+</sup> | number | Yes | Yes | Vertical distance from the baseline to the bottom of the strikethrough. The value is usually a negative value. | 5432 5433## ColorFilter 5434 5435Defines a color filter. 5436 5437### createBlendModeColorFilter 5438 5439createBlendModeColorFilter(color: common2D.Color, mode: BlendMode) : ColorFilter 5440 5441Creates a **ColorFilter** object with a given color and blend mode. 5442 5443**System capability**: SystemCapability.Graphics.Drawing 5444 5445**Parameters** 5446 5447| Name| Type | Mandatory| Description | 5448| ------ | ---------------------------------------------------- | ---- | ---------------- | 5449| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. Each color channel is an integer ranging from 0 to 255.| 5450| mode | [BlendMode](#blendmode) | Yes | Blend mode.| 5451 5452**Return value** 5453 5454| Type | Description | 5455| --------------------------- | ------------------ | 5456| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 5457 5458**Error codes** 5459 5460For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5461 5462| ID| Error Message| 5463| ------- | --------------------------------------------| 5464| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5465 5466**Example** 5467 5468```ts 5469import { common2D, drawing } from '@kit.ArkGraphics2D'; 5470const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 5471let colorFilter = drawing.ColorFilter.createBlendModeColorFilter(color, drawing.BlendMode.SRC); 5472``` 5473 5474### createBlendModeColorFilter<sup>18+</sup> 5475 5476static createBlendModeColorFilter(color: common2D.Color | number, mode: BlendMode) : ColorFilter 5477 5478Creates a **ColorFilter** object with a given color and blend mode. 5479 5480**System capability**: SystemCapability.Graphics.Drawing 5481 5482**Parameters** 5483 5484| Name| Type | Mandatory| Description | 5485| ------ | ---------------------------------------------------- | ---- | ---------------- | 5486| color | [common2D.Color](js-apis-graphics-common2D.md#color) \| number | Yes | Color, represented by a 32-bit unsigned integer in hexadecimal ARGB format.| 5487| mode | [BlendMode](#blendmode) | Yes | Blend mode.| 5488 5489**Return value** 5490 5491| Type | Description | 5492| --------------------------- | ------------------ | 5493| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 5494 5495**Error codes** 5496 5497For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5498 5499| ID| Error Message| 5500| ------- | --------------------------------------------| 5501| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5502 5503**Example** 5504 5505```ts 5506import { drawing } from '@kit.ArkGraphics2D'; 5507let colorFilter = drawing.ColorFilter.createBlendModeColorFilter(0xffff0000, drawing.BlendMode.SRC); 5508``` 5509 5510### createComposeColorFilter 5511 5512createComposeColorFilter(outer: ColorFilter, inner: ColorFilter) : ColorFilter 5513 5514Creates a **ColorFilter** object by combining another two color filters. 5515 5516**System capability**: SystemCapability.Graphics.Drawing 5517 5518**Parameters** 5519 5520| Name| Type | Mandatory| Description | 5521| ------ | --------------------------- | ---- | -------------------------------- | 5522| outer | [ColorFilter](#colorfilter) | Yes | Color filter that takes effect later in the new filter.| 5523| inner | [ColorFilter](#colorfilter) | Yes | Color filter that takes effect first in the new filter.| 5524 5525**Return value** 5526 5527| Type | Description | 5528| --------------------------- | ------------------ | 5529| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 5530 5531**Error codes** 5532 5533For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5534 5535| ID| Error Message| 5536| ------- | --------------------------------------------| 5537| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5538 5539**Example** 5540 5541```ts 5542import { common2D, drawing } from '@kit.ArkGraphics2D'; 5543const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 5544let colorFilter1 = drawing.ColorFilter.createBlendModeColorFilter(color, drawing.BlendMode.SRC); 5545let colorFilter2 = drawing.ColorFilter.createBlendModeColorFilter(color, drawing.BlendMode.DST); 5546let colorFilter = drawing.ColorFilter.createComposeColorFilter(colorFilter1, colorFilter2); 5547``` 5548 5549### createLinearToSRGBGamma 5550 5551createLinearToSRGBGamma() : ColorFilter 5552 5553Creates a **ColorFilter** object that applies the sRGB gamma curve to the RGB channels. 5554 5555**System capability**: SystemCapability.Graphics.Drawing 5556 5557**Return value** 5558 5559| Type | Description | 5560| --------------------------- | ------------------ | 5561| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 5562 5563**Example** 5564 5565```ts 5566import { drawing } from '@kit.ArkGraphics2D'; 5567let colorFilter = drawing.ColorFilter.createLinearToSRGBGamma(); 5568``` 5569 5570### createSRGBGammaToLinear 5571 5572createSRGBGammaToLinear() : ColorFilter 5573 5574Creates a **ColorFilter** object that applies the RGB channels to the sRGB gamma curve. 5575 5576**System capability**: SystemCapability.Graphics.Drawing 5577 5578**Return value** 5579 5580| Type | Description | 5581| --------------------------- | ------------------ | 5582| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 5583 5584**Example** 5585 5586```ts 5587import { drawing } from '@kit.ArkGraphics2D'; 5588let colorFilter = drawing.ColorFilter.createSRGBGammaToLinear(); 5589``` 5590 5591### createLumaColorFilter 5592 5593createLumaColorFilter() : ColorFilter 5594 5595Creates a **ColorFilter** object that multiplies the luma into the alpha channel and sets the RGB channels to zero. 5596 5597**System capability**: SystemCapability.Graphics.Drawing 5598 5599**Return value** 5600 5601| Type | Description | 5602| --------------------------- | ------------------ | 5603| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 5604 5605**Example** 5606 5607```ts 5608import { drawing } from '@kit.ArkGraphics2D'; 5609let colorFilter = drawing.ColorFilter.createLumaColorFilter(); 5610``` 5611 5612### createMatrixColorFilter<sup>12+</sup> 5613 5614static createMatrixColorFilter(matrix: Array\<number>): ColorFilter 5615 5616Creates a color filter object with a 4*5 color matrix. 5617 5618**System capability**: SystemCapability.Graphics.Drawing 5619 5620**Parameters** 5621 5622| Name | Type | Mandatory| Description | 5623| -------- | -------------------------------------------- | ---- | ------------------------------- | 5624| matrix | Array\<number> | Yes | An array of 20 numbers, indicating the 4*5 matrix. | 5625 5626**Return value** 5627 5628| Type | Description | 5629| --------------------------- | ------------------ | 5630| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 5631 5632**Error codes** 5633 5634For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5635 5636| ID| Error Message| 5637| ------- | --------------------------------------------| 5638| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5639 5640**Example** 5641 5642```ts 5643import { drawing } from '@kit.ArkGraphics2D'; 5644let matrix: Array<number> = [ 5645 1, 0, 0, 0, 0, 5646 0, 1, 0, 0, 0, 5647 0, 0, 100, 0, 0, 5648 0, 0, 0, 1, 0 5649]; 5650let colorFilter = drawing.ColorFilter.createMatrixColorFilter(matrix); 5651``` 5652 5653## JoinStyle<sup>12+</sup> 5654 5655Enumerates the join styles of a pen. The join style defines the shape of the joints of a polyline segment drawn by the pen. 5656 5657**System capability**: SystemCapability.Graphics.Drawing 5658 5659| Name | Value | Description | Diagram | 5660| ----------- | ---- | ----------------------------------------------------------- | -------- | 5661| MITER_JOIN | 0 | Mitered corner. If the angle of a polyline is small, its miter length may be inappropriate. In this case, you need to use the miter limit to limit the miter length.|  | 5662| ROUND_JOIN | 1 | Round corner.|  | 5663| BEVEL_JOIN | 2 | Beveled corner.|  | 5664 5665## CapStyle<sup>12+</sup> 5666 5667Enumerates the cap styles of a pen. The cap style defines the style of both ends of a line segment drawn by the pen. 5668 5669**System capability**: SystemCapability.Graphics.Drawing 5670 5671| Name | Value | Description | Diagram | 5672| ---------- | ---- | ----------------------------------------------------------- | -------- | 5673| FLAT_CAP | 0 | There is no cap style. Both ends of the line segment are cut off square.|  | 5674| SQUARE_CAP | 1 | Square cap style. Both ends have a square, the height of which is half of the width of the line segment, with the same width.|  | 5675| ROUND_CAP | 2 | Round cap style. Both ends have a semicircle centered, the diameter of which is the same as the width of the line segment.|  | 5676 5677## BlurType<sup>12+</sup> 5678 5679Enumerates the blur types of a mask filter. 5680 5681**System capability**: SystemCapability.Graphics.Drawing 5682 5683| Name | Value| Description | Diagram | 5684| ------ | - | ------------------ | -------- | 5685| NORMAL | 0 | Blurs both inside and outside the original border. |  | 5686| SOLID | 1 | Draws solid inside the border, and blurs outside.|  | 5687| OUTER | 2 | Draws nothing inside the border, and blurs outside.|  | 5688| INNER | 3 | Blurs inside the border, and draws nothing outside.|  | 5689 5690## SamplingOptions<sup>12+</sup> 5691 5692Implements sampling options. 5693 5694### constructor<sup>12+</sup> 5695 5696constructor() 5697 5698Creates a **SamplingOptions** object. 5699 5700**System capability**: SystemCapability.Graphics.Drawing 5701 5702**Example** 5703 5704```ts 5705import { RenderNode } from '@kit.ArkUI'; 5706import { common2D, drawing } from '@kit.ArkGraphics2D'; 5707class DrawingRenderNode extends RenderNode { 5708 draw(context : DrawContext) { 5709 const canvas = context.canvas; 5710 const pen = new drawing.Pen(); 5711 let samplingOptions = new drawing.SamplingOptions(); 5712 } 5713} 5714``` 5715 5716### constructor<sup>12+</sup> 5717 5718constructor(filterMode: FilterMode) 5719 5720Creates a **SamplingOptions** object. 5721 5722**System capability**: SystemCapability.Graphics.Drawing 5723 5724**Parameters** 5725 5726| Name | Type | Mandatory| Description | 5727| ---------- | --------------------- | ---- | ----------------------------------- | 5728| filterMode | [FilterMode](#filtermode12) | Yes | Filter mode. | 5729 5730**Error codes** 5731 5732For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5733 5734| ID| Error Message| 5735| ------- | --------------------------------------------| 5736| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5737 5738**Example** 5739 5740```ts 5741import { RenderNode } from '@kit.ArkUI'; 5742import { common2D, drawing } from '@kit.ArkGraphics2D'; 5743class DrawingRenderNode extends RenderNode { 5744 draw(context : DrawContext) { 5745 const canvas = context.canvas; 5746 let samplingOptions = new drawing.SamplingOptions(drawing.FilterMode.FILTER_MODE_NEAREST); 5747 } 5748} 5749``` 5750 5751## Lattice<sup>12+</sup> 5752 5753Implements a lattice object, which is used to divide an image by lattice. 5754 5755### createImageLattice<sup>12+</sup> 5756 5757static createImageLattice(xDivs: Array\<number>, yDivs: Array\<number>, fXCount: number, fYCount: number, fBounds?: common2D.Rect | null, fRectTypes?: Array\<RectType> | null, fColors?: Array\<common2D.Color> | null): Lattice 5758 5759Divides the image into lattices. The lattices on both even columns and even rows are fixed, and they are drawn at their original size if the target is large enough. If the target is too small to hold the fixed lattices, all the fixed lattices are scaled down to fit the target, and the lattices that are not on even columns and even rows are scaled to accommodate the remaining space. 5760 5761**System capability**: SystemCapability.Graphics.Drawing 5762 5763**Parameters** 5764 5765| Name | Type | Mandatory| Description | 5766| ------------ | ------------------------------------------------------------------ | ---- | --------------------------------------------------------------------------------- | 5767| xDivs | Array\<number> | Yes | Array of X coordinates used to divide the image. The value is an integer. | 5768| yDivs | Array\<number> | Yes | Array of Y coordinates used to divide the image. The value is an integer. | 5769| fXCount | number | Yes | Size of the array that holds the X coordinates. The value range is [0, 5]. | 5770| fYCount | number | Yes | Size of the array that holds the Y coordinates. The value range is [0, 5]. | 5771| fBounds | [common2D.Rect](js-apis-graphics-common2D.md#rect)\|null | No | Source bounds to draw. The rectangle parameter must be an integer. The default value is the rectangle size of the original image. If the rectangle parameter is a decimal, the decimal part is discarded and converted into an integer.| 5772| fRectTypes | Array\<[RectType](#recttype12)>\|null | No | Array that holds the rectangle types. The default value is null. If this parameter is specified, the array size must be (fXCount + 1) * (fYCount + 1).| 5773| fColors | Array\<[common2D.Color](js-apis-graphics-common2D.md#color)>\|null | No | Array that holds the colors used to fill the lattices. The default value is null. If this parameter is specified, the array size must be (fXCount + 1) * (fYCount + 1).| 5774 5775**Return value** 5776 5777| Type | Description | 5778| ------------------------- | ----------------------------------- | 5779| [Lattice](#lattice12) | **Lattice** object obtained. | 5780 5781**Error codes** 5782 5783For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5784 5785| ID| Error Message| 5786| ------- | --------------------------------------------| 5787| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5788 5789**Example** 5790 5791```ts 5792import { RenderNode } from '@kit.ArkUI'; 5793import { drawing } from '@kit.ArkGraphics2D'; 5794class DrawingRenderNode extends RenderNode { 5795 draw(context : DrawContext) { 5796 let xDivs : Array<number> = [1, 2, 4]; 5797 let yDivs : Array<number> = [1, 2, 4]; 5798 let lattice = drawing.Lattice.createImageLattice(xDivs, yDivs, 3, 3); // The image is divided into lattices of (3 + 1) x (3 + 1). The blue rectangles in the figure below are fixed lattices. 5799 } 5800} 5801``` 5802 5803 5804### createImageLattice<sup>18+</sup> 5805 5806static createImageLattice(xDivs: Array\<number>, yDivs: Array\<number>, fXCount: number, fYCount: number, fBounds?: common2D.Rect | null, fRectTypes?: Array\<RectType> | null, fColors?: Array\<number> | null): Lattice 5807 5808Divides the image into lattices. The lattices on both even columns and even rows are fixed, and they are drawn at their original size if the target is large enough. If the target is too small to hold the fixed lattices, all the fixed lattices are scaled down to fit the target, and the lattices that are not on even columns and even rows are scaled to accommodate the remaining space. 5809 5810**System capability**: SystemCapability.Graphics.Drawing 5811 5812**Parameters** 5813 5814| Name | Type | Mandatory| Description | 5815| ------------ | ------------------------------------------------------------------ | ---- | --------------------------------------------------------------------------------- | 5816| xDivs | Array\<number> | Yes | Array of X coordinates used to divide the image. The value is an integer. | 5817| yDivs | Array\<number> | Yes | Array of Y coordinates used to divide the image. The value is an integer. | 5818| fXCount | number | Yes | Size of the array that holds the X coordinates. The value range is [0, 5]. | 5819| fYCount | number | Yes | Size of the array that holds the Y coordinates. The value range is [0, 5]. | 5820| fBounds | [common2D.Rect](js-apis-graphics-common2D.md#rect)\|null | No | Source bounds to draw. The rectangle parameter must be an integer. The default value is the rectangle size of the original image. If the rectangle parameter is a decimal, the decimal part is discarded and converted into an integer.| 5821| fRectTypes | Array\<[RectType](#recttype12)>\|null | No | Array that holds the rectangle types. The default value is null. If this parameter is specified, the array size must be (fXCount + 1) * (fYCount + 1).| 5822| fColors | Array\<number>\|null | No | Array that holds the colors used to fill the lattices. Each color is represented by a 32-bit unsigned integer in hexadecimal ARGB format. The default value is null. If this parameter is specified, the array size must be (fXCount + 1) * (fYCount + 1).| 5823 5824**Return value** 5825 5826| Type | Description | 5827| ------------------------- | ----------------------------------- | 5828| [Lattice](#lattice12) | **Lattice** object obtained. | 5829 5830**Error codes** 5831 5832For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5833 5834| ID| Error Message| 5835| ------- | --------------------------------------------| 5836| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5837 5838**Example** 5839 5840```ts 5841import { RenderNode } from '@kit.ArkUI'; 5842import { drawing } from '@kit.ArkGraphics2D'; 5843class DrawingRenderNode extends RenderNode { 5844 draw(context : DrawContext) { 5845 let xDivs : Array<number> = [1, 2, 4]; 5846 let yDivs : Array<number> = [1, 2, 4]; 5847 let colorArray :Array<number>=[0xffffffff,0x44444444,0x99999999,0xffffffff,0x44444444,0x99999999,0xffffffff,0x44444444,0x99999999,0x44444444,0x99999999,0xffffffff,0x44444444,0x99999999,0xffffffff,0x44444444]; 5848 let lattice = drawing.Lattice.createImageLattice(xDivs, yDivs, 3, 3,null,null,colorArray); 5849 } 5850} 5851``` 5852 5853## RectType<sup>12+</sup> 5854 5855Enumerates the types of rectangles used to fill the lattices. This enum is used only in [Lattice](#lattice12). 5856 5857**System capability**: SystemCapability.Graphics.Drawing 5858 5859| Name | Value | Description | 5860| ------------ | ---- | --------------------------------------------------------------- | 5861| DEFAULT | 0 | Draws an image into the lattice. | 5862| TRANSPARENT | 1 | Sets the lattice to transparent. | 5863| FIXEDCOLOR | 2 | Draws the colors in the **fColors** array in [Lattice](#lattice12) into the lattice. | 5864 5865## MaskFilter<sup>12+</sup> 5866 5867Implements a mask filter. 5868 5869### createBlurMaskFilter<sup>12+</sup> 5870 5871static createBlurMaskFilter(blurType: BlurType, sigma: number): MaskFilter 5872 5873Creates a mask filter with a blur effect. 5874 5875**System capability**: SystemCapability.Graphics.Drawing 5876 5877**Parameters** 5878 5879| Name | Type | Mandatory| Description | 5880| ---------- | --------------------- | ---- | ----------------------------------- | 5881| blurType | [BlurType](#blurtype12) | Yes | Blur type. | 5882| sigma | number | Yes | Standard deviation of the Gaussian blur to apply. The value must be a floating point number greater than 0.| 5883 5884**Return value** 5885 5886| Type | Description | 5887| ------------------------- | ------------------ | 5888| [MaskFilter](#maskfilter12) | **MaskFilter** object created.| 5889 5890**Error codes** 5891 5892For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5893 5894| ID| Error Message| 5895| ------- | --------------------------------------------| 5896| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5897 5898**Example** 5899 5900```ts 5901import { RenderNode } from '@kit.ArkUI'; 5902import { common2D, drawing } from '@kit.ArkGraphics2D'; 5903class DrawingRenderNode extends RenderNode { 5904 draw(context : DrawContext) { 5905 const canvas = context.canvas; 5906 let maskFilter = drawing.MaskFilter.createBlurMaskFilter(drawing.BlurType.OUTER, 10); 5907 } 5908} 5909``` 5910 5911## PathDashStyle<sup>18+</sup> 5912 5913Enumerates the styles of the dashed path effect. 5914 5915**System capability**: SystemCapability.Graphics.Drawing 5916 5917| Name | Value| Description | 5918| ------ | - | ------------------ | 5919| TRANSLATE | 0 | Translates only, not rotating with the path.| 5920| ROTATE | 1 | Rotates with the path.| 5921| MORPH | 2 | Rotates with the path and adjusts by stretching or compressing at angles to enhance smoothness.| 5922 5923## PathEffect<sup>12+</sup> 5924 5925Implements a path effect. 5926 5927### createDashPathEffect<sup>12+</sup> 5928 5929static createDashPathEffect(intervals: Array\<number>, phase: number): PathEffect 5930 5931Creates a **PathEffect** object that converts a path into a dotted line. 5932 5933**System capability**: SystemCapability.Graphics.Drawing 5934 5935**Parameters** 5936 5937| Name | Type | Mandatory | Description | 5938| ---------- | ------------- | ------- | -------------------------------------------------- | 5939| intervals | Array\<number> | Yes | Array of ON and OFF lengths of dotted lines. The number of arrays must be an even number and be greater than or equal to 2.| 5940| phase | number | Yes | Offset used during drawing. The value is a floating point number. | 5941 5942**Return value** 5943 5944| Type | Description | 5945| ------------------------- | --------------------- | 5946| [PathEffect](#patheffect12) | **PathEffect** object created.| 5947 5948**Error codes** 5949 5950For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5951 5952| ID| Error Message| 5953| ------- | --------------------------------------------| 5954| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5955 5956**Example** 5957 5958```ts 5959import { RenderNode } from '@kit.ArkUI'; 5960import { common2D, drawing } from '@kit.ArkGraphics2D'; 5961class DrawingRenderNode extends RenderNode { 5962 draw(context : DrawContext) { 5963 const canvas = context.canvas; 5964 let intervals = [10, 5]; 5965 let effect = drawing.PathEffect.createDashPathEffect(intervals, 5); 5966 } 5967} 5968``` 5969 5970### createPathDashEffect<sup>18+</sup> 5971 5972static createPathDashEffect(path: Path, advance: number, phase: number, style: PathDashStyle): PathEffect 5973 5974Creates a dashed path effect based on the shape described by a path. 5975 5976**System capability**: SystemCapability.Graphics.Drawing 5977 5978**Parameters** 5979 5980| Name | Type | Mandatory | Description | 5981| ---------- | ------------- | ------- | -------------------------------------------------- | 5982| path | [Path](#path) | Yes| Path that defines the shape to be used for filling each dash in the pattern.| 5983| advance | number | Yes| Distance between two consecutive dashes. The value is a floating point number greater than 0. Otherwise, an error code is thrown.| 5984| phase | number | Yes| Starting offset of the dash pattern. The value is a floating point number. The actual offset used is the absolute value of this value modulo the value of **advance**.| 5985| style | [PathDashStyle](#pathdashstyle18) | Yes| Style of the dashed path effect.| 5986 5987**Return value** 5988 5989| Type | Description | 5990| ------------------------- | --------------------- | 5991| [PathEffect](#patheffect12) | **PathEffect** object created.| 5992 5993**Error codes** 5994 5995For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5996 5997| ID| Error Message| 5998| ------- | --------------------------------------------| 5999| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3. Parameter verification failed. | 6000 6001**Example** 6002 6003```ts 6004import { RenderNode } from '@kit.ArkUI'; 6005import { common2D, drawing } from '@kit.ArkGraphics2D'; 6006class DrawingRenderNode extends RenderNode { 6007 draw(context : DrawContext) { 6008 const canvas = context.canvas; 6009 let pen = new drawing.Pen(); 6010 const penColor: common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 } 6011 pen.setColor(penColor); 6012 pen.setStrokeWidth(10); 6013 canvas.attachPen(pen); 6014 pen.setAntiAlias(true); 6015 6016 const path = new drawing.Path(); 6017 path.moveTo(100, 100); 6018 path.lineTo(150, 50); 6019 path.lineTo(200, 100); 6020 6021 const path1 = new drawing.Path(); 6022 path1.moveTo(0, 0); 6023 path1.lineTo(10, 0); 6024 path1.lineTo(20, 10); 6025 path1.lineTo(0,10); 6026 6027 let pathEffect1: drawing.PathEffect = drawing.PathEffect.createPathDashEffect(path1, 50, -30, 6028 drawing.PathDashStyle.MORPH); 6029 pen.setPathEffect(pathEffect1); 6030 6031 canvas.attachPen(pen); 6032 canvas.drawPath(path); 6033 canvas.detachPen(); 6034 } 6035} 6036``` 6037 6038### createSumPathEffect<sup>18+</sup> 6039 6040static createSumPathEffect(firstPathEffect: PathEffect, secondPathEffect: PathEffect): PathEffect 6041 6042Creates an overlay path effect based on two distinct path effects. Different from **createComposePathEffect**, this API applies each effect separately and then displays them as a simple overlay. 6043 6044**System capability**: SystemCapability.Graphics.Drawing 6045 6046**Parameters** 6047 6048| Name | Type | Mandatory | Description | 6049| ---------- | ------------- | ------- | -------------------------------------------------- | 6050| firstPathEffect | [PathEffect](#patheffect12) | Yes| First path effect.| 6051| secondPathEffect | [PathEffect](#patheffect12) | Yes| Second path effect.| 6052 6053**Return value** 6054 6055| Type | Description | 6056| ------------------------- | --------------------- | 6057| [PathEffect](#patheffect12) | **PathEffect** object created.| 6058 6059**Error codes** 6060 6061For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6062 6063| ID| Error Message| 6064| ------- | --------------------------------------------| 6065| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6066 6067**Example** 6068 6069```ts 6070import { RenderNode } from '@kit.ArkUI'; 6071import { drawing } from '@kit.ArkGraphics2D'; 6072class DrawingRenderNode extends RenderNode { 6073 draw(context : DrawContext) { 6074 const canvas = context.canvas; 6075 let intervals = [10, 5]; 6076 let pathEffectOne = drawing.PathEffect.createDashPathEffect(intervals, 5); 6077 let pathEffectTwo = drawing.PathEffect.createDashPathEffect(intervals, 10); 6078 let effect = drawing.PathEffect.createSumPathEffect(pathEffectOne, pathEffectTwo); 6079 } 6080} 6081``` 6082 6083### createCornerPathEffect<sup>12+</sup> 6084 6085static createCornerPathEffect(radius: number): PathEffect 6086 6087Creates a path effect that transforms the sharp angle between line segments into a rounded corner with the specified radius. 6088 6089**System capability**: SystemCapability.Graphics.Drawing 6090 6091**Parameters** 6092 6093| Name | Type | Mandatory | Description | 6094| ---------- | ------------- | ------- | -------------------------------------------------- | 6095| radius | number | Yes | Radius of the rounded corner. The value must be greater than 0. The value is a floating point number. | 6096 6097**Return value** 6098 6099| Type | Description | 6100| ------------------------- | --------------------- | 6101| [PathEffect](#patheffect12) | **PathEffect** object created.| 6102 6103**Error codes** 6104 6105For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6106 6107| ID| Error Message| 6108| ------- | --------------------------------------------| 6109| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6110 6111**Example** 6112 6113```ts 6114import { RenderNode } from '@kit.ArkUI'; 6115import { drawing } from '@kit.ArkGraphics2D'; 6116class DrawingRenderNode extends RenderNode { 6117 draw(context : DrawContext) { 6118 const canvas = context.canvas; 6119 let effect = drawing.PathEffect.createCornerPathEffect(30); 6120 } 6121} 6122``` 6123 6124### createDiscretePathEffect<sup>18+</sup> 6125 6126static createDiscretePathEffect(segLength: number, dev: number, seedAssist?: number): PathEffect 6127 6128Creates an effect that segments the path and scatters the segments in an irregular pattern along the path. 6129 6130**System capability**: SystemCapability.Graphics.Drawing 6131 6132**Parameters** 6133 6134| Name | Type | Mandatory | Description | 6135| ---------- | ------------- | ------- | -------------------------------------------------- | 6136| segLength | number | Yes | Distance along the path at which each segment is fragmented. The value is a floating point number. If a negative number or the value **0** is passed in, no effect is created.| 6137| dev | number | Yes | Maximum amount by which the end points of the segments can be randomly displaced during rendering. The value is a floating-point number.| 6138| seedAssist | number | No | Optional parameter to assist in generating a pseudo-random seed for the effect. The default value is **0**, and the value is a 32-bit unsigned integer.| 6139 6140**Return value** 6141 6142| Type | Description | 6143| ------------------------- | --------------------- | 6144| [PathEffect](#patheffect12) | **PathEffect** object created.| 6145 6146**Error codes** 6147 6148For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6149 6150| ID| Error Message| 6151| ------- | --------------------------------------------| 6152| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6153 6154**Example** 6155 6156```ts 6157import { RenderNode } from '@kit.ArkUI'; 6158import { drawing } from '@kit.ArkGraphics2D'; 6159class DrawingRenderNode extends RenderNode { 6160 draw(context : DrawContext) { 6161 const canvas = context.canvas; 6162 let effect = drawing.PathEffect.createDiscretePathEffect(100, -50, 0); 6163 } 6164} 6165``` 6166 6167### createComposePathEffect<sup>18+</sup> 6168 6169static createComposePathEffect(outer: PathEffect, inner: PathEffect): PathEffect 6170 6171Creates a path effect by sequentially applying the inner effect and then the outer effect. 6172 6173**System capability**: SystemCapability.Graphics.Drawing 6174 6175**Parameters** 6176 6177| Name| Type | Mandatory| Description | 6178| ------ | --------------------------- | ---- | -------------------------------- | 6179| outer | [PathEffect](#patheffect12) | Yes | Path effect that is applied second, overlaying the first effect.| 6180| inner | [PathEffect](#patheffect12) | Yes | Inner path effect that is applied first.| 6181 6182**Return value** 6183 6184| Type | Description | 6185| ------------------------- | --------------------- | 6186| [PathEffect](#patheffect12) | **PathEffect** object created.| 6187 6188**Error codes** 6189 6190For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6191 6192| ID| Error Message| 6193| ------- | --------------------------------------------| 6194| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6195 6196**Example** 6197 6198```ts 6199import { RenderNode } from '@kit.ArkUI'; 6200import { drawing } from '@kit.ArkGraphics2D'; 6201class DrawingRenderNode extends RenderNode { 6202 draw(context : DrawContext) { 6203 const canvas = context.canvas; 6204 let pathEffect1 = drawing.PathEffect.createCornerPathEffect(100); 6205 let pathEffect2 = drawing.PathEffect.createCornerPathEffect(10); 6206 let effect = drawing.PathEffect.createComposePathEffect(pathEffect1, pathEffect2); 6207 } 6208} 6209``` 6210 6211## ShadowLayer<sup>12+</sup> 6212 6213Implements a shadow layer. 6214 6215### create<sup>12+</sup> 6216 6217static create(blurRadius: number, x: number, y: number, color: common2D.Color): ShadowLayer 6218 6219Creates a **ShadowLayer** object. 6220 6221**System capability**: SystemCapability.Graphics.Drawing 6222 6223**Parameters** 6224 6225| Name | Type | Mandatory| Description | 6226| ---------- | -------- | ---- | ----------------------------------- | 6227| blurRadius | number | Yes | Radius of the shadow layer. The value must be a floating point number greater than 0. | 6228| x | number | Yes | Offset on the X axis. The value is a floating point number. | 6229| y | number | Yes | Offset on the Y axis. The value is a floating point number. | 6230| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. Each color channel is an integer ranging from 0 to 255.| 6231 6232**Return value** 6233 6234| Type | Description | 6235| --------------------------- | -------------------- | 6236| [ShadowLayer](#shadowlayer12) | **ShadowLayer** object created.| 6237 6238**Error codes** 6239 6240For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6241 6242| ID| Error Message| 6243| ------- | --------------------------------------------| 6244| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6245 6246**Example** 6247 6248```ts 6249import { RenderNode } from '@kit.ArkUI'; 6250import { common2D, drawing } from '@kit.ArkGraphics2D'; 6251class DrawingRenderNode extends RenderNode { 6252 draw(context : DrawContext) { 6253 const canvas = context.canvas; 6254 let color : common2D.Color = {alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00}; 6255 let shadowLayer = drawing.ShadowLayer.create(3, -3, 3, color); 6256 } 6257} 6258``` 6259 6260### create<sup>18+</sup> 6261 6262static create(blurRadius: number, x: number, y: number, color: common2D.Color | number): ShadowLayer 6263 6264Creates a **ShadowLayer** object. 6265 6266**System capability**: SystemCapability.Graphics.Drawing 6267 6268**Parameters** 6269 6270| Name | Type | Mandatory| Description | 6271| ---------- | -------- | ---- | ----------------------------------- | 6272| blurRadius | number | Yes | Radius of the shadow layer. The value must be a floating point number greater than 0. | 6273| x | number | Yes | Offset on the X axis. The value is a floating point number. | 6274| y | number | Yes | Offset on the Y axis. The value is a floating point number. | 6275| color | [common2D.Color](js-apis-graphics-common2D.md#color) \| number | Yes | Color, represented by a 32-bit unsigned integer in hexadecimal ARGB format. | 6276 6277**Return value** 6278 6279| Type | Description | 6280| --------------------------- | -------------------- | 6281| [ShadowLayer](#shadowlayer12) | **ShadowLayer** object created.| 6282 6283**Error codes** 6284 6285For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6286 6287| ID| Error Message| 6288| ------- | --------------------------------------------| 6289| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6290 6291**Example** 6292 6293```ts 6294import { RenderNode } from '@kit.ArkUI'; 6295import { drawing } from '@kit.ArkGraphics2D'; 6296class DrawingRenderNode extends RenderNode { 6297 draw(context : DrawContext) { 6298 const canvas = context.canvas; 6299 let shadowLayer = drawing.ShadowLayer.create(3, -3, 3, 0xff00ff00); 6300 } 6301} 6302``` 6303 6304## Pen 6305 6306Defines a pen, which is used to describe the style and color to outline a shape. 6307 6308### constructor<sup>12+</sup> 6309 6310constructor() 6311 6312A constructor used to create a **Pen** object. 6313 6314**System capability**: SystemCapability.Graphics.Drawing 6315 6316**Example** 6317 6318```ts 6319import { drawing } from '@kit.ArkGraphics2D'; 6320 6321const pen = new drawing.Pen(); 6322``` 6323 6324### constructor<sup>12+</sup> 6325 6326constructor(pen: Pen) 6327 6328Copies a **Pen** object to create a new one. 6329 6330**System capability**: SystemCapability.Graphics.Drawing 6331 6332**Parameters** 6333 6334| Name| Type | Mandatory| Description | 6335| ------| ----------- | ---- | ---------------- | 6336| pen | [Pen](#pen) | Yes | **Pen** object to copy.| 6337 6338**Error codes** 6339 6340For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6341 6342| ID| Error Message| 6343| ------- | --------------------------------------------| 6344| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6345 6346**Example** 6347 6348```ts 6349import { common2D, drawing } from '@kit.ArkGraphics2D'; 6350 6351const pen = new drawing.Pen(); 6352const penColor: common2D.Color = { alpha: 255, red: 0, green: 255, blue: 0 }; 6353pen.setColor(penColor); 6354pen.setStrokeWidth(10); 6355const newPen = new drawing.Pen(pen); 6356``` 6357 6358### setMiterLimit<sup>12+</sup> 6359 6360setMiterLimit(miter: number): void 6361 6362Sets the maximum ratio allowed between the sharp corner length of a polyline and its line width. When drawing a polyline with the pen, if [JoinStyle](#joinstyle12) is set to **MITER_JOIN** and this maximum ratio is exceeded, the corner will be displayed as beveled instead of mitered. 6363 6364**System capability**: SystemCapability.Graphics.Drawing 6365 6366**Parameters** 6367 6368| Name| Type | Mandatory| Description | 6369| ------ | ------ | ---- | ---------------- | 6370| miter | number | Yes | Maximum ratio of the sharp corner length of the polyline to the line width. A negative number is processed as 4.0 during drawing. Non-negative numbers take effect normally. The value is a floating point number.| 6371 6372**Error codes** 6373 6374For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6375 6376| ID| Error Message| 6377| ------- | --------------------------------------------| 6378| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6379 6380**Example** 6381 6382```ts 6383import { drawing } from '@kit.ArkGraphics2D'; 6384 6385const pen = new drawing.Pen(); 6386pen.setMiterLimit(5); 6387``` 6388 6389### getMiterLimit<sup>12+</sup> 6390 6391getMiterLimit(): number 6392 6393Obtains the maximum ratio allowed between the sharp corner length of a polyline and its line width. 6394 6395**System capability**: SystemCapability.Graphics.Drawing 6396 6397**Return value** 6398 6399| Type | Description | 6400| -------| -------------------- | 6401| number | Maximum ratio obtained.| 6402 6403**Example** 6404 6405```ts 6406import { drawing } from '@kit.ArkGraphics2D'; 6407 6408const pen = new drawing.Pen(); 6409let miter = pen.getMiterLimit(); 6410``` 6411 6412### setImageFilter<sup>12+</sup> 6413 6414setImageFilter(filter: ImageFilter | null): void 6415 6416Sets an image filter for this pen. 6417 6418**System capability**: SystemCapability.Graphics.Drawing 6419 6420**Parameters** 6421 6422| Name| Type | Mandatory| Description | 6423| ------ | ------ | ---- | ----------------------- | 6424| filter | [ImageFilter](#imagefilter12) \| null | Yes | Image filter. If null is passed in, the image filter effect of the pen will be cleared.| 6425 6426**Error codes** 6427 6428For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6429 6430| ID| Error Message| 6431| ------- | --------------------------------------------| 6432| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types. | 6433 6434**Example** 6435 6436```ts 6437import {drawing} from '@kit.ArkGraphics2D'; 6438let colorfilter = drawing.ColorFilter.createSRGBGammaToLinear(); 6439let imgFilter = drawing.ImageFilter.createFromColorFilter(colorfilter); 6440let pen = new drawing.Pen(); 6441pen.setImageFilter(imgFilter); 6442pen.setImageFilter(null); 6443``` 6444 6445### getColorFilter<sup>12+</sup> 6446 6447getColorFilter(): ColorFilter 6448 6449Obtains the color filter of this pen. 6450 6451**System capability**: SystemCapability.Graphics.Drawing 6452 6453**Return value** 6454 6455| Type | Description | 6456| --------------------------- | ------------------ | 6457| [ColorFilter](#colorfilter) | Color filter.| 6458 6459**Example** 6460 6461```ts 6462import {drawing} from '@kit.ArkGraphics2D'; 6463let pen = new drawing.Pen(); 6464let colorfilter = drawing.ColorFilter.createLumaColorFilter(); 6465pen.setColorFilter(colorfilter); 6466let filter = pen.getColorFilter(); 6467``` 6468 6469### setColor 6470 6471setColor(color: common2D.Color) : void 6472 6473Sets a color for this pen. 6474 6475**System capability**: SystemCapability.Graphics.Drawing 6476 6477**Parameters** 6478 6479| Name| Type | Mandatory| Description | 6480| ------ | ---------------------------------------------------- | ---- | ---------------- | 6481| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. Each color channel is an integer ranging from 0 to 255.| 6482 6483**Error codes** 6484 6485For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6486 6487| ID| Error Message| 6488| ------- | --------------------------------------------| 6489| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6490 6491**Example** 6492 6493```ts 6494import { common2D, drawing } from '@kit.ArkGraphics2D'; 6495const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 6496const pen = new drawing.Pen(); 6497pen.setColor(color); 6498``` 6499 6500### setColor<sup>12+</sup> 6501 6502setColor(alpha: number, red: number, green: number, blue: number): void 6503 6504Sets a color for this pen. This API provides better performance than [setColor](#setcolor) and is recommended. 6505 6506**System capability**: SystemCapability.Graphics.Drawing 6507 6508**Parameters** 6509 6510| Name| Type | Mandatory| Description | 6511| ------ | ------ | ---- | -------------------------------------------------- | 6512| alpha | number | Yes | Alpha channel value of the color in ARGB format. The value is an integer ranging from 0 to 255. Any passed-in floating point number is rounded down.| 6513| red | number | Yes | Red channel value of the color in ARGB format. The value is an integer ranging from 0 to 255. Any passed-in floating point number is rounded down. | 6514| green | number | Yes | Green channel value of the color in ARGB format. The value is an integer ranging from 0 to 255. Any passed-in floating point number is rounded down. | 6515| blue | number | Yes | Blue channel value of the color in ARGB format. The value is an integer ranging from 0 to 255. Any passed-in floating point number is rounded down. | 6516 6517**Error codes** 6518 6519For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6520 6521| ID| Error Message| 6522| ------- | --------------------------------------------| 6523| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6524 6525**Example** 6526 6527```ts 6528import { drawing } from '@kit.ArkGraphics2D'; 6529const pen = new drawing.Pen(); 6530pen.setColor(255, 255, 0, 0); 6531``` 6532 6533### setColor<sup>18+</sup> 6534 6535setColor(color: number) : void 6536 6537Sets a color for this pen. 6538 6539**System capability**: SystemCapability.Graphics.Drawing 6540 6541**Parameters** 6542 6543| Name| Type | Mandatory| Description | 6544| ------ | ---------------------------------------------------- | ---- | ---------------- | 6545| color | number | Yes | Color in hexadecimal ARGB format.| 6546 6547**Error codes** 6548 6549For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6550 6551| ID| Error Message| 6552| ------- | --------------------------------------------| 6553| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6554 6555**Example** 6556 6557```ts 6558import { drawing } from '@kit.ArkGraphics2D'; 6559const pen = new drawing.Pen(); 6560pen.setColor(0xffff0000); 6561``` 6562 6563### getColor<sup>12+</sup> 6564 6565getColor(): common2D.Color 6566 6567Obtains the color of this pen. 6568 6569**System capability**: SystemCapability.Graphics.Drawing 6570 6571**Return value** 6572 6573| Type | Description | 6574| -------------- | -------------- | 6575| common2D.Color | Color of the pen.| 6576 6577**Example** 6578 6579```ts 6580import { common2D, drawing } from '@kit.ArkGraphics2D'; 6581 6582const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 6583const pen = new drawing.Pen(); 6584pen.setColor(color); 6585let colorGet = pen.getColor(); 6586``` 6587 6588### getHexColor<sup>18+</sup> 6589 6590getHexColor(): number 6591 6592Obtains the color of this pen. 6593 6594**System capability**: SystemCapability.Graphics.Drawing 6595 6596**Return value** 6597 6598| Type | Description | 6599| -------------- | -------------- | 6600| number | Color, represented as a 32-bit unsigned integer in hexadecimal ARGB format.| 6601 6602**Example** 6603 6604```ts 6605import { common2D, drawing } from '@kit.ArkGraphics2D'; 6606 6607let color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 6608let pen = new drawing.Pen(); 6609pen.setColor(color); 6610let hex_color: number = pen.getHexColor(); 6611console.info('getHexColor: ', hex_color.toString(16)); 6612``` 6613 6614### setStrokeWidth 6615 6616setStrokeWidth(width: number) : void 6617 6618Sets the stroke width for this pen. The value **0** is treated as an unusually thin width. During drawing, the width of 0 is always drawn as 1 pixel wide, regardless of any scaling applied to the canvas. Negative values are also regarded as the value **0** during the drawing process. 6619 6620**System capability**: SystemCapability.Graphics.Drawing 6621 6622**Parameters** 6623 6624| Name| Type | Mandatory| Description | 6625| ------ | ------ | ---- | ---------------- | 6626| width | number | Yes | Stroke width. The value is a floating point number.| 6627 6628**Error codes** 6629 6630For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6631 6632| ID| Error Message| 6633| ------- | --------------------------------------------| 6634| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6635 6636**Example** 6637 6638```ts 6639import { drawing } from '@kit.ArkGraphics2D'; 6640const pen = new drawing.Pen(); 6641pen.setStrokeWidth(5); 6642``` 6643 6644### getWidth<sup>12+</sup> 6645 6646getWidth(): number 6647 6648Obtains the stroke width of this pen. The width describes the thickness of the outline of a shape. 6649 6650**System capability**: SystemCapability.Graphics.Drawing 6651 6652**Return value** 6653 6654| Type | Description | 6655| ------ | -------------- | 6656| number | Stroke width of the pen.| 6657 6658**Example** 6659 6660```ts 6661import { drawing } from '@kit.ArkGraphics2D'; 6662 6663const pen = new drawing.Pen(); 6664let width = pen.getWidth(); 6665``` 6666 6667### setAntiAlias 6668 6669setAntiAlias(aa: boolean) : void 6670 6671Enables anti-aliasing for this pen. Anti-aliasing makes the edges of the content smoother. 6672 6673**System capability**: SystemCapability.Graphics.Drawing 6674 6675**Parameters** 6676 6677| Name| Type | Mandatory| Description | 6678| ------ | ------- | ---- | ------------------------------------------------- | 6679| aa | boolean | Yes | Whether to enable anti-aliasing. The value **true** means to enable anti-aliasing, and **false** means the opposite.| 6680 6681**Error codes** 6682 6683For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6684 6685| ID| Error Message| 6686| ------- | --------------------------------------------| 6687| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6688 6689**Example** 6690 6691```ts 6692import { drawing } from '@kit.ArkGraphics2D'; 6693const pen = new drawing.Pen(); 6694pen.setAntiAlias(true); 6695``` 6696 6697### isAntiAlias<sup>12+</sup> 6698 6699isAntiAlias(): boolean 6700 6701Checks whether anti-aliasing is enabled for this pen. 6702 6703**System capability**: SystemCapability.Graphics.Drawing 6704 6705**Return value** 6706 6707| Type | Description | 6708| ------- | ------------------------- | 6709| boolean | Check result. The value **true** means that anti-aliasing is enabled, and **false** means the opposite.| 6710 6711**Example** 6712 6713```ts 6714import { drawing } from '@kit.ArkGraphics2D'; 6715 6716const pen = new drawing.Pen(); 6717let isAntiAlias = pen.isAntiAlias(); 6718``` 6719 6720### setAlpha 6721 6722setAlpha(alpha: number) : void 6723 6724Sets an alpha value for this pen. 6725 6726**System capability**: SystemCapability.Graphics.Drawing 6727 6728**Parameters** 6729 6730| Name| Type | Mandatory| Description | 6731| ------ | ------ | ---- | ---------------------------------------- | 6732| alpha | number | Yes | Alpha value. The value is an integer in the range [0, 255]. If a floating point number is passed in, the value is rounded down.| 6733 6734**Error codes** 6735 6736For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6737 6738| ID| Error Message| 6739| ------- | --------------------------------------------| 6740| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6741 6742**Example** 6743 6744```ts 6745import { drawing } from '@kit.ArkGraphics2D'; 6746const pen = new drawing.Pen(); 6747pen.setAlpha(128); 6748``` 6749 6750### getAlpha<sup>12+</sup> 6751 6752getAlpha(): number 6753 6754Obtains the alpha value of this pen. 6755 6756**System capability**: SystemCapability.Graphics.Drawing 6757 6758**Return value** 6759 6760| Type | Description | 6761| ------ | ---------------- | 6762| number | Alpha value of the pen. The return value is an integer ranging from 0 to 255.| 6763 6764**Example** 6765 6766```ts 6767import { drawing } from '@kit.ArkGraphics2D'; 6768 6769const pen = new drawing.Pen(); 6770let alpha = pen.getAlpha(); 6771``` 6772 6773### setColorFilter 6774 6775setColorFilter(filter: ColorFilter) : void 6776 6777Sets a color filter for this pen. 6778 6779**System capability**: SystemCapability.Graphics.Drawing 6780 6781**Parameters** 6782 6783| Name| Type | Mandatory| Description | 6784| ------ | --------------------------- | ---- | ------------ | 6785| filter | [ColorFilter](#colorfilter) | Yes | Color filter. If null is passed in, the color filter is cleared.| 6786 6787**Error codes** 6788 6789For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6790 6791| ID| Error Message| 6792| ------- | --------------------------------------------| 6793| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6794 6795**Example** 6796 6797```ts 6798import { drawing } from '@kit.ArkGraphics2D'; 6799const pen = new drawing.Pen(); 6800let colorFilter = drawing.ColorFilter.createLinearToSRGBGamma(); 6801pen.setColorFilter(colorFilter); 6802``` 6803 6804### setMaskFilter<sup>12+</sup> 6805 6806setMaskFilter(filter: MaskFilter): void 6807 6808Adds a mask filter for this pen. 6809 6810**System capability**: SystemCapability.Graphics.Drawing 6811 6812**Parameters** 6813 6814| Name| Type | Mandatory| Description | 6815| ------ | ------------------------- | ---- | --------- | 6816| filter | [MaskFilter](#maskfilter12) | Yes | Mask filter. If null is passed in, the mask filter is cleared.| 6817 6818**Error codes** 6819 6820For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6821 6822| ID| Error Message| 6823| ------- | --------------------------------------------| 6824| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6825 6826**Example** 6827 6828```ts 6829import { RenderNode } from '@kit.ArkUI'; 6830import { common2D, drawing } from '@kit.ArkGraphics2D'; 6831class DrawingRenderNode extends RenderNode { 6832 draw(context : DrawContext) { 6833 const canvas = context.canvas; 6834 const pen = new drawing.Pen(); 6835 pen.setStrokeWidth(5); 6836 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 6837 let maskFilter = drawing.MaskFilter.createBlurMaskFilter(drawing.BlurType.OUTER, 10); 6838 pen.setMaskFilter(maskFilter); 6839 } 6840} 6841``` 6842 6843### setPathEffect<sup>12+</sup> 6844 6845setPathEffect(effect: PathEffect): void 6846 6847Sets the path effect for this pen. 6848 6849**System capability**: SystemCapability.Graphics.Drawing 6850 6851**Parameters** 6852 6853| Name | Type | Mandatory| Description | 6854| ------- | ------------------------- | ---- | ------------ | 6855| effect | [PathEffect](#patheffect12) | Yes | Path effect. If null is passed in, the path filter is cleared.| 6856 6857**Error codes** 6858 6859For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6860 6861| ID| Error Message| 6862| ------- | --------------------------------------------| 6863| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6864 6865**Example** 6866 6867```ts 6868import { RenderNode } from '@kit.ArkUI'; 6869import { common2D, drawing } from '@kit.ArkGraphics2D'; 6870class DrawingRenderNode extends RenderNode { 6871 draw(context : DrawContext) { 6872 const canvas = context.canvas; 6873 const pen = new drawing.Pen(); 6874 pen.setStrokeWidth(5); 6875 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 6876 let pathEffect = drawing.PathEffect.createDashPathEffect([30, 10], 0); 6877 pen.setPathEffect(pathEffect); 6878 } 6879} 6880``` 6881 6882### setShaderEffect<sup>12+</sup> 6883 6884setShaderEffect(shaderEffect: ShaderEffect): void 6885 6886Sets the shader effect for this pen. 6887 6888**System capability**: SystemCapability.Graphics.Drawing 6889 6890**Parameters** 6891 6892| Name | Type | Mandatory| Description | 6893| ------- | ------------------------- | ---- | ------------ | 6894| shaderEffect | [ShaderEffect](#shadereffect12) | Yes | **ShaderEffect** object. If null is passed in, the shader effect will be cleared.| 6895 6896**Error codes** 6897 6898For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6899 6900| ID| Error Message| 6901| ------- | --------------------------------------------| 6902| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6903 6904**Example** 6905 6906```ts 6907import { drawing } from '@kit.ArkGraphics2D'; 6908 6909const pen = new drawing.Pen(); 6910let shaderEffect = drawing.ShaderEffect.createLinearGradient({x: 100, y: 100}, {x: 300, y: 300}, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 6911pen.setShaderEffect(shaderEffect); 6912``` 6913 6914### setShadowLayer<sup>12+</sup> 6915 6916setShadowLayer(shadowLayer: ShadowLayer): void 6917 6918Sets a shadow layer for this pen. The shadow layer effect takes effect only when text is drawn. 6919 6920**System capability**: SystemCapability.Graphics.Drawing 6921 6922**Parameters** 6923 6924| Name | Type | Mandatory| Description | 6925| ------- | ------------------------- | ---- | --------- | 6926| shadowLayer | [ShadowLayer](#shadowlayer12) | Yes | Shadow layer. If null is passed in, the shadow layer is cleared.| 6927 6928**Error codes** 6929 6930For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6931 6932| ID| Error Message| 6933| ------- | --------------------------------------------| 6934| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6935 6936**Example** 6937 6938```ts 6939import { RenderNode } from '@kit.ArkUI'; 6940import { common2D, drawing } from '@kit.ArkGraphics2D'; 6941class DrawingRenderNode extends RenderNode { 6942 draw(context : DrawContext) { 6943 const canvas = context.canvas; 6944 let font = new drawing.Font(); 6945 font.setSize(60); 6946 let textBlob = drawing.TextBlob.makeFromString("hello", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 6947 let pen = new drawing.Pen(); 6948 pen.setStrokeWidth(2.0); 6949 let pen_color : common2D.Color = {alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00}; 6950 pen.setColor(pen_color); 6951 canvas.attachPen(pen); 6952 canvas.drawTextBlob(textBlob, 100, 100); 6953 canvas.detachPen(); 6954 let color : common2D.Color = {alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00}; 6955 let shadowLayer = drawing.ShadowLayer.create(3, -3, 3, color); 6956 pen.setShadowLayer(shadowLayer); 6957 canvas.attachPen(pen); 6958 canvas.drawTextBlob(textBlob, 100, 200); 6959 canvas.detachPen(); 6960 } 6961} 6962``` 6963 6964### setBlendMode 6965 6966setBlendMode(mode: BlendMode) : void 6967 6968Sets a blend mode for this pen. 6969 6970**System capability**: SystemCapability.Graphics.Drawing 6971 6972**Parameters** 6973 6974| Name| Type | Mandatory| Description | 6975| ------ | ----------------------- | ---- | ---------------- | 6976| mode | [BlendMode](#blendmode) | Yes | Blend mode.| 6977 6978**Error codes** 6979 6980For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6981 6982| ID| Error Message| 6983| ------- | --------------------------------------------| 6984| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6985 6986**Example** 6987 6988```ts 6989import { drawing } from '@kit.ArkGraphics2D'; 6990const pen = new drawing.Pen(); 6991pen.setBlendMode(drawing.BlendMode.SRC); 6992``` 6993 6994### setJoinStyle<sup>12+</sup> 6995 6996setJoinStyle(style: JoinStyle): void 6997 6998Sets the join style for this pen. 6999 7000**System capability**: SystemCapability.Graphics.Drawing 7001 7002**Parameters** 7003 7004| Name| Type | Mandatory| Description | 7005| ------ | ----------------------- | ---- | --------------- | 7006| style | [JoinStyle](#joinstyle12) | Yes | Join style. | 7007 7008**Error codes** 7009 7010For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7011 7012| ID| Error Message| 7013| ------- | --------------------------------------------| 7014| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7015 7016**Example** 7017 7018```ts 7019import { RenderNode } from '@kit.ArkUI'; 7020import { common2D, drawing } from '@kit.ArkGraphics2D'; 7021class DrawingRenderNode extends RenderNode { 7022 draw(context : DrawContext) { 7023 const canvas = context.canvas; 7024 const pen = new drawing.Pen(); 7025 pen.setStrokeWidth(5); 7026 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 7027 pen.setJoinStyle(drawing.JoinStyle.ROUND_JOIN); 7028 } 7029} 7030``` 7031 7032### getJoinStyle<sup>12+</sup> 7033 7034getJoinStyle(): JoinStyle 7035 7036Obtains the join style of this pen. 7037 7038**System capability**: SystemCapability.Graphics.Drawing 7039 7040**Return value** 7041 7042| Type | Description | 7043| ------------- | ---------------------- | 7044| JoinStyle | Join style. | 7045 7046**Example** 7047 7048```ts 7049import { RenderNode } from '@kit.ArkUI'; 7050import { common2D, drawing } from '@kit.ArkGraphics2D'; 7051class DrawingRenderNode extends RenderNode { 7052 draw(context : DrawContext) { 7053 const canvas = context.canvas; 7054 const pen = new drawing.Pen(); 7055 pen.setStrokeWidth(5); 7056 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 7057 pen.setJoinStyle(drawing.JoinStyle.ROUND_JOIN); 7058 let joinStyle = pen.getJoinStyle(); 7059 } 7060} 7061``` 7062 7063### setCapStyle<sup>12+</sup> 7064 7065setCapStyle(style: CapStyle): void 7066 7067Sets the cap style for this pen. 7068 7069**System capability**: SystemCapability.Graphics.Drawing 7070 7071**Parameters** 7072 7073| Name| Type | Mandatory| Description | 7074| ------ | ----------------------- | ---- | --------------------- | 7075| style | [CapStyle](#capstyle12) | Yes | A variable that describes the cap style. | 7076 7077**Error codes** 7078 7079For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7080 7081| ID| Error Message| 7082| ------- | --------------------------------------------| 7083| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7084 7085**Example** 7086 7087```ts 7088import { RenderNode } from '@kit.ArkUI'; 7089import { common2D, drawing } from '@kit.ArkGraphics2D'; 7090class DrawingRenderNode extends RenderNode { 7091 draw(context : DrawContext) { 7092 const canvas = context.canvas; 7093 const pen = new drawing.Pen(); 7094 pen.setStrokeWidth(5); 7095 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 7096 pen.setCapStyle(drawing.CapStyle.SQUARE_CAP); 7097 } 7098} 7099``` 7100 7101### getCapStyle<sup>12+</sup> 7102 7103getCapStyle(): CapStyle 7104 7105Obtains the cap style of this pen. 7106 7107**System capability**: SystemCapability.Graphics.Drawing 7108 7109**Return value** 7110 7111| Type | Description | 7112| ------------ | ------------------ | 7113| CapStyle | Cap style.| 7114 7115**Example** 7116 7117```ts 7118import { RenderNode } from '@kit.ArkUI'; 7119import { common2D, drawing } from '@kit.ArkGraphics2D'; 7120class DrawingRenderNode extends RenderNode { 7121 draw(context : DrawContext) { 7122 const canvas = context.canvas; 7123 const pen = new drawing.Pen(); 7124 pen.setStrokeWidth(5); 7125 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 7126 pen.setCapStyle(drawing.CapStyle.SQUARE_CAP); 7127 let capStyle = pen.getCapStyle(); 7128 } 7129} 7130``` 7131 7132### setDither 7133 7134setDither(dither: boolean) : void 7135 7136Enables dithering for this pen. Dithering make the drawn color more realistic. 7137 7138**System capability**: SystemCapability.Graphics.Drawing 7139 7140**Parameters** 7141 7142| Name| Type | Mandatory| Description | 7143| ------ | ------- | ---- | --------------------------------------------------------- | 7144| dither | boolean | Yes | Whether to enable dithering. The value **true** means to enable dithering, and **false** means the opposite.| 7145 7146**Error codes** 7147 7148For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7149 7150| ID| Error Message| 7151| ------- | --------------------------------------------| 7152| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7153 7154**Example** 7155 7156```ts 7157import { drawing } from '@kit.ArkGraphics2D'; 7158const pen = new drawing.Pen(); 7159pen.setDither(true); 7160``` 7161 7162### getFillPath<sup>12+</sup> 7163 7164getFillPath(src: Path, dst: Path): boolean 7165 7166Obtains the source path outline drawn using this pen and represents it using a destination path. 7167 7168**System capability**: SystemCapability.Graphics.Drawing 7169 7170**Parameters** 7171 7172| Name | Type | Mandatory| Description | 7173| -------- | -------------------------------------------- | ---- | ------------------------------- | 7174| src | [Path](#path) | Yes | Source path. | 7175| dst | [Path](#path) | Yes | Destination path.| 7176 7177**Return value** 7178 7179| Type | Description | 7180| --------------------- | -------------- | 7181| boolean | Check result. The value **true** means that the source path outline is obtained, and **false** means the opposite.| 7182 7183**Error codes** 7184 7185For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7186 7187| ID| Error Message| 7188| ------- | --------------------------------------------| 7189| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7190 7191**Example** 7192 7193```ts 7194import { drawing } from '@kit.ArkGraphics2D'; 7195let pen = new drawing.Pen(); 7196let pathSrc: drawing.Path = new drawing.Path(); 7197let pathDst: drawing.Path = new drawing.Path(); 7198pathSrc.moveTo(0, 0); 7199pathSrc.lineTo(700, 700); 7200let value = pen.getFillPath(pathSrc, pathDst); 7201``` 7202 7203### reset<sup>12+</sup> 7204 7205reset(): void 7206 7207Resets this pen to the initial state. 7208 7209**System capability**: SystemCapability.Graphics.Drawing 7210 7211**Example** 7212 7213```ts 7214import { drawing } from '@kit.ArkGraphics2D'; 7215 7216const pen = new drawing.Pen(); 7217pen.reset(); 7218``` 7219 7220## Brush 7221 7222Defines a brush, which is used to describe the style and color to fill in a shape. 7223 7224### constructor<sup>12+</sup> 7225 7226constructor() 7227 7228A constructor used to create a **Brush** object. 7229 7230**System capability**: SystemCapability.Graphics.Drawing 7231 7232**Example** 7233 7234```ts 7235import { drawing } from '@kit.ArkGraphics2D'; 7236 7237const brush = new drawing.Brush(); 7238``` 7239 7240### constructor<sup>12+</sup> 7241 7242constructor(brush: Brush) 7243 7244Copies a **Brush** object to create a new one. 7245 7246**System capability**: SystemCapability.Graphics.Drawing 7247 7248**Parameters** 7249 7250| Name| Type | Mandatory| Description | 7251| ------| ----------- | ---- | ---------------- | 7252| brush | [Brush](#brush) | Yes | **Brush** object to copy.| 7253 7254**Error codes** 7255 7256For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7257 7258| ID| Error Message| 7259| ------- | --------------------------------------------| 7260| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7261 7262**Example** 7263 7264```ts 7265import { common2D, drawing } from '@kit.ArkGraphics2D'; 7266 7267const brush = new drawing.Brush(); 7268const brushColor: common2D.Color = { alpha: 255, red: 0, green: 255, blue: 0 }; 7269brush.setColor(brushColor); 7270const newBrush = new drawing.Brush(brush); 7271``` 7272 7273### setColor 7274 7275setColor(color: common2D.Color) : void 7276 7277Sets a color for this brush. 7278 7279**System capability**: SystemCapability.Graphics.Drawing 7280 7281**Parameters** 7282 7283| Name| Type | Mandatory| Description | 7284| ------ | ---------------------------------------------------- | ---- | ---------------- | 7285| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. Each color channel is an integer ranging from 0 to 255.| 7286 7287**Error codes** 7288 7289For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7290 7291| ID| Error Message| 7292| ------- | --------------------------------------------| 7293| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7294 7295**Example** 7296 7297```ts 7298import { common2D, drawing } from '@kit.ArkGraphics2D'; 7299const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 7300const brush = new drawing.Brush(); 7301brush.setColor(color); 7302``` 7303 7304### setColor<sup>12+</sup> 7305 7306setColor(alpha: number, red: number, green: number, blue: number): void 7307 7308Sets a color for this brush. This API provides better performance than [setColor](#setcolor-1) and is recommended. 7309 7310**System capability**: SystemCapability.Graphics.Drawing 7311 7312**Parameters** 7313 7314| Name| Type | Mandatory| Description | 7315| ------ | ------ | ---- | -------------------------------------------------- | 7316| alpha | number | Yes | Alpha channel value of the color in ARGB format. The value is an integer ranging from 0 to 255. Any passed-in floating point number is rounded down.| 7317| red | number | Yes | Red channel value of the color in ARGB format. The value is an integer ranging from 0 to 255. Any passed-in floating point number is rounded down. | 7318| green | number | Yes | Green channel value of the color in ARGB format. The value is an integer ranging from 0 to 255. Any passed-in floating point number is rounded down. | 7319| blue | number | Yes | Blue channel value of the color in ARGB format. The value is an integer ranging from 0 to 255. Any passed-in floating point number is rounded down. | 7320 7321**Error codes** 7322 7323For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7324 7325| ID| Error Message| 7326| ------- | --------------------------------------------| 7327| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7328 7329**Example** 7330 7331```ts 7332import { drawing } from '@kit.ArkGraphics2D'; 7333const brush = new drawing.Brush(); 7334brush.setColor(255, 255, 0, 0); 7335``` 7336 7337### setColor<sup>18+</sup> 7338 7339setColor(color: number) : void 7340 7341Sets a color for this brush. 7342 7343**System capability**: SystemCapability.Graphics.Drawing 7344 7345**Parameters** 7346 7347| Name| Type | Mandatory| Description | 7348| ------ | ---------------------------------------------------- | ---- | ---------------- | 7349| color | number | Yes | Color in hexadecimal ARGB format.| 7350 7351**Error codes** 7352 7353For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7354 7355| ID| Error Message| 7356| ------- | --------------------------------------------| 7357| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7358 7359**Example** 7360 7361```ts 7362import { drawing } from '@kit.ArkGraphics2D'; 7363const brush = new drawing.Brush(); 7364brush.setColor(0xffff0000); 7365``` 7366 7367### getColor<sup>12+</sup> 7368 7369getColor(): common2D.Color 7370 7371Obtains the color of this brush. 7372 7373**System capability**: SystemCapability.Graphics.Drawing 7374 7375**Return value** 7376 7377| Type | Description | 7378| -------------- | -------------- | 7379| common2D.Color | Color of the brush.| 7380 7381**Example** 7382 7383```ts 7384import { common2D, drawing } from '@kit.ArkGraphics2D'; 7385 7386const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 7387const brush = new drawing.Brush(); 7388brush.setColor(color); 7389let colorGet = brush.getColor(); 7390``` 7391 7392### getHexColor<sup>18+</sup> 7393 7394getHexColor(): number 7395 7396Obtains the color of this brush. 7397 7398**System capability**: SystemCapability.Graphics.Drawing 7399 7400**Return value** 7401 7402| Type | Description | 7403| -------------- | -------------- | 7404| number | Color, represented as a 32-bit unsigned integer in hexadecimal ARGB format.| 7405 7406**Example** 7407 7408```ts 7409import { common2D, drawing } from '@kit.ArkGraphics2D'; 7410 7411let color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 7412let brush = new drawing.Brush(); 7413brush.setColor(color); 7414let hex_color: number = brush.getHexColor(); 7415console.info('getHexColor: ', hex_color.toString(16)); 7416``` 7417 7418### setAntiAlias 7419 7420setAntiAlias(aa: boolean) : void 7421 7422Enables anti-aliasing for this brush. Anti-aliasing makes the edges of the content smoother. 7423 7424**System capability**: SystemCapability.Graphics.Drawing 7425 7426**Parameters** 7427 7428| Name| Type | Mandatory| Description | 7429| ------ | ------- | ---- | ------------------------------------------------- | 7430| aa | boolean | Yes | Whether to enable anti-aliasing. The value **true** means to enable anti-aliasing, and **false** means the opposite.| 7431 7432**Error codes** 7433 7434For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7435 7436| ID| Error Message| 7437| ------- | --------------------------------------------| 7438| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7439 7440**Example** 7441 7442```ts 7443import { drawing } from '@kit.ArkGraphics2D'; 7444const brush = new drawing.Brush(); 7445brush.setAntiAlias(true); 7446``` 7447 7448### isAntiAlias<sup>12+</sup> 7449 7450isAntiAlias(): boolean 7451 7452Checks whether anti-aliasing is enabled for this brush. 7453 7454**System capability**: SystemCapability.Graphics.Drawing 7455 7456**Return value** 7457 7458| Type | Description | 7459| ------- | ------------------------- | 7460| boolean | Check result. The value **true** means that anti-aliasing is enabled, and **false** means the opposite.| 7461 7462**Example** 7463 7464```ts 7465import { drawing } from '@kit.ArkGraphics2D'; 7466 7467const brush = new drawing.Brush(); 7468let isAntiAlias = brush.isAntiAlias(); 7469``` 7470 7471### setAlpha 7472 7473setAlpha(alpha: number) : void 7474 7475Sets an alpha value for this brush. 7476 7477**System capability**: SystemCapability.Graphics.Drawing 7478 7479**Parameters** 7480 7481| Name| Type | Mandatory| Description | 7482| ------ | ------ | ---- | ---------------------------------------- | 7483| alpha | number | Yes | Alpha value. The value is an integer in the range [0, 255]. If a floating point number is passed in, the value is rounded down.| 7484 7485**Error codes** 7486 7487For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7488 7489| ID| Error Message| 7490| ------- | --------------------------------------------| 7491| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7492 7493**Example** 7494 7495```ts 7496import { drawing } from '@kit.ArkGraphics2D'; 7497const brush = new drawing.Brush(); 7498brush.setAlpha(128); 7499``` 7500 7501### getAlpha<sup>12+</sup> 7502 7503getAlpha(): number 7504 7505Obtains the alpha value of this brush. 7506 7507**System capability**: SystemCapability.Graphics.Drawing 7508 7509**Return value** 7510 7511| Type | Description | 7512| ------ | ---------------- | 7513| number | Alpha value of the brush. The return value is an integer ranging from 0 to 255.| 7514 7515**Example** 7516 7517```ts 7518import { drawing } from '@kit.ArkGraphics2D'; 7519 7520const brush = new drawing.Brush(); 7521let alpha = brush.getAlpha(); 7522``` 7523 7524### setColorFilter 7525 7526setColorFilter(filter: ColorFilter) : void 7527 7528Sets a color filter for this brush. 7529 7530**System capability**: SystemCapability.Graphics.Drawing 7531 7532**Parameters** 7533 7534| Name| Type | Mandatory| Description | 7535| ------ | --------------------------- | ---- | ------------ | 7536| filter | [ColorFilter](#colorfilter) | Yes | Color filter. If null is passed in, the color filter is cleared.| 7537 7538**Error codes** 7539 7540For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7541 7542| ID| Error Message| 7543| ------- | --------------------------------------------| 7544| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7545 7546**Example** 7547 7548```ts 7549import { drawing } from '@kit.ArkGraphics2D'; 7550const brush = new drawing.Brush(); 7551let colorFilter = drawing.ColorFilter.createLinearToSRGBGamma(); 7552brush.setColorFilter(colorFilter); 7553``` 7554 7555### setMaskFilter<sup>12+</sup> 7556 7557setMaskFilter(filter: MaskFilter): void 7558 7559Adds a mask filter for this brush. 7560 7561**System capability**: SystemCapability.Graphics.Drawing 7562 7563**Parameters** 7564 7565| Name| Type | Mandatory| Description | 7566| ------ | ------------------------- | ---- | --------- | 7567| filter | [MaskFilter](#maskfilter12) | Yes | Mask filter. If null is passed in, the mask filter is cleared.| 7568 7569**Error codes** 7570 7571For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7572 7573| ID| Error Message| 7574| ------- | --------------------------------------------| 7575| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7576 7577**Example** 7578 7579```ts 7580import { RenderNode } from '@kit.ArkUI'; 7581import { common2D, drawing } from '@kit.ArkGraphics2D'; 7582class DrawingRenderNode extends RenderNode { 7583 draw(context : DrawContext) { 7584 const canvas = context.canvas; 7585 const brush = new drawing.Brush(); 7586 let maskFilter = drawing.MaskFilter.createBlurMaskFilter(drawing.BlurType.OUTER, 10); 7587 brush.setMaskFilter(maskFilter); 7588 } 7589} 7590``` 7591 7592### setShaderEffect<sup>12+</sup> 7593 7594setShaderEffect(shaderEffect: ShaderEffect): void 7595 7596Sets the shader effect for this brush. 7597 7598**System capability**: SystemCapability.Graphics.Drawing 7599 7600**Parameters** 7601 7602| Name | Type | Mandatory| Description | 7603| ------- | ------------------------- | ---- | ------------ | 7604| shaderEffect | [ShaderEffect](#shadereffect12) | Yes | **ShaderEffect** object. If null is passed in, the shader effect will be cleared.| 7605 7606**Error codes** 7607 7608For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7609 7610| ID| Error Message| 7611| ------- | --------------------------------------------| 7612| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7613 7614**Example** 7615 7616```ts 7617import { drawing } from '@kit.ArkGraphics2D'; 7618 7619const brush = new drawing.Brush(); 7620let shaderEffect = drawing.ShaderEffect.createLinearGradient({x: 100, y: 100}, {x: 300, y: 300}, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 7621brush.setShaderEffect(shaderEffect); 7622``` 7623 7624### setShadowLayer<sup>12+</sup> 7625 7626setShadowLayer(shadowLayer: ShadowLayer): void 7627 7628Sets a shadow layer for this brush. The shadow layer effect takes effect only when text is drawn. 7629 7630**System capability**: SystemCapability.Graphics.Drawing 7631 7632**Parameters** 7633 7634| Name | Type | Mandatory| Description | 7635| ------- | ------------------------- | ---- | --------- | 7636| shadowLayer | [ShadowLayer](#shadowlayer12) | Yes | Shadow layer. If null is passed in, the shadow layer is cleared.| 7637 7638**Error codes** 7639 7640For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7641 7642| ID| Error Message| 7643| ------- | --------------------------------------------| 7644| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7645 7646**Example** 7647 7648```ts 7649import { RenderNode } from '@kit.ArkUI'; 7650import { common2D, drawing } from '@kit.ArkGraphics2D'; 7651class DrawingRenderNode extends RenderNode { 7652 draw(context : DrawContext) { 7653 const canvas = context.canvas; 7654 let font = new drawing.Font(); 7655 font.setSize(60); 7656 7657 let textBlob = drawing.TextBlob.makeFromString("hello", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 7658 let pen = new drawing.Pen(); 7659 pen.setStrokeWidth(2.0); 7660 7661 let pen_color : common2D.Color = {alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00}; 7662 pen.setColor(pen_color); 7663 canvas.attachPen(pen); 7664 canvas.drawTextBlob(textBlob, 100, 100); 7665 canvas.detachPen(); 7666 7667 let color : common2D.Color = {alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00}; 7668 let shadowLayer = drawing.ShadowLayer.create(3, -3, 3, color); 7669 pen.setShadowLayer(shadowLayer); 7670 canvas.attachPen(pen); 7671 canvas.drawTextBlob(textBlob, 100, 200); 7672 canvas.detachPen(); 7673 7674 let brush = new drawing.Brush(); 7675 let brush_color : common2D.Color = {alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00}; 7676 brush.setColor(brush_color); 7677 canvas.attachBrush(brush); 7678 canvas.drawTextBlob(textBlob, 300, 100); 7679 canvas.detachBrush(); 7680 7681 brush.setShadowLayer(shadowLayer); 7682 canvas.attachBrush(brush); 7683 canvas.drawTextBlob(textBlob, 300, 200); 7684 canvas.detachBrush(); 7685 } 7686} 7687``` 7688 7689### setBlendMode 7690 7691setBlendMode(mode: BlendMode) : void 7692 7693Sets a blend mode for this brush. 7694 7695**System capability**: SystemCapability.Graphics.Drawing 7696 7697**Parameters** 7698 7699| Name| Type | Mandatory| Description | 7700| ------ | ----------------------- | ---- | ---------------- | 7701| mode | [BlendMode](#blendmode) | Yes | Blend mode.| 7702 7703**Error codes** 7704 7705For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7706 7707| ID| Error Message| 7708| ------- | --------------------------------------------| 7709| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7710 7711**Example** 7712 7713```ts 7714import { drawing } from '@kit.ArkGraphics2D'; 7715const brush = new drawing.Brush(); 7716brush.setBlendMode(drawing.BlendMode.SRC); 7717``` 7718 7719### setImageFilter<sup>12+</sup> 7720 7721setImageFilter(filter: ImageFilter | null): void 7722 7723Sets an image filter for this brush. 7724 7725**System capability**: SystemCapability.Graphics.Drawing 7726 7727**Parameters** 7728 7729| Name| Type | Mandatory| Description | 7730| ------ | ------ | ---- | ----------------------- | 7731| filter | [ImageFilter](#imagefilter12) \| null | Yes | Image filter. If null is passed in, the image filter effect of the brush will be cleared.| 7732 7733**Error codes** 7734 7735For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7736 7737| ID| Error Message| 7738| ------- | --------------------------------------------| 7739| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types. | 7740 7741**Example** 7742 7743```ts 7744import {drawing} from '@kit.ArkGraphics2D'; 7745let brush = new drawing.Brush(); 7746let imgFilter = drawing.ImageFilter.createBlurImageFilter(5, 10, drawing.TileMode.DECAL); 7747brush.setImageFilter(imgFilter); 7748brush.setImageFilter(null); 7749``` 7750 7751### getColorFilter<sup>12+</sup> 7752 7753getColorFilter(): ColorFilter 7754 7755Obtains the color filter of this brush. 7756 7757**System capability**: SystemCapability.Graphics.Drawing 7758 7759**Return value** 7760 7761| Type | Description | 7762| --------------------------- | ------------------ | 7763| [ColorFilter](#colorfilter) | Color filter.| 7764 7765**Example** 7766 7767```ts 7768import {drawing} from '@kit.ArkGraphics2D'; 7769let brush = new drawing.Brush(); 7770let setColorFilter = drawing.ColorFilter.createSRGBGammaToLinear(); 7771brush.setColorFilter(setColorFilter); 7772let filter = brush.getColorFilter(); 7773``` 7774 7775### reset<sup>12+</sup> 7776 7777reset(): void 7778 7779Resets this brush to the initial state. 7780 7781**System capability**: SystemCapability.Graphics.Drawing 7782 7783**Example** 7784 7785```ts 7786import { drawing } from '@kit.ArkGraphics2D'; 7787 7788const brush = new drawing.Brush(); 7789brush.reset(); 7790``` 7791 7792## ScaleToFit<sup>12+</sup> 7793 7794Enumerates the modes of scaling a source rectangle into a destination rectangle. 7795 7796**System capability**: SystemCapability.Graphics.Drawing 7797 7798| Name | Value | Description | 7799| ---------------------- | ---- | ------------------------------ | 7800| FILL_SCALE_TO_FIT | 0 | Scales the source rectangle to completely fill the destination rectangle, potentially changing the aspect ratio of the source rectangle. | 7801| START_SCALE_TO_FIT | 1 | Scales the source rectangle, preserving its aspect ratio, to align it to the upper left corner of the destination rectangle.| 7802| CENTER_SCALE_TO_FIT | 2 | Scales the source rectangle, preserving its aspect ratio, to align it to the center of the destination rectangle. | 7803| END_SCALE_TO_FIT | 3 | Scales the source rectangle, preserving its aspect ratio, to align it to the lower right corner of the destination rectangle. | 7804 7805## Matrix<sup>12+</sup> 7806 7807Implements a matrix. 7808 7809A 3 x 3 matrix is shown as below. 7810 7811 7812 7813Elements in the matrix from left to right and from top to bottom respectively represent a horizontal scale coefficient, a horizontal skew coefficient, a horizontal translation coefficient, a vertical skew coefficient, a vertical scale coefficient, a vertical translation coefficient, an X-axis perspective coefficient, a Y-axis perspective coefficient, and a perspective scale coefficient. 7814If (x<sub>1</sub>, y<sub>1</sub>) is the source coordinate point, (x<sub>2</sub>, y<sub>2</sub>) is the coordinate point obtained by transforming the source coordinate point using the matrix, then the relationship between the two coordinate points is as follows: 7815 7816 7817 7818### constructor<sup>12+</sup> 7819 7820constructor() 7821 7822Creates a **Matrix** object. 7823 7824**System capability**: SystemCapability.Graphics.Drawing 7825 7826**Example** 7827 7828```ts 7829import { drawing } from '@kit.ArkGraphics2D'; 7830 7831let matrix = new drawing.Matrix(); 7832``` 7833 7834### setRotation<sup>12+</sup> 7835 7836setRotation(degree: number, px: number, py: number): void 7837 7838Sets this matrix as an identity matrix and rotates it by a given degree around the rotation point (px, py). 7839 7840**System capability**: SystemCapability.Graphics.Drawing 7841 7842**Parameters** 7843 7844| Name | Type | Mandatory | Description | 7845| ----------- | ---------------------------------------- | ---- | ------------------- | 7846| degree | number | Yes | Angle to rotate, in degrees. A positive number indicates a clockwise rotation, and a negative number indicates a counterclockwise rotation. The value is a floating point number.| 7847| px | number | Yes | X coordinate of the rotation point. The value is a floating point number. | 7848| py | number | Yes | Y coordinate of the rotation point. The value is a floating point number. | 7849 7850**Error codes** 7851 7852For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7853 7854| ID| Error Message| 7855| ------- | --------------------------------------------| 7856| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7857 7858**Example** 7859 7860```ts 7861import { drawing } from '@kit.ArkGraphics2D'; 7862 7863let matrix = new drawing.Matrix(); 7864matrix.setRotation(90, 100, 100); 7865``` 7866 7867### setScale<sup>12+</sup> 7868 7869setScale(sx: number, sy: number, px: number, py: number): void 7870 7871Sets this matrix as an identity matrix and scales it with the coefficients (sx, sy) at the scale point (px, py). 7872 7873**System capability**: SystemCapability.Graphics.Drawing 7874 7875**Parameters** 7876 7877| Name | Type | Mandatory | Description | 7878| ----------- | ---------------------------------------- | ---- | ------------------- | 7879| sx | number | Yes | Scale coefficient along the X axis. If a negative number is passed in, the matrix is mirrored around y = px before being scaled. The value is a floating point number. | 7880| sy | number | Yes | Scale coefficient along the Y axis. If a negative number is passed in, the matrix is mirrored around x = py before being scaled. The value is a floating point number. | 7881| px | number | Yes | X coordinate of the scale point. The value is a floating point number. | 7882| py | number | Yes | Y coordinate of the scale point. The value is a floating point number. | 7883 7884**Error codes** 7885 7886For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7887 7888| ID| Error Message| 7889| ------- | --------------------------------------------| 7890| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7891 7892**Example** 7893 7894```ts 7895import { drawing } from '@kit.ArkGraphics2D'; 7896 7897let matrix = new drawing.Matrix(); 7898matrix.setScale(100, 100, 150, 150); 7899``` 7900 7901### setTranslation<sup>12+</sup> 7902 7903setTranslation(dx: number, dy: number): void 7904 7905Sets this matrix as an identity matrix and translates it by a given distance (dx, dy). 7906 7907**System capability**: SystemCapability.Graphics.Drawing 7908 7909**Parameters** 7910 7911| Name | Type | Mandatory | Description | 7912| ----------- | ---------------------------------------- | ---- | ------------------- | 7913| dx | number | Yes | Horizontal distance to translate. A positive number indicates a translation towards the positive direction of the X axis, and a negative number indicates a translation towards the negative direction of the X axis. The value is a floating point number. | 7914| dy | number | Yes | Vertical distance to translate. A positive number indicates a translation towards the positive direction of the Y axis, and a negative number indicates a translation towards the negative direction of the Y axis. The value is a floating point number. | 7915 7916**Error codes** 7917 7918For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7919 7920| ID| Error Message| 7921| ------- | --------------------------------------------| 7922| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7923 7924**Example** 7925 7926```ts 7927import { drawing } from '@kit.ArkGraphics2D'; 7928 7929let matrix = new drawing.Matrix(); 7930matrix.setTranslation(100, 100); 7931``` 7932 7933### setMatrix<sup>12+</sup> 7934 7935setMatrix(values: Array\<number>): void 7936 7937Sets parameters for this matrix. 7938 7939**System capability**: SystemCapability.Graphics.Drawing 7940 7941**Parameters** 7942 7943| Name| Type | Mandatory| Description | 7944| ------ | ---------------------------------------------------- | ---- | ---------------- | 7945| values | Array\<number> | Yes | Floating-point array that holds the parameter values, with the array length set to 9. The values in the array respectively represent a horizontal scale coefficient, a horizontal skew coefficient, a horizontal translation coefficient, a vertical skew coefficient, a vertical scale coefficient, a vertical translation coefficient, an X-axis perspective coefficient, a Y-axis perspective coefficient, and a perspective scale coefficient, in ascending order of indexes.| 7946 7947**Error codes** 7948 7949For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7950 7951| ID| Error Message| 7952| ------- | --------------------------------------------| 7953| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 7954 7955**Example** 7956 7957```ts 7958import { drawing } from '@kit.ArkGraphics2D'; 7959 7960let matrix = new drawing.Matrix(); 7961let value : Array<number> = [2, 2, 2, 2, 2, 2, 2, 2, 2]; 7962matrix.setMatrix(value); 7963``` 7964 7965### preConcat<sup>12+</sup> 7966 7967preConcat(matrix: Matrix): void 7968 7969Preconcats the existing matrix with the passed-in matrix. 7970 7971**System capability**: SystemCapability.Graphics.Drawing 7972 7973**Parameters** 7974 7975| Name| Type | Mandatory| Description | 7976| ------ | ---------------------------------------------------- | ---- | ---------------- | 7977| matrix | [Matrix](#matrix12) | Yes | **Matrix** object, which is on the right of a multiplication expression.| 7978 7979**Error codes** 7980 7981For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7982 7983| ID| Error Message| 7984| ------- | --------------------------------------------| 7985| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7986 7987**Example** 7988 7989```ts 7990import { drawing } from '@kit.ArkGraphics2D'; 7991 7992let matrix1 = new drawing.Matrix(); 7993matrix1.setMatrix([2, 1, 3, 1, 2, 1, 3, 1, 2]); 7994let matrix2 = new drawing.Matrix(); 7995matrix2.setMatrix([-2, 1, 3, 1, 0, -1, 3, -1, 2]); 7996matrix1.preConcat(matrix2); 7997``` 7998 7999### isEqual<sup>12+</sup> 8000 8001isEqual(matrix: Matrix): Boolean 8002 8003Checks whether this matrix is equal to another matrix. 8004 8005**System capability**: SystemCapability.Graphics.Drawing 8006 8007**Parameters** 8008 8009| Name| Type | Mandatory| Description | 8010| ------ | ---------------------------------------------------- | ---- | ---------------- | 8011| matrix | [Matrix](#matrix12) | Yes | Matrix to compare.| 8012 8013**Return value** 8014 8015| Type | Description | 8016| --------------------------- | -------------------- | 8017| Boolean | Comparison result of the two matrices. The value **true** means that the two matrices are equal, and **false** means the opposite.| 8018 8019**Error codes** 8020 8021For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8022 8023| ID| Error Message| 8024| ------- | --------------------------------------------| 8025| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8026 8027**Example** 8028 8029```ts 8030import { drawing } from '@kit.ArkGraphics2D'; 8031 8032let matrix1 = new drawing.Matrix(); 8033matrix1.setMatrix([2, 1, 3, 1, 2, 1, 3, 1, 2]); 8034let matrix2 = new drawing.Matrix(); 8035matrix2.setMatrix([-2, 1, 3, 1, 0, -1, 3, -1, 2]); 8036if (matrix1.isEqual(matrix2)) { 8037 console.info("matrix1 and matrix2 are equal."); 8038} else { 8039 console.info("matrix1 and matrix2 are not equal."); 8040} 8041``` 8042 8043### invert<sup>12+</sup> 8044 8045invert(matrix: Matrix): Boolean 8046 8047Inverts this matrix and returns the result. 8048 8049**System capability**: SystemCapability.Graphics.Drawing 8050 8051**Parameters** 8052 8053| Name| Type | Mandatory| Description | 8054| ------ | ---------------------------------------------------- | ---- | ---------------- | 8055| matrix | [Matrix](#matrix12) | Yes | **Matrix** object used to store the inverted matrix.| 8056 8057**Return value** 8058 8059| Type | Description | 8060| --------------------------- | -------------------- | 8061| Boolean | Check result. The value **true** means that the matrix is revertible and the **matrix** object is filled with the inverted matrix, and **false** means that the matrix is not revertible and the **matrix** object is filled with the current matrix (not changed).| 8062 8063**Error codes** 8064 8065For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8066 8067| ID| Error Message| 8068| ------- | --------------------------------------------| 8069| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8070 8071**Example** 8072 8073```ts 8074import { drawing } from '@kit.ArkGraphics2D'; 8075 8076let matrix1 = new drawing.Matrix(); 8077matrix1.setMatrix([2, 1, 3, 1, 2, 1, 3, 1, 2]); 8078let matrix2 = new drawing.Matrix(); 8079matrix2.setMatrix([-2, 1, 3, 1, 0, -1, 3, -1, 2]); 8080if (matrix1.invert(matrix2)) { 8081 console.info("matrix1 is invertible and matrix2 is set as an inverse matrix of the matrix1."); 8082} else { 8083 console.info("matrix1 is not invertible and matrix2 is not changed."); 8084} 8085``` 8086 8087### isIdentity<sup>12+</sup> 8088 8089isIdentity(): Boolean 8090 8091Checks whether this matrix is an identity matrix. 8092 8093**System capability**: SystemCapability.Graphics.Drawing 8094 8095**Return value** 8096 8097| Type | Description | 8098| --------------------------- | -------------------- | 8099| Boolean | Check result. The value **true** means that the matrix is an identity matrix, and **false** means the opposite.| 8100 8101**Example** 8102 8103```ts 8104import { drawing } from '@kit.ArkGraphics2D'; 8105 8106let matrix = new drawing.Matrix(); 8107if (matrix.isIdentity()) { 8108 console.info("matrix is identity."); 8109} else { 8110 console.info("matrix is not identity."); 8111} 8112``` 8113 8114### getValue<sup>12+</sup> 8115 8116getValue(index: number): number 8117 8118Obtains the value of a given index in this matrix. The index ranges from 0 to 8. 8119 8120**System capability**: SystemCapability.Graphics.Drawing 8121 8122**Parameters** 8123 8124| Name | Type | Mandatory| Description | 8125| --------------- | ------- | ---- | ----------------------------------------------------------- | 8126| index | number | Yes | Index. The value is an integer ranging from 0 to 8.| 8127 8128**Return value** 8129 8130| Type | Description | 8131| --------------------- | -------------- | 8132| number | Value obtained, which is an integer.| 8133 8134**Error codes** 8135 8136For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8137 8138| ID| Error Message| 8139| ------- | --------------------------------------------| 8140| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types;3. Parameter verification failed.| 8141 8142**Example** 8143 8144```ts 8145import {drawing} from "@kit.ArkGraphics2D" 8146let matrix = new drawing.Matrix(); 8147for (let i = 0; i < 9; i++) { 8148 console.info("matrix "+matrix.getValue(i).toString()); 8149} 8150``` 8151 8152### postRotate<sup>12+</sup> 8153 8154postRotate(degree: number, px: number, py: number): void 8155 8156Post multiplies this matrix by a matrix that is derived from an identity matrix after it has been rotated by a given degree around the rotation point (px, py). 8157 8158**System capability**: SystemCapability.Graphics.Drawing 8159 8160**Parameters** 8161 8162| Name | Type | Mandatory| Description | 8163| --------------- | ------- | ---- | ----------------------------------------------------------- | 8164| degree | number | Yes | Angle to rotate, in degrees. A positive number indicates a clockwise rotation, and a negative number indicates a counterclockwise rotation. The value is a floating point number.| 8165| px | number | Yes | X coordinate of the rotation point. The value is a floating point number.| 8166| py | number | Yes | Y coordinate of the rotation point. The value is a floating point number.| 8167 8168**Error codes** 8169 8170For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8171 8172| ID| Error Message| 8173| ------- | --------------------------------------------| 8174| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8175 8176**Example** 8177 8178```ts 8179import {drawing} from "@kit.ArkGraphics2D" 8180let matrix = new drawing.Matrix(); 8181let degree: number = 2; 8182let px: number = 3; 8183let py: number = 4; 8184matrix.postRotate(degree, px, py); 8185console.info("matrix= "+matrix.getAll().toString()); 8186``` 8187 8188### postScale<sup>12+</sup> 8189 8190postScale(sx: number, sy: number, px: number, py: number): void 8191 8192Post multiplies this matrix by a matrix that is derived from an identity matrix after it has been scaled with the coefficient (sx, sy) at the scale point (px, py). 8193 8194**System capability**: SystemCapability.Graphics.Drawing 8195 8196**Parameters** 8197 8198| Name | Type | Mandatory| Description | 8199| --------------- | ------- | ---- | ----------------------------------------------------------- | 8200| sx | number | Yes | Scale coefficient along the X axis. If a negative number is passed in, the matrix is mirrored around y = px before being scaled. The value is a floating point number.| 8201| sy | number | Yes | Scale coefficient along the Y axis. If a negative number is passed in, the matrix is mirrored around x = py before being scaled. The value is a floating point number.| 8202| px | number | Yes | X coordinate of the scale point. The value is a floating point number.| 8203| py | number | Yes | Y coordinate of the scale point. The value is a floating point number.| 8204 8205**Error codes** 8206 8207For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8208 8209| ID| Error Message| 8210| ------- | --------------------------------------------| 8211| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8212 8213**Example** 8214 8215```ts 8216import {drawing} from "@kit.ArkGraphics2D" 8217let matrix = new drawing.Matrix(); 8218let sx: number = 2; 8219let sy: number = 0.5; 8220let px: number = 1; 8221let py: number = 1; 8222matrix.postScale(sx, sy, px, py); 8223console.info("matrix= "+matrix.getAll().toString()); 8224``` 8225 8226### postTranslate<sup>12+</sup> 8227 8228postTranslate(dx: number, dy: number): void 8229 8230Post multiplies this matrix by a matrix that is derived from an identity matrix after it has been translated by a given distance (dx, dy). 8231 8232**System capability**: SystemCapability.Graphics.Drawing 8233 8234**Parameters** 8235 8236| Name | Type | Mandatory| Description | 8237| --------------- | ------- | ---- | ----------------------------------------------------------- | 8238| dx | number | Yes | Horizontal distance to translate. A positive number indicates a translation towards the positive direction of the X axis, and a negative number indicates a translation towards the negative direction of the X axis. The value is a floating point number.| 8239| dy | number | Yes | Vertical distance to translate. A positive number indicates a translation towards the positive direction of the Y axis, and a negative number indicates a translation towards the negative direction of the Y axis. The value is a floating point number.| 8240 8241**Error codes** 8242 8243For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8244 8245| ID| Error Message| 8246| ------- | --------------------------------------------| 8247| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8248 8249**Example** 8250 8251```ts 8252import {drawing} from "@kit.ArkGraphics2D" 8253let matrix = new drawing.Matrix(); 8254let dx: number = 3; 8255let dy: number = 4; 8256matrix.postTranslate(dx, dy); 8257console.info("matrix= "+matrix.getAll().toString()); 8258``` 8259 8260### preRotate<sup>12+</sup> 8261 8262preRotate(degree: number, px: number, py: number): void 8263 8264Premultiplies this matrix by a matrix that is derived from an identity matrix after it has been rotated by a given degree around the rotation point (px, py). 8265 8266**System capability**: SystemCapability.Graphics.Drawing 8267 8268**Parameters** 8269 8270| Name | Type | Mandatory| Description | 8271| --------------- | ------- | ---- | ----------------------------------------------------------- | 8272| degree | number | Yes | Angle to rotate, in degrees. A positive number indicates a clockwise rotation, and a negative number indicates a counterclockwise rotation. The value is a floating point number.| 8273| px | number | Yes | X coordinate of the rotation point. The value is a floating point number.| 8274| py | number | Yes | Y coordinate of the rotation point. The value is a floating point number.| 8275 8276**Error codes** 8277 8278For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8279 8280| ID| Error Message| 8281| ------- | --------------------------------------------| 8282| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8283 8284**Example** 8285 8286```ts 8287import {drawing} from "@kit.ArkGraphics2D" 8288let matrix = new drawing.Matrix(); 8289let degree: number = 2; 8290let px: number = 3; 8291let py: number = 4; 8292matrix.preRotate(degree, px, py); 8293console.info("matrix= "+matrix.getAll().toString()); 8294``` 8295 8296### preScale<sup>12+</sup> 8297 8298preScale(sx: number, sy: number, px: number, py: number): void 8299 8300Premultiplies this matrix by a matrix that is derived from an identity matrix after it has been scaled with the coefficient (sx, sy) at the scale point (px, py). 8301 8302**System capability**: SystemCapability.Graphics.Drawing 8303 8304**Parameters** 8305 8306| Name | Type | Mandatory| Description | 8307| --------------- | ------- | ---- | ----------------------------------------------------------- | 8308| sx | number | Yes | Scale coefficient along the X axis. If a negative number is passed in, the matrix is mirrored around y = px before being scaled. The value is a floating point number.| 8309| sy | number | Yes | Scale coefficient along the Y axis. If a negative number is passed in, the matrix is mirrored around x = py before being scaled. The value is a floating point number.| 8310| px | number | Yes | X coordinate of the scale point. The value is a floating point number.| 8311| py | number | Yes | Y coordinate of the scale point. The value is a floating point number.| 8312 8313**Error codes** 8314 8315For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8316 8317| ID| Error Message| 8318| ------- | --------------------------------------------| 8319| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8320 8321**Example** 8322 8323```ts 8324import {drawing} from "@kit.ArkGraphics2D" 8325let matrix = new drawing.Matrix(); 8326let sx: number = 2; 8327let sy: number = 0.5; 8328let px: number = 1; 8329let py: number = 1; 8330matrix.preScale(sx, sy, px, py); 8331console.info("matrix"+matrix.getAll().toString()); 8332``` 8333 8334### preTranslate<sup>12+</sup> 8335 8336preTranslate(dx: number, dy: number): void 8337 8338Premultiplies this matrix by a matrix that is derived from an identity matrix after it has been translated by a given distance (dx, dy). 8339 8340**System capability**: SystemCapability.Graphics.Drawing 8341 8342**Parameters** 8343 8344| Name | Type | Mandatory| Description | 8345| --------------- | ------- | ---- | ----------------------------------------------------------- | 8346| dx | number | Yes | Horizontal distance to translate. A positive number indicates a translation towards the positive direction of the X axis, and a negative number indicates a translation towards the negative direction of the X axis. The value is a floating point number.| 8347| dy | number | Yes | Vertical distance to translate. A positive number indicates a translation towards the positive direction of the Y axis, and a negative number indicates a translation towards the negative direction of the Y axis. The value is a floating point number.| 8348 8349**Error codes** 8350 8351For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8352 8353| ID| Error Message| 8354| ------- | --------------------------------------------| 8355| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8356 8357**Example** 8358 8359```ts 8360import {drawing} from "@kit.ArkGraphics2D" 8361let matrix = new drawing.Matrix(); 8362let dx: number = 3; 8363let dy: number = 4; 8364matrix.preTranslate(dx, dy); 8365console.info("matrix"+matrix.getAll().toString()); 8366``` 8367 8368### reset<sup>12+</sup> 8369 8370reset(): void 8371 8372Resets this matrix to an identity matrix. 8373 8374**System capability**: SystemCapability.Graphics.Drawing 8375 8376**Example** 8377 8378```ts 8379import {drawing} from "@kit.ArkGraphics2D" 8380let matrix = new drawing.Matrix(); 8381matrix.postScale(2, 3, 4, 5); 8382matrix.reset(); 8383console.info("matrix= "+matrix.getAll().toString()); 8384``` 8385 8386### mapPoints<sup>12+</sup> 8387 8388mapPoints(src: Array\<common2D.Point>): Array\<common2D.Point> 8389 8390Maps a source point array to a destination point array by means of matrix transformation. 8391 8392**System capability**: SystemCapability.Graphics.Drawing 8393 8394**Parameters** 8395 8396| Name | Type | Mandatory| Description | 8397| --------------- | ------- | ---- | ----------------------------------------------------------- | 8398| src | Array\<[common2D.Point](js-apis-graphics-common2D.md#point)> | Yes | Array of source points.| 8399 8400**Return value** 8401 8402| Type | Description | 8403| --------------------- | -------------- | 8404| Array\<[common2D.Point](js-apis-graphics-common2D.md#point)> | Array of points obtained.| 8405 8406**Error codes** 8407 8408For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8409 8410| ID| Error Message| 8411| ------- | --------------------------------------------| 8412| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8413 8414**Example** 8415 8416```ts 8417import {drawing,common2D} from "@kit.ArkGraphics2D" 8418let src: Array<common2D.Point> = []; 8419src.push({x: 15, y: 20}); 8420src.push({x: 20, y: 15}); 8421src.push({x: 30, y: 10}); 8422let matrix = new drawing.Matrix(); 8423let dst: Array<common2D.Point> = matrix.mapPoints(src); 8424console.info("matrix= src: "+JSON.stringify(src)); 8425console.info("matrix= dst: "+JSON.stringify(dst)); 8426``` 8427 8428### getAll<sup>12+</sup> 8429 8430getAll(): Array\<number> 8431 8432Obtains all element values of this matrix. 8433 8434**System capability**: SystemCapability.Graphics.Drawing 8435 8436**Return value** 8437 8438| Type | Description | 8439| --------------------- | -------------- | 8440| Array\<number> | Array of matrix values obtained. The length is 9. Each value is a floating point number.| 8441 8442**Example** 8443 8444```ts 8445import {drawing} from "@kit.ArkGraphics2D" 8446let matrix = new drawing.Matrix(); 8447console.info("matrix "+ matrix.getAll()); 8448``` 8449 8450### mapRect<sup>12+</sup> 8451 8452mapRect(dst: common2D.Rect, src: common2D.Rect): boolean 8453 8454Sets the destination rectangle to the bounding rectangle of the shape obtained after transforming the source rectangle with a matrix transformation. As shown in the figure below, the blue rectangle represents the source rectangle, and the yellow rectangle is the shape obtained after a matrix transformation is applied to the source rectangle. Since the edges of the yellow rectangle are not aligned with the coordinate axes, it cannot be represented by a rectangle object. To address this issue, a destination rectangle (black rectangle) is defined as the bounding rectangle. 8455 8456 8457 8458**System capability**: SystemCapability.Graphics.Drawing 8459 8460**Parameters** 8461 8462| Name | Type | Mandatory| Description | 8463| --------------- | ------- | ---- | ----------------------------------------------------------- | 8464| dst | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | **Rectangle** object, which is used to store the bounding rectangle.| 8465| src |[common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Source rectangle.| 8466 8467**Return value** 8468 8469| Type | Description | 8470| --------------------- | -------------- | 8471| boolean | Check result. The value **true** means that the shape retains a rectangular form, and **false** means the opposite.| 8472 8473**Error codes** 8474 8475For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8476 8477| ID| Error Message| 8478| ------- | --------------------------------------------| 8479| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8480 8481**Example** 8482 8483```ts 8484import {drawing,common2D} from "@kit.ArkGraphics2D" 8485let dst: common2D.Rect = { left: 100, top: 20, right: 130, bottom: 60 }; 8486let src: common2D.Rect = { left: 100, top: 80, right: 130, bottom: 120 }; 8487let matrix = new drawing.Matrix(); 8488if (matrix.mapRect(dst, src)) { 8489 console.info("matrix= dst "+JSON.stringify(dst)); 8490} 8491``` 8492 8493### setRectToRect<sup>12+</sup> 8494 8495setRectToRect(src: common2D.Rect, dst: common2D.Rect, scaleToFit: ScaleToFit): boolean 8496 8497Sets this matrix to a transformation matrix that maps a source rectangle to a destination rectangle. 8498 8499**System capability**: SystemCapability.Graphics.Drawing 8500 8501**Parameters** 8502 8503| Name | Type | Mandatory| Description | 8504| --------------- | ------- | ---- | ----------------------------------------------------------- | 8505| src | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Source rectangle.| 8506| dst | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Destination rectangle.| 8507| scaleToFit | [ScaleToFit](#scaletofit12) | Yes | Mapping mode from the source rectangle to the target rectangle.| 8508 8509**Return value** 8510 8511| Type | Description | 8512| --------------------- | -------------- | 8513| boolean | Check result. The value **true** means that the matrix can represent the mapping, and **false** means the opposite. In particular, if either the width or the height of the source rectangle is less than or equal to 0, the API returns **false** and sets the matrix to an identity matrix. If either the width or height of the destination rectangle is less than or equal to 0, the API returns **true** and sets the matrix to a matrix with all values 0, except for a perspective scaling coefficient of 1.| 8514 8515**Error codes** 8516 8517For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8518 8519| ID| Error Message| 8520| ------- | --------------------------------------------| 8521| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 8522 8523**Example** 8524 8525```ts 8526import {drawing,common2D} from "@kit.ArkGraphics2D" 8527let src: common2D.Rect = { left: 100, top: 100, right: 300, bottom: 300 }; 8528let dst: common2D.Rect = { left: 200, top: 200, right: 600, bottom: 600 }; 8529let scaleToFit: drawing.ScaleToFit = drawing.ScaleToFit.FILL_SCALE_TO_FIT 8530let matrix = new drawing.Matrix(); 8531if (matrix.setRectToRect(src, dst, scaleToFit)) { 8532 console.info("matrix"+matrix.getAll().toString()); 8533} 8534``` 8535 8536### setPolyToPoly<sup>12+</sup> 8537 8538setPolyToPoly(src: Array\<common2D.Point>, dst: Array\<common2D.Point>, count: number): boolean 8539 8540Sets this matrix to a transformation matrix that maps the source point array to the destination point array. Both the number of source points and that of destination points must be in the range [0, 4]. 8541 8542**System capability**: SystemCapability.Graphics.Drawing 8543 8544**Parameters** 8545 8546| Name | Type | Mandatory| Description | 8547| --------------- | ------- | ---- | ----------------------------------------------------------- | 8548| src | Array\<[common2D.Point](js-apis-graphics-common2D.md#point)> | Yes | Array of source points. The array length must be the same as the value of **count**.| 8549| dst | Array\<[common2D.Point](js-apis-graphics-common2D.md#point)> | Yes | Array of destination points. The array length must be the same as the value of **count**.| 8550| count | number | Yes | Number of points in each array. The value is an integer.| 8551 8552**Return value** 8553 8554| Type | Description | 8555| --------------------- | -------------- | 8556| boolean | Check result. The value **true** means that the setting is successful, and **false** means the opposite.| 8557 8558**Error codes** 8559 8560For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8561 8562| ID| Error Message| 8563| ------- | --------------------------------------------| 8564| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8565 8566**Example** 8567 8568```ts 8569import {drawing,common2D} from "@kit.ArkGraphics2D" 8570let srcPoints: Array<common2D.Point> = [ {x: 10, y: 20}, {x: 200, y: 150} ]; 8571let dstPoints: Array<common2D.Point> = [{ x:0, y: 10 }, { x:300, y: 600 }]; 8572let matrix = new drawing.Matrix(); 8573if (matrix.setPolyToPoly(srcPoints, dstPoints, 2)) { 8574 console.info("matrix"+matrix.getAll().toString()); 8575} 8576``` 8577 8578## RoundRect<sup>12+</sup> 8579 8580Implements a rounded rectangle. 8581 8582### constructor<sup>12+</sup> 8583 8584constructor(rect: common2D.Rect, xRadii: number, yRadii: number) 8585 8586A constructor used to create a **RoundRect** object. A rounded rectangle is created when both **xRadii** and **yRadii** are greater than 0. Otherwise, only a rectangle is created. 8587 8588**System capability**: SystemCapability.Graphics.Drawing 8589 8590**Parameters** 8591 8592| Name | Type | Mandatory | Description | 8593| ----------- | ---------------------------------------- | ---- | ------------------- | 8594| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangle that encloses the rounded rectangle to create. | 8595| xRadii | number | Yes | Radius of the rounded corner on the X axis. The value is a floating point number. A negative number is invalid. | 8596| yRadii | number | Yes | Radius of the rounded corner on the Y axis. The value is a floating point number. A negative number is invalid. | 8597 8598**Error codes** 8599 8600For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8601 8602| ID| Error Message| 8603| ------- | --------------------------------------------| 8604| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8605 8606**Example** 8607 8608```ts 8609import { common2D, drawing } from '@kit.ArkGraphics2D'; 8610 8611let rect: common2D.Rect = {left : 100, top : 100, right : 500, bottom : 300}; 8612let roundRect = new drawing.RoundRect(rect, 50, 50); 8613``` 8614### setCorner<sup>12+</sup> 8615 8616setCorner(pos: CornerPos, x: number, y: number): void 8617 8618Sets the radii of the specified rounded corner in this rounded rectangle. 8619 8620**System capability**: SystemCapability.Graphics.Drawing 8621 8622**Parameters** 8623 8624| Name | Type | Mandatory| Description | 8625| -------- | -------------------------------------------- | ---- | ------------------------------- | 8626| pos | [CornerPos](#cornerpos12) | Yes | Position of the rounded corner. | 8627| x | number | Yes | Radius of the rounded corner on the X axis. The value is a floating point number. A negative number is invalid.| 8628| y | number | Yes | Radius of the rounded corner on the Y axis. The value is a floating point number. A negative number is invalid.| 8629 8630**Error codes** 8631 8632For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8633 8634| ID| Error Message| 8635| ------- | --------------------------------------------| 8636| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 8637 8638**Example** 8639 8640```ts 8641import { drawing } from '@kit.ArkGraphics2D'; 8642let roundRect : drawing.RoundRect = new drawing.RoundRect({left: 0, top: 0, right: 300, bottom: 300}, 50, 50); 8643roundRect.setCorner(drawing.CornerPos.TOP_LEFT_POS, 150, 150); 8644``` 8645 8646### getCorner<sup>12+</sup> 8647 8648getCorner(pos: CornerPos): common2D.Point 8649 8650Obtains the radii of the specified rounded corner in this rounded rectangle. 8651 8652**System capability**: SystemCapability.Graphics.Drawing 8653 8654**Parameters** 8655 8656| Name | Type | Mandatory| Description | 8657| -------- | -------------------------------------------- | ---- | ------------------------------- | 8658| pos | [CornerPos](#cornerpos12) | Yes | Position of the rounded corner. | 8659 8660**Return value** 8661 8662| Type | Description | 8663| --------------------- | -------------- | 8664| [common2D.Point](js-apis-graphics-common2D.md#point) | Point. The horizontal coordinate indicates the radius of the rounded corner on the X axis, and the vertical coordinate indicates the radius on the Y axis.| 8665 8666**Error codes** 8667 8668For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8669 8670| ID| Error Message| 8671| ------- | --------------------------------------------| 8672| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 8673 8674**Example** 8675 8676```ts 8677import { drawing } from '@kit.ArkGraphics2D'; 8678let roundRect : drawing.RoundRect = new drawing.RoundRect({left: 0, top: 0, right: 300, bottom: 300}, 50, 50); 8679let cornerRadius = roundRect.getCorner(drawing.CornerPos.BOTTOM_LEFT_POS); 8680console.info("getCorner---"+cornerRadius.x) 8681console.info("getCorner---"+cornerRadius.y) 8682``` 8683 8684### offset<sup>12+</sup> 8685 8686offset(dx: number, dy: number): void 8687 8688Translates this rounded rectangle by an offset along the X axis and Y axis. 8689 8690**System capability**: SystemCapability.Graphics.Drawing 8691 8692**Parameters** 8693 8694| Name | Type | Mandatory| Description | 8695| -------- | -------------------------------------------- | ---- | ------------------------------- | 8696| dx | number | Yes | Horizontal distance to translate. A positive number indicates a translation towards the positive direction of the X axis, and a negative number indicates a translation towards the negative direction of the X axis. The value is a floating point number. | 8697| dy | number | Yes | Vertical distance to translate. A positive number indicates a translation towards the positive direction of the Y axis, and a negative number indicates a translation towards the negative direction of the Y axis. The value is a floating point number. | 8698 8699**Error codes** 8700 8701For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8702 8703| ID| Error Message| 8704| ------- | --------------------------------------------| 8705| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8706 8707**Example** 8708 8709```ts 8710import { drawing } from '@kit.ArkGraphics2D'; 8711let roundRect : drawing.RoundRect = new drawing.RoundRect({left: 0, top: 0, right: 300, bottom: 300}, 50, 50); 8712roundRect.offset(100, 100); 8713``` 8714 8715## Region<sup>12+</sup> 8716 8717Describes a region, which is used to describe the region where the shape can be drawn. 8718 8719### isPointContained<sup>12+</sup> 8720 8721isPointContained(x: number, y: number) : boolean 8722 8723Checks whether a point is contained in this region. 8724 8725**System capability**: SystemCapability.Graphics.Drawing 8726 8727**Parameters** 8728 8729| Name| Type | Mandatory| Description | 8730| ------ | ------ | ---- | ----------------------- | 8731| x | number | Yes | X coordinate of the point. The value must be an integer. If a decimal is passed in, the decimal part is rounded off.| 8732| y | number | Yes | Y coordinate of the point. The value must be an integer. If a decimal is passed in, the decimal part is rounded off.| 8733 8734**Return value** 8735 8736| Type | Description | 8737| ------- | -------------- | 8738| boolean | Check result. The value **true** means that the point is contained, and **false** means the opposite.| 8739 8740**Error codes** 8741 8742For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8743 8744| ID| Error Message| 8745| ------- | --------------------------------------------| 8746| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8747 8748**Example** 8749 8750```ts 8751import { RenderNode } from '@kit.ArkUI'; 8752import { drawing } from '@kit.ArkGraphics2D'; 8753class DrawingRenderNode extends RenderNode { 8754 draw(context : DrawContext) { 8755 const canvas = context.canvas; 8756 const pen = new drawing.Pen(); 8757 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 8758 pen.setStrokeWidth(10); 8759 canvas.attachPen(pen); 8760 let region = new drawing.Region(); 8761 region.setRect(100, 100, 400, 400); 8762 let flag: boolean = false; 8763 flag = region.isPointContained(200,200); 8764 console.info("region isPointContained : " + flag); 8765 canvas.drawPoint(200,200); 8766 canvas.drawRegion(region); 8767 canvas.detachPen(); 8768 } 8769} 8770``` 8771 8772### isRegionContained<sup>12+</sup> 8773 8774isRegionContained(other: Region) : boolean 8775 8776Checks whether another region is contained in this region. 8777 8778**System capability**: SystemCapability.Graphics.Drawing 8779 8780**Parameters** 8781 8782| Name| Type | Mandatory| Description | 8783| ------ | ------ | ---- | ----------------------- | 8784| other | [Region](#region12) | Yes | **Region** object.| 8785 8786**Return value** 8787 8788| Type | Description | 8789| ------- | -------------- | 8790| boolean | Check result. The value **true** means that the other region is contained, and **false** means the opposite.| 8791 8792**Error codes** 8793 8794For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8795 8796| ID| Error Message| 8797| ------- | --------------------------------------------| 8798| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8799 8800**Example** 8801 8802```ts 8803import { RenderNode } from '@kit.ArkUI'; 8804import { drawing } from '@kit.ArkGraphics2D'; 8805class DrawingRenderNode extends RenderNode { 8806 draw(context : DrawContext) { 8807 const canvas = context.canvas; 8808 const pen = new drawing.Pen(); 8809 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 8810 pen.setStrokeWidth(10); 8811 canvas.attachPen(pen); 8812 let region = new drawing.Region(); 8813 let other = new drawing.Region(); 8814 region.setRect(100, 100, 400, 400); 8815 other.setRect(150, 150, 250 ,250); 8816 let flag: boolean = false; 8817 flag = region.isRegionContained(other); 8818 console.info("region isRegionContained : " + flag); 8819 canvas.drawRegion(region); 8820 canvas.drawRegion(other); 8821 canvas.detachPen(); 8822 } 8823} 8824``` 8825 8826### op<sup>12+</sup> 8827 8828op(region: Region, regionOp: RegionOp) : boolean 8829 8830Performs an operation on this region and another region, and stores the resulting region in this **Region** object. 8831 8832**System capability**: SystemCapability.Graphics.Drawing 8833 8834**Parameters** 8835 8836| Name| Type | Mandatory| Description | 8837| ------ | ------ | ---- | ----------------------- | 8838| region | [Region](#region12) | Yes | **Region** object.| 8839| regionOp | [RegionOp](#regionop12) | Yes | Operation mode of the region.| 8840 8841**Return value** 8842 8843| Type | Description | 8844| ------- | -------------- | 8845| boolean | Check result. The value **true** means that the resulting region is stored in the current **Region** object, and **false** means the opposite.| 8846 8847**Error codes** 8848 8849For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8850 8851| ID| Error Message| 8852| ------- | --------------------------------------------| 8853| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8854 8855**Example** 8856 8857```ts 8858import { RenderNode } from '@kit.ArkUI'; 8859import { drawing } from '@kit.ArkGraphics2D'; 8860class DrawingRenderNode extends RenderNode { 8861 draw(context : DrawContext) { 8862 const canvas = context.canvas; 8863 const pen = new drawing.Pen(); 8864 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 8865 pen.setStrokeWidth(10); 8866 canvas.attachPen(pen); 8867 let region = new drawing.Region(); 8868 region.setRect(200, 200, 400, 400); 8869 let othregion = new drawing.Region(); 8870 othregion.setRect(110, 110, 240, 240); 8871 let flag: boolean = false; 8872 flag = region.op(othregion,drawing.RegionOp.REPLACE); 8873 console.info("region op : " + flag); 8874 canvas.drawRegion(region); 8875 canvas.detachPen(); 8876 } 8877} 8878``` 8879 8880### quickReject<sup>12+</sup> 8881 8882quickReject(left: number, top: number, right: number, bottom: number) : boolean 8883 8884Checks whether a rectangle do not intersect with this region. Actually, this API determines whether the rectangle does not intersect with the bounding rectangle of the region, and therefore the result may not be accurate. 8885 8886**System capability**: SystemCapability.Graphics.Drawing 8887 8888**Parameters** 8889 8890| Name| Type | Mandatory| Description | 8891| ------ | ------ | ---- | ----------------------- | 8892| left | number | Yes | Left position of the rectangle. The value must be an integer. If a decimal is passed in, the decimal part is rounded off.| 8893| top | number | Yes | Top position of the rectangle. The value must be an integer. If a decimal is passed in, the decimal part is rounded off.| 8894| right | number | Yes | Right position of the rectangle. The value must be an integer. If a decimal is passed in, the decimal part is rounded off.| 8895| bottom | number | Yes | Bottom position of the rectangle. The value must be an integer. If a decimal is passed in, the decimal part is rounded off.| 8896 8897**Return value** 8898 8899| Type | Description | 8900| ------- | -------------- | 8901| boolean | Check result. The value **true** means that the two do not intersect, and **false** means the opposite.| 8902 8903**Error codes** 8904 8905For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8906 8907| ID| Error Message| 8908| ------- | --------------------------------------------| 8909| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8910 8911**Example** 8912 8913```ts 8914import { RenderNode } from '@kit.ArkUI'; 8915import { drawing } from '@kit.ArkGraphics2D'; 8916class DrawingRenderNode extends RenderNode { 8917 draw(context : DrawContext) { 8918 const canvas = context.canvas; 8919 const pen = new drawing.Pen(); 8920 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 8921 pen.setStrokeWidth(10); 8922 canvas.attachPen(pen); 8923 let region = new drawing.Region(); 8924 region.setRect(100, 100, 400, 400); 8925 let flag: boolean = false; 8926 flag = region.quickReject(50, 50, 70, 70); 8927 console.info("region quickReject : " + flag); 8928 canvas.drawRegion(region); 8929 canvas.detachPen(); 8930 } 8931} 8932``` 8933 8934### setPath<sup>12+</sup> 8935 8936setPath(path: Path, clip: Region) : boolean 8937 8938Sets a region that matches the outline of a path within the cropping area. 8939 8940**System capability**: SystemCapability.Graphics.Drawing 8941 8942**Parameters** 8943 8944| Name| Type | Mandatory| Description | 8945| ------ | ------ | ---- | ----------------------- | 8946| path | [Path](#path) | Yes | **Path** object.| 8947| clip | [Region](#region12) | Yes | **Region** object.| 8948 8949**Return value** 8950 8951| Type | Description | 8952| ------- | -------------- | 8953| boolean | Result of the setting operation. The value **true** means that the setting is successful, and **false** means the opposite.| 8954 8955**Error codes** 8956 8957For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8958 8959| ID| Error Message| 8960| ------- | --------------------------------------------| 8961| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8962 8963**Example** 8964 8965```ts 8966import { RenderNode } from '@kit.ArkUI'; 8967import { drawing } from '@kit.ArkGraphics2D'; 8968class DrawingRenderNode extends RenderNode { 8969 draw(context : DrawContext) { 8970 const canvas = context.canvas; 8971 const pen = new drawing.Pen(); 8972 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 8973 pen.setStrokeWidth(10); 8974 canvas.attachPen(pen); 8975 let region = new drawing.Region(); 8976 let path = new drawing.Path(); 8977 region.setRect(100, 100, 400, 400); 8978 path.arcTo(50, 50, 300, 300, 0, 359); 8979 let flag: boolean = false; 8980 flag = region.setPath(path,region); 8981 console.info("region setPath : " + flag); 8982 canvas.drawRegion(region); 8983 canvas.detachPen(); 8984 } 8985} 8986``` 8987 8988### setRect<sup>12+</sup> 8989 8990setRect(left: number, top: number, right: number, bottom: number) : boolean 8991 8992Sets a rectangle. 8993 8994**System capability**: SystemCapability.Graphics.Drawing 8995 8996**Parameters** 8997 8998| Name| Type | Mandatory| Description | 8999| ------ | ------ | ---- | ----------------------- | 9000| left | number | Yes | Left position of the rectangle. The value must be an integer. If a decimal is passed in, the decimal part is rounded off.| 9001| top | number | Yes | Top position of the rectangle. The value must be an integer. If a decimal is passed in, the decimal part is rounded off.| 9002| right | number | Yes | Right position of the rectangle. The value must be an integer. If a decimal is passed in, the decimal part is rounded off.| 9003| bottom | number | Yes | Bottom position of the rectangle. The value must be an integer. If a decimal is passed in, the decimal part is rounded off.| 9004 9005**Return value** 9006 9007| Type | Description | 9008| ------- | -------------- | 9009| boolean | Result of the setting operation. The value **true** means that the setting is successful, and **false** means the opposite.| 9010 9011**Error codes** 9012 9013For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 9014 9015| ID| Error Message| 9016| ------- | --------------------------------------------| 9017| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9018 9019**Example** 9020 9021```ts 9022import { RenderNode } from '@kit.ArkUI'; 9023import { drawing } from '@kit.ArkGraphics2D'; 9024class DrawingRenderNode extends RenderNode { 9025 draw(context : DrawContext) { 9026 const canvas = context.canvas; 9027 const pen = new drawing.Pen(); 9028 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 9029 pen.setStrokeWidth(10); 9030 canvas.attachPen(pen); 9031 let region = new drawing.Region(); 9032 let flag: boolean = false; 9033 flag = region.setRect(50, 50, 300, 300); 9034 console.info("region setRect : " + flag); 9035 canvas.drawRegion(region); 9036 canvas.detachPen(); 9037 } 9038} 9039``` 9040 9041## TileMode<sup>12+</sup> 9042 9043Enumerates the tile modes of the shader effect. 9044 9045**System capability**: SystemCapability.Graphics.Drawing 9046 9047| Name | Value | Description | 9048| ---------------------- | ---- | ------------------------------ | 9049| CLAMP | 0 | Replicates the edge color if the shader effect draws outside of its original boundary.| 9050| REPEAT | 1 | Repeats the shader effect in both horizontal and vertical directions.| 9051| MIRROR | 2 | Repeats the shader effect in both horizontal and vertical directions, alternating mirror images.| 9052| DECAL | 3 | Renders the shader effect only within the original boundary.| 9053 9054## ShaderEffect<sup>12+</sup> 9055 9056Implements the shader effect. After a shader effect is set for a pen or brush, the shader effect instead of the color attribute is used for drawing. In this case, the alpha value set for the pen or brush still takes effect. 9057 9058### createColorShader<sup>12+</sup> 9059 9060static createColorShader(color: number): ShaderEffect 9061 9062Creates a **ShaderEffect** object with a single color. 9063 9064**System capability**: SystemCapability.Graphics.Drawing 9065 9066**Parameters** 9067 9068| Name| Type | Mandatory| Description | 9069| ------ | -------------------------------------------------- | ---- | -------------- | 9070| color | number | Yes | Color in the ARGB format. The value is a 32-bit unsigned integer.| 9071 9072**Return value** 9073 9074| Type | Description | 9075| ------- | ------------------------- | 9076| [ShaderEffect](#shadereffect12) | **ShaderEffect** object with a single color.| 9077 9078**Error codes** 9079 9080For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 9081 9082| ID| Error Message| 9083| ------- | --------------------------------------------| 9084| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9085 9086**Example** 9087 9088```ts 9089import { drawing } from '@kit.ArkGraphics2D'; 9090 9091let shaderEffect = drawing.ShaderEffect.createColorShader(0xFFFF0000); 9092``` 9093 9094### createLinearGradient<sup>12+</sup> 9095 9096static createLinearGradient(startPt: common2D.Point, endPt: common2D.Point, colors: Array 9097\<number>, mode: TileMode, pos?: Array\<number> | null, matrix?: Matrix | null): ShaderEffect 9098 9099Creates a **ShaderEffect** object that generates a linear gradient between two points. 9100 9101**System capability**: SystemCapability.Graphics.Drawing 9102 9103**Parameters** 9104 9105| Name| Type | Mandatory| Description | 9106| ------ | -------------------------------------------------- | ---- | -------------- | 9107| startPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | Start point.| 9108| endPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | End point.| 9109| colors | Array\<number> | Yes | Array of colors to distribute between the two points. The values in the array are 32-bit (ARGB) unsigned integers.| 9110| mode | [TileMode](#tilemode12) | Yes | Tile mode of the shader effect.| 9111| pos | Array\<number> \|null| No | Relative position of each color in the color array. The array length must be the same as that of **colors**. The first element in the array must be 0.0, the last element must be 1.0, and the middle elements must be between 0.0 and 1.0 and increase by index. The default value is null, indicating that colors are evenly distributed between the two points.| 9112| matrix | [Matrix](#matrix12) \| null | No | **Matrix** object used to perform matrix transformation on the shader effect. The default value is null, indicating the identity matrix.| 9113 9114 9115 9116The preceding figure shows the display effect when the **colors** array is set to red, green, and blue and the **pos** array is set to 0.0, 0.75, and 1.0. The triangle subscript is the relative position of a color between the start point and end point. Gradient colors are used between them. 9117 9118**Return value** 9119 9120| Type | Description | 9121| ------- | ------------------------- | 9122| [ShaderEffect](#shadereffect12) | **ShaderEffect** object created.| 9123 9124**Error codes** 9125 9126For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 9127 9128| ID| Error Message| 9129| ------- | --------------------------------------------| 9130| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 9131 9132**Example** 9133 9134```ts 9135import { common2D,drawing } from '@kit.ArkGraphics2D'; 9136 9137let startPt: common2D.Point = { x: 100, y: 100 }; 9138let endPt: common2D.Point = { x: 300, y: 300 }; 9139let shaderEffect = drawing.ShaderEffect.createLinearGradient(startPt, endPt, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 9140``` 9141 9142### createRadialGradient<sup>12+</sup> 9143 9144static createRadialGradient(centerPt: common2D.Point, radius: number, colors: Array\<number>, mode: TileMode, pos?: Array\<number> | null, matrix?: Matrix | null): ShaderEffect; 9145 9146Creates a **ShaderEffect** object that generates a radial gradient based on the center and radius of a circle. The radial gradient transitions colors from the center to the ending shape in a radial manner. 9147 9148**System capability**: SystemCapability.Graphics.Drawing 9149 9150**Parameters** 9151 9152| Name| Type | Mandatory| Description | 9153| ------ | -------------------------------------------------- | ---- | -------------- | 9154| centerPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | Center of the circle.| 9155| radius | number | Yes | Radius of the gradient. A negative number is invalid. The value is a floating point number.| 9156| colors | Array\<number> | Yes | Array of colors to distribute between the center and ending shape of the circle. The values in the array are 32-bit (ARGB) unsigned integers.| 9157| mode | [TileMode](#tilemode12) | Yes | Tile mode of the shader effect.| 9158| pos | Array\<number> \| null | No | Relative position of each color in the color array. The array length must be the same as that of **colors**. The first element in the array must be 0.0, the last element must be 1.0, and the middle elements must be between 0.0 and 1.0 and increase by index. The default value is null, indicating that colors are evenly distributed between the center and ending shape of the circle.| 9159| matrix | [Matrix](#matrix12) \| null | No | **Matrix** object used to perform matrix transformation on the shader effect. The default value is null, indicating the identity matrix.| 9160 9161 9162 9163The preceding figure shows the display effect when the **colors** array is set to red, green, and blue and the **pos** array is set to 0.0, 0.75, and 1.0. The triangle subscript is the relative position of the color between the center and ending shape of the circle. Gradient colors are used between them. 9164 9165**Return value** 9166 9167| Type | Description | 9168| ------- | ------------------------- | 9169| [ShaderEffect](#shadereffect12) | **ShaderEffect** object created.| 9170 9171**Error codes** 9172 9173For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 9174 9175| ID| Error Message| 9176| ------- | --------------------------------------------| 9177| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 9178 9179**Example** 9180 9181```ts 9182import { common2D,drawing } from '@kit.ArkGraphics2D'; 9183 9184let centerPt: common2D.Point = { x: 100, y: 100 }; 9185let shaderEffect = drawing.ShaderEffect.createRadialGradient(centerPt, 100, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 9186``` 9187 9188### createSweepGradient<sup>12+</sup> 9189 9190static createSweepGradient(centerPt: common2D.Point, colors: Array\<number>, 9191 mode: TileMode, startAngle: number, endAngle: number, pos?: Array\<number> | null, 9192 matrix?: Matrix | null): ShaderEffect; 9193 9194Creates a **ShaderEffect** object that generates a sweep gradient based on the center. A sweep gradient paints a gradient of colors in a clockwise or counterclockwise direction based on a given circle center. 9195 9196**System capability**: SystemCapability.Graphics.Drawing 9197 9198**Parameters** 9199 9200| Name| Type | Mandatory| Description | 9201| ------ | -------------------------------------------------- | ---- | -------------- | 9202| centerPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | Center of the circle.| 9203| colors | Array\<number> | Yes | Array of colors to distribute between the start angle and end angle. The values in the array are 32-bit (ARGB) unsigned integers.| 9204| mode | [TileMode](#tilemode12) | Yes | Tile mode of the shader effect.| 9205| startAngle | number | Yes | Start angle of the sweep gradient, in degrees. The value 0 indicates the positive direction of the X axis. A positive number indicates an offset towards the positive direction, and a negative number indicates an offset towards the negative direction. The value is a floating point number.| 9206| endAngle | number | Yes | End angle of the sweep gradient, in degrees. The value 0 indicates the positive direction of the X axis. A positive number indicates an offset towards the positive direction, and a negative number indicates an offset towards the negative direction. A value less than the start angle is invalid. The value is a floating point number.| 9207| pos | Array\<number> \| null | No | Relative position of each color in the color array. The array length must be the same as that of **colors**. The first element in the array must be 0.0, the last element must be 1.0, and the middle elements must be between 0.0 and 1.0 and increase by index. The default value is null, indicating that the colors are evenly distributed between the start angle and end angle.| 9208| matrix | [Matrix](#matrix12) \| null | No |**Matrix** object used to perform matrix transformation on the shader effect. The default value is null, indicating the identity matrix.| 9209 9210 9211 9212The preceding figure shows the display effect when the **colors** array is set to red, green, and blue, the **pos** array is set to 0.0, 0.75, and 1.0, **startAngle** is set to 0 degrees, and **endAngle** is set to 180 degrees. In the figure, **0.0** corresponds to the position of 0 degrees, **0.75** corresponds to the position of 135 degrees, and **1.0** corresponds to the position of 180 degrees. Gradient colors are used between them. 9213 9214**Return value** 9215 9216| Type | Description | 9217| ------- | ------------------------- | 9218| [ShaderEffect](#shadereffect12) | **ShaderEffect** object created.| 9219 9220**Error codes** 9221 9222For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 9223 9224| ID| Error Message| 9225| ------- | --------------------------------------------| 9226| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 9227 9228**Example** 9229 9230```ts 9231import { common2D,drawing } from '@kit.ArkGraphics2D'; 9232 9233let centerPt: common2D.Point = { x: 100, y: 100 }; 9234let shaderEffect = drawing.ShaderEffect.createSweepGradient(centerPt, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT, 100, 200); 9235``` 9236 9237### createConicalGradient<sup>12+</sup> 9238 9239static createConicalGradient(startPt: common2D.Point, startRadius: number, endPt: common2D.Point, endRadius: number, colors: Array\<number>, mode: TileMode, 9240pos?: Array\<number> | null, matrix?: Matrix | null): ShaderEffect; 9241 9242Creates a **ShaderEffect** object that generates a conical gradient between two given circles. 9243 9244**System capability**: SystemCapability.Graphics.Drawing 9245 9246**Parameters** 9247 9248| Name| Type | Mandatory| Description | 9249| ------ | -------------------------------------------------- | ---- | -------------- | 9250| startPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes |Center of the start circle of the gradient.| 9251| startRadius | number | Yes | Radius of the start circle of the gradient. A negative number is invalid. The value is a floating point number.| 9252| endPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | Center of the end circle of the gradient.| 9253| endRadius | number | Yes | Radius of the end circle of the gradient. A negative value is invalid. The value is a floating point number.| 9254| colors | Array\<number> | Yes | Array of colors to distribute between the start circle and end circle. The values in the array are 32-bit (ARGB) unsigned integers.| 9255| mode | [TileMode](#tilemode12) | Yes | Tile mode of the shader effect.| 9256| pos | Array\<number> \| null | No | Relative position of each color in the color array. The array length must be the same as that of **colors**. The first element in the array must be 0.0, the last element must be 1.0, and the middle elements must be between 0.0 and 1.0 and increase by index. The default value is null, indicating that colors are evenly distributed between the two circles.| 9257| matrix | [Matrix](#matrix12) \| null | No | **Matrix** object used to perform matrix transformation on the shader effect. The default value is null, indicating the identity matrix.| 9258 9259 9260 9261The preceding figure shows the display effect when the **colors** array is set to red, green, and blue and the **pos** array is set to 0.0, 0.5, and 1.0. The left part shows the drawing result when the start circle is not in the end circle, and the right part shows the drawing result when the start circle is in the end circle. 9262 9263**Return value** 9264 9265| Type | Description | 9266| ------- | ------------------------- | 9267| [ShaderEffect](#shadereffect12) | **ShaderEffect** object created.| 9268 9269**Error codes** 9270 9271For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 9272 9273| ID| Error Message| 9274| ------- | --------------------------------------------| 9275| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 9276 9277**Example** 9278 9279```ts 9280import { common2D,drawing } from '@kit.ArkGraphics2D'; 9281 9282let startPt: common2D.Point = { x: 100, y: 100 }; 9283let endPt: common2D.Point = {x: 200, y: 200}; 9284let shaderEffect = drawing.ShaderEffect.createConicalGradient(startPt, 100, endPt, 50, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 9285``` 9286 9287## Tool<sup>15+</sup> 9288 9289A utility class that provides only static methods to convert data structs defined in other modules and [common2D](js-apis-graphics-common2D.md). 9290 9291### makeColorFromResourceColor<sup>15+</sup> 9292 9293static makeColorFromResourceColor(resourceColor: ResourceColor): common2D.Color 9294 9295Converts a color value of the **ResourceColor** type to a **common2D.Color** object. 9296 9297**System capability**: SystemCapability.Graphics.Drawing 9298 9299**Parameters** 9300 9301| Name| Type | Mandatory| Description | 9302| ------ | -------------------------------------------------- | ---- | -------------- | 9303| resourceColor | [ResourceColor](../apis-arkui/arkui-ts/ts-types.md#resourcecolor) | Yes | Color value of the **ResourceColor** type. (All four types of inputs are supported. The following provides 13 example inputs.) The fourth type of [Resource](../apis-arkui/arkui-ts/ts-types.md#resource) supports only the construction method **$r('belonging.type.name')**. Ensure that the resource has been defined in the **main/resources/base/element** directory. (The types **color**, **string**, and **integer** are available for the belonging **app**, whereas only the type **color** is available for the belonging **sys**.)| 9304 9305**Return value** 9306 9307| Type | Description | 9308| ------- | ------------------------- | 9309| [common2D.Color](js-apis-graphics-common2D.md#color) | **Common2D.Color** object. If the conversion fails, a null pointer is returned.| 9310 9311**Error codes** 9312 9313For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 9314 9315| ID| Error Message| 9316| ------- | --------------------------------------------| 9317| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9318 9319**Example** 9320 9321```ts 9322import { drawing, common2D } from '@kit.ArkGraphics2D'; 9323 9324// Color 9325let color1: common2D.Color = drawing.Tool.makeColorFromResourceColor(Color.Blue); 9326 9327// Number 9328let color2: common2D.Color = drawing.Tool.makeColorFromResourceColor(0xffc0cb); 9329let color3: common2D.Color = drawing.Tool.makeColorFromResourceColor(0x11ffa500); 9330 9331// String 9332let color4: common2D.Color = drawing.Tool.makeColorFromResourceColor('#ff0000'); 9333let color5: common2D.Color = drawing.Tool.makeColorFromResourceColor('#110000ff'); 9334let color6: common2D.Color = drawing.Tool.makeColorFromResourceColor('#00f'); 9335let color7: common2D.Color = drawing.Tool.makeColorFromResourceColor('#100f'); 9336let color8: common2D.Color = drawing.Tool.makeColorFromResourceColor('rgb(255, 100, 255)'); 9337let color9: common2D.Color = drawing.Tool.makeColorFromResourceColor('rgba(255, 100, 255, 0.5)'); 9338 9339// Resource 9340let color10: common2D.Color = drawing.Tool.makeColorFromResourceColor($r('sys.color.ohos_id_color_secondary')); 9341let color11: common2D.Color = drawing.Tool.makeColorFromResourceColor($r('app.color.appColorTest')); 9342let color12: common2D.Color = drawing.Tool.makeColorFromResourceColor($r('app.string.appColorTest')); 9343let color13: common2D.Color = drawing.Tool.makeColorFromResourceColor($r('app.integer.appColorTest')); 9344 9345// Use color 9346let brush = new drawing.Brush(); 9347brush.setColor(color1); 9348``` 9349 9350## RegionOp<sup>12+</sup> 9351 9352Enumerates the operations for combining two regions. 9353 9354**System capability**: SystemCapability.Graphics.Drawing 9355 9356| Name | Value | Description | Diagram | 9357| --------------------- | ---- | ------------------------------ | -------- | 9358| DIFFERENCE | 0 | Difference operation. | | 9359| INTERSECT | 1 | Intersect operation.| | 9360| UNION | 2 | Union operation. | | 9361| XOR | 3 | XOR operation. | | 9362| REVERSE_DIFFERENCE | 4 | Reverse difference operation. | | 9363| REPLACE | 5 | Replace operation. | | 9364 9365> **NOTE** 9366> 9367> The schematic diagram shows the result obtained by combining a red region with a blue region at different operation mode. The green region is the region obtained. 9368 9369## CornerPos<sup>12+</sup> 9370 9371Enumerates the corner positions of a rounded rectangle. 9372 9373**System capability**: SystemCapability.Graphics.Drawing 9374 9375| Name | Value | Description | 9376| --------------------- | ---- | ------------------------------ | 9377| TOP_LEFT_POS | 0 | Top left corner of the rounded rectangle. | 9378| TOP_RIGHT_POS | 1 | Top right corner of the rounded rectangle.| 9379| BOTTOM_RIGHT_POS | 2 | Bottom right corner of the rounded rectangle. | 9380| BOTTOM_LEFT_POS | 3 | Bottom left corner of the rounded rectangle. | 9381
