1# @ohos.graphics.drawing (Drawing) 2 3During application development, you often need to draw different elements. Typically, you can use ArkUI components to draw the desired elements or effects. However, sometimes these components cannot meet the needs for custom graphics or effects. In such cases, you can turn to the Drawing module for flexible custom drawing. This 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. A blend mode combines two colors (source color and destination color) in a specific way to create a new color. This is commonly used in graphics operations like overlaying, filtering, and masking. The blending process applies the same logic to the red, green, and blue color channels separately. The alpha channel, however, is handled according to the specific definitions of each blend mode. 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 dimensions of matrix information in path measurement. It is often used in animation scenarios where objects move along a path. 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 constraints on the source rectangle. It is used to specify whether to limit the sampling range within the source rectangle when drawing an image on a canvas. 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 shadow drawing behaviors. 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 path operation types. It is often used in path combination and clipping scenarios. 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 path operation types contained in an iterator. It is used to read path operation instructions. 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. You can read path operation instructions by traversing the 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'; 160 161let path: drawing.Path = new drawing.Path(); 162let iter: drawing.PathIterator = new drawing.PathIterator(path); 163``` 164 165### next<sup>18+</sup> 166 167next(points: Array<common2D.Point>, offset?: number): PathIteratorVerb 168 169Retrieves the next operation in this path and moves the iterator to that operation. 170 171**System capability**: SystemCapability.Graphics.Drawing 172 173**Parameters** 174 175| Name | Type | Mandatory| Description | 176| -------- | -------------------------------------------- | ---- | ------------------------------- | 177| points | Array\<[common2D.Point](js-apis-graphics-common2D.md#point)> | Yes | Array of coordinate points. The array length must be at least the offset plus 4 to ensure that the array can hold all types of path data. After the operation is executed, this array is overwritten. The number of coordinate points to be filled depends on the operation type. Specifically, for **MOVE**, fill one coordinate; for **LINE**, fill two coordinates; for **QUAD**, fill three coordinates; for **CONIC**, fill three coordinates and one weight value (a total of 3.5 groups); for **CUBIC**, fill four coordinates; for **CLOSE** and **DONE**, do not fill any coordinate points.| 178| 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.| 179 180**Return value** 181 182| Type | Description | 183| --------------------- | -------------- | 184| [PathIteratorVerb](#pathiteratorverb18) | Path operation type contained in the iterator.| 185 186**Error codes** 187 188For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 189 190| ID| Error Message| 191| ------- | --------------------------------------------| 192| 401 | Parameter error.Possible causes:1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed. | 193 194**Example** 195 196```ts 197import { common2D, drawing } from '@kit.ArkGraphics2D'; 198 199let path: drawing.Path = new drawing.Path(); 200path.moveTo(10, 20); 201let iter: drawing.PathIterator = new drawing.PathIterator(path); 202let verbStr: Array<string> = ["MOVE", "LINE", "QUAD", "CONIC", "CUBIC", "CLOSE", "DONE"]; 203let pointCount: Array<number> = [1,2,3,4,4,0,0]; //1,2,3,3.5,4,0,0 204let points: Array<common2D.Point> = [{x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}]; 205let offset = 0; 206let verb = iter.next(points, offset); 207let outputMessage: string = "pathIteratorNext: "; 208outputMessage += "verb =" + verbStr[verb] + "; has " + pointCount[verb] + " pairs: "; 209for (let j = 0; j < pointCount[verb] + offset; j++) { 210 outputMessage += "[" + points[j].x + ", " + points[j].y + "]"; 211} 212console.info(outputMessage); 213``` 214 215### peek<sup>18+</sup> 216 217peek(): PathIteratorVerb 218 219Retrieves the next operation in this path, without moving the iterator. 220 221**System capability**: SystemCapability.Graphics.Drawing 222 223**Return value** 224 225| Type | Description | 226| --------------------- | -------------- | 227| [PathIteratorVerb](#pathiteratorverb18) | Path operation type contained in the iterator.| 228 229**Example** 230 231```ts 232import { drawing } from '@kit.ArkGraphics2D'; 233 234let path: drawing.Path = new drawing.Path(); 235let iter: drawing.PathIterator = new drawing.PathIterator(path); 236let res = iter.peek(); 237``` 238 239### hasNext<sup>18+</sup> 240 241hasNext(): boolean 242 243Checks whether there is a next operation in the path operation iterator. 244 245**System capability**: SystemCapability.Graphics.Drawing 246 247**Return value** 248 249| Type | Description | 250| ------- | -------------- | 251| boolean | Check result. The value **true** means that there is a next operation in the path operation iterator, and **false** means the opposite.| 252 253**Example** 254 255```ts 256import { drawing } from '@kit.ArkGraphics2D'; 257 258let path: drawing.Path = new drawing.Path(); 259let iter: drawing.PathIterator = new drawing.PathIterator(path); 260let res = iter.hasNext(); 261``` 262 263## Path 264 265A compound geometric path consisting of line segments, arcs, quadratic Bezier curves, and cubic Bezier curves. 266 267### constructor<sup>12+</sup> 268 269constructor() 270 271Constructs a path. 272 273**System capability**: SystemCapability.Graphics.Drawing 274 275**Example** 276 277```ts 278import { drawing } from '@kit.ArkGraphics2D'; 279 280let path: drawing.Path = new drawing.Path(); 281``` 282 283### constructor<sup>12+</sup> 284 285constructor(path: Path) 286 287Constructs a copy of an existing path. 288 289**System capability**: SystemCapability.Graphics.Drawing 290 291**Parameters** 292 293| Name | Type | Mandatory| Description | 294| -------- | -------------------------------------------- | ---- | ------------------------------- | 295| path | [Path](#path) | Yes | Path to copy. | 296 297**Example** 298 299```ts 300import { drawing } from '@kit.ArkGraphics2D'; 301 302let path: drawing.Path = new drawing.Path(); 303path.moveTo(0, 0); 304path.lineTo(0, 700); 305path.lineTo(700, 0); 306path.close(); 307let path1: drawing.Path = new drawing.Path(path); 308``` 309 310### moveTo 311 312moveTo(x: number, y: number) : void 313 314Sets the start point of this path. 315 316**System capability**: SystemCapability.Graphics.Drawing 317 318**Parameters** 319 320| Name| Type | Mandatory| Description | 321| ------ | ------ | ---- | ----------------------- | 322| x | number | Yes | X coordinate of the start point. The value is a floating point number.| 323| y | number | Yes | Y coordinate of the start point. The value is a floating point number.| 324 325**Error codes** 326 327For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 328 329| ID| Error Message| 330| ------- | --------------------------------------------| 331| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 332 333**Example** 334 335```ts 336import { drawing } from '@kit.ArkGraphics2D'; 337 338let path = new drawing.Path(); 339path.moveTo(10,10); 340``` 341 342### lineTo 343 344lineTo(x: number, y: number) : void 345 346Draws 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. 347 348**System capability**: SystemCapability.Graphics.Drawing 349 350**Parameters** 351 352| Name| Type | Mandatory| Description | 353| ------ | ------ | ---- | ----------------------- | 354| x | number | Yes | X coordinate of the target point. The value is a floating point number.| 355| y | number | Yes | Y coordinate of the target point. The value is a floating point number.| 356 357**Error codes** 358 359For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 360 361| ID| Error Message| 362| ------- | --------------------------------------------| 363| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 364 365**Example** 366 367```ts 368import { drawing } from '@kit.ArkGraphics2D'; 369 370let path = new drawing.Path(); 371path.moveTo(10,10); 372path.lineTo(10, 15); 373``` 374 375### arcTo 376 377arcTo(x1: number, y1: number, x2: number, y2: number, startDeg: number, sweepDeg: number): void 378 379Draws an arc to this path using angle arc mode. This mode first defines a rectangle and takes its inscribed ellipse. Then, it specifies a start angle and a sweep angle. The arc is the portion of the ellipse's circumference 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. 380 381**System capability**: SystemCapability.Graphics.Drawing 382 383**Parameters** 384 385| Name | Type | Mandatory| Description | 386| -------- | ------ | ---- | -------------------------- | 387| x1 | number | Yes | X coordinate of the upper left corner of the rectangle. The value is a floating point number.| 388| y1 | number | Yes | Y coordinate of the upper left corner of the rectangle. The value is a floating point number.| 389| x2 | number | Yes | X coordinate of the lower right corner of the rectangle. The value is a floating point number.| 390| y2 | number | Yes | Y coordinate of the lower right corner of the rectangle. The value is a floating point number.| 391| startDeg | number | Yes | Start angle. The start direction (0°) of the angle is the positive direction of the X axis.| 392| 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.| 393 394**Error codes** 395 396For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 397 398| ID| Error Message| 399| ------- | --------------------------------------------| 400| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 401 402**Example** 403 404```ts 405import { drawing } from '@kit.ArkGraphics2D'; 406 407let path = new drawing.Path(); 408path.moveTo(10,10); 409path.arcTo(10, 15, 10, 10, 10, 10); 410``` 411 412### quadTo 413 414quadTo(ctrlX: number, ctrlY: number, endX: number, endY: number): void 415 416Draws 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. 417 418**System capability**: SystemCapability.Graphics.Drawing 419 420**Parameters** 421 422| Name| Type | Mandatory| Description | 423| ------ | ------ | ---- | --------------------- | 424| ctrlX | number | Yes | X coordinate of the control point. The value is a floating point number.| 425| ctrlY | number | Yes | Y coordinate of the control point. The value is a floating point number.| 426| endX | number | Yes | X coordinate of the target point. The value is a floating point number.| 427| endY | number | Yes | Y coordinate of the target point. The value is a floating point number.| 428 429**Error codes** 430 431For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 432 433| ID| Error Message| 434| ------- | --------------------------------------------| 435| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 436 437**Example** 438 439```ts 440import { drawing } from '@kit.ArkGraphics2D'; 441 442let path = new drawing.Path(); 443path.moveTo(10,10); 444path.quadTo(10, 15, 10, 10); 445``` 446 447### conicTo<sup>12+</sup> 448 449conicTo(ctrlX: number, ctrlY: number, endX: number, endY: number, weight: number): void 450 451Draws 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. 452 453**System capability**: SystemCapability.Graphics.Drawing 454 455**Parameters** 456 457| Name| Type | Mandatory| Description | 458| ------ | ------ | ---- | --------------------- | 459| ctrlX | number | Yes | X coordinate of the control point. The value is a floating point number.| 460| ctrlY | number | Yes | Y coordinate of the control point. The value is a floating point number.| 461| endX | number | Yes | X coordinate of the target point. The value is a floating point number.| 462| endY | number | Yes | Y coordinate of the target point. The value is a floating point number.| 463| 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 has the same effect as [lineTo](#lineto). If the value is 1, it has the same effect as [quadTo](#quadto). The value is a floating point number.| 464 465**Error codes** 466 467For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 468 469| ID| Error Message| 470| ------- | --------------------------------------------| 471| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 472 473**Example** 474 475```ts 476import { drawing } from '@kit.ArkGraphics2D'; 477 478const path = new drawing.Path(); 479path.conicTo(200, 400, 100, 200, 0); 480``` 481 482### cubicTo 483 484cubicTo(ctrlX1: number, ctrlY1: number, ctrlX2: number, ctrlY2: number, endX: number, endY: number): void 485 486Draws 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. 487 488**System capability**: SystemCapability.Graphics.Drawing 489 490**Parameters** 491 492| Name| Type | Mandatory| Description | 493| ------ | ------ | ---- | --------------------------- | 494| ctrlX1 | number | Yes | X coordinate of the first control point. The value is a floating point number.| 495| ctrlY1 | number | Yes | Y coordinate of the first control point. The value is a floating point number.| 496| ctrlX2 | number | Yes | X coordinate of the second control point. The value is a floating point number.| 497| ctrlY2 | number | Yes | Y coordinate of the second control point. The value is a floating point number.| 498| endX | number | Yes | X coordinate of the target point. The value is a floating point number.| 499| endY | number | Yes | Y coordinate of the target point. The value is a floating point number.| 500 501**Error codes** 502 503For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 504 505| ID| Error Message| 506| ------- | --------------------------------------------| 507| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 508 509**Example** 510 511```ts 512import { drawing } from '@kit.ArkGraphics2D'; 513 514let path = new drawing.Path(); 515path.moveTo(10,10); 516path.cubicTo(100, 100, 80, 150, 300, 150); 517``` 518 519### rMoveTo<sup>12+</sup> 520 521rMoveTo(dx: number, dy: number): void 522 523Sets the start position relative to the last point of this path. If the path is empty, the start point (0, 0) is used. 524 525**System capability**: SystemCapability.Graphics.Drawing 526 527**Parameters** 528 529| Name| Type | Mandatory| Description | 530| ------ | ------ | ---- | ----------------------- | 531| 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.| 532| 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.| 533 534**Error codes** 535 536For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 537 538| ID| Error Message| 539| ------- | --------------------------------------------| 540| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 541 542**Example** 543 544```ts 545import { drawing } from '@kit.ArkGraphics2D'; 546 547const path = new drawing.Path(); 548path.rMoveTo(10, 10); 549``` 550 551### rLineTo<sup>12+</sup> 552 553rLineTo(dx: number, dy: number): void 554 555Draws 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. 556 557**System capability**: SystemCapability.Graphics.Drawing 558 559**Parameters** 560 561| Name| Type | Mandatory| Description | 562| ------ | ------ | ---- | ----------------------- | 563| 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.| 564| 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.| 565 566**Error codes** 567 568For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 569 570| ID| Error Message| 571| ------- | --------------------------------------------| 572| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 573 574**Example** 575 576```ts 577import { drawing } from '@kit.ArkGraphics2D'; 578 579const path = new drawing.Path(); 580path.rLineTo(400, 200); 581``` 582 583### rQuadTo<sup>12+</sup> 584 585rQuadTo(dx1: number, dy1: number, dx2: number, dy2: number): void 586 587Draws 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. 588 589**System capability**: SystemCapability.Graphics.Drawing 590 591**Parameters** 592 593| Name| Type | Mandatory| Description | 594| ------ | ------ | ---- | --------------------- | 595| 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.| 596| 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.| 597| 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.| 598| 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.| 599 600**Error codes** 601 602For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 603 604| ID| Error Message| 605| ------- | --------------------------------------------| 606| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 607 608**Example** 609 610```ts 611import { drawing } from '@kit.ArkGraphics2D'; 612 613const path = new drawing.Path(); 614path.rQuadTo(100, 0, 0, 200); 615``` 616 617### rConicTo<sup>12+</sup> 618 619rConicTo(ctrlX: number, ctrlY: number, endX: number, endY: number, weight: number): void 620 621Draws 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. 622 623**System capability**: SystemCapability.Graphics.Drawing 624 625**Parameters** 626 627| Name| Type | Mandatory| Description | 628| ------ | ------ | ---- | --------------------- | 629| 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.| 630| 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.| 631| 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.| 632| 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.| 633| 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.| 634 635**Error codes** 636 637For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 638 639| ID| Error Message| 640| ------- | --------------------------------------------| 641| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 642 643**Example** 644 645```ts 646import { drawing } from '@kit.ArkGraphics2D'; 647 648const path = new drawing.Path(); 649path.rConicTo(200, 400, 100, 200, 0); 650``` 651 652### rCubicTo<sup>12+</sup> 653 654rCubicTo(ctrlX1: number, ctrlY1: number, ctrlX2: number, ctrlY2: number, endX: number, endY: number): void 655 656Draws 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. 657 658**System capability**: SystemCapability.Graphics.Drawing 659 660**Parameters** 661 662| Name| Type | Mandatory| Description | 663| ------ | ------ | ---- | --------------------------- | 664| 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.| 665| 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.| 666| 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.| 667| 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.| 668| 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.| 669| 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.| 670 671**Error codes** 672 673For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 674 675| ID| Error Message| 676| ------- | --------------------------------------------| 677| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 678 679**Example** 680 681```ts 682import { drawing } from '@kit.ArkGraphics2D'; 683 684const path = new drawing.Path(); 685path.rCubicTo(200, 0, 0, 200, -20, 0); 686``` 687 688### addArc<sup>12+</sup> 689 690addArc(rect: common2D.Rect, startAngle: number, sweepAngle: number): void 691 692Adds an arc to this path. 693When **startAngle** and **sweepAngle** meet the following conditions, an oval instead of an arc is added: 6941. The result of **startAngle** modulo 90 is close to 0. 6952. The value of **sweepAngle** is not in the range of (-360, 360). 696In other cases, this API adds an arc by applying the result of **sweepAngle** modulo 360 to the path. 697 698**System capability**: SystemCapability.Graphics.Drawing 699 700**Parameters** 701 702| Name | Type | Mandatory | Description | 703| ----------- | ---------------------------------------- | ---- | ------------------- | 704| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangular boundary that encapsulates the oval including the arc. | 705| 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.| 706| 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.| 707 708**Error codes** 709 710For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 711 712| ID| Error Message| 713| ------- | --------------------------------------------| 714| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 715 716**Example** 717 718```ts 719import { common2D, drawing } from '@kit.ArkGraphics2D'; 720 721let path = new drawing.Path(); 722const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 723path.addArc(rect, 90, 180); 724``` 725 726### addCircle<sup>12+</sup> 727 728addCircle(x: number, y: number, radius: number, pathDirection?: PathDirection): void 729 730Adds a circle to this path in the specified direction. The start point of the circle is (x + radius, y). 731 732**System capability**: SystemCapability.Graphics.Drawing 733 734**Parameters** 735 736| Name | Type | Mandatory | Description | 737| ----------- | ---------------------------------------- | ---- | ------------------- | 738| x | number | Yes | X coordinate of the center of the circle. The value is a floating point number.| 739| y | number | Yes | Y coordinate of the center of the circle. The value is a floating point number.| 740| 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.| 741| pathDirection | [PathDirection](#pathdirection12) | No | Direction of the path. The default direction is clockwise.| 742 743**Error codes** 744 745For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 746 747| ID| Error Message| 748| ------- | --------------------------------------------| 749| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed. | 750 751**Example** 752 753```ts 754 755import { drawing } from '@kit.ArkGraphics2D'; 756 757let path = new drawing.Path(); 758path.addCircle(100, 200, 50, drawing.PathDirection.CLOCKWISE); 759``` 760 761### addOval<sup>12+</sup> 762 763addOval(rect: common2D.Rect, start: number, pathDirection?: PathDirection): void 764 765Adds the inscribed ellipse of a rectangle to this path in the specified direction. 766 767**System capability**: SystemCapability.Graphics.Drawing 768 769**Parameters** 770 771| Name | Type | Mandatory | Description | 772| ----------- | ---------------------------------------- | ---- | ------------------- | 773| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangular boundary of the oval. | 774| 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.| 775| pathDirection | [PathDirection](#pathdirection12) | No | Direction of the path. The default direction is clockwise.| 776 777**Error codes** 778 779For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 780 781| ID| Error Message| 782| ------- | --------------------------------------------| 783| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 784 785**Example** 786 787```ts 788import { common2D, drawing } from '@kit.ArkGraphics2D'; 789 790let path = new drawing.Path(); 791const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 792path.addOval(rect, 5, drawing.PathDirection.CLOCKWISE); 793``` 794 795### addRect<sup>12+</sup> 796 797addRect(rect: common2D.Rect, pathDirection?: PathDirection): void 798 799Adds a rectangle to this path in the specified direction. The start point is the upper left corner of the rectangle. 800 801**System capability**: SystemCapability.Graphics.Drawing 802 803**Parameters** 804 805| Name | Type | Mandatory | Description | 806| ----------- | ---------------------------------------- | ---- | ------------------- | 807| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangle. | 808| pathDirection | [PathDirection](#pathdirection12) | No | Direction of the path. The default direction is clockwise.| 809 810**Error codes** 811 812For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 813 814| ID| Error Message| 815| ------- | --------------------------------------------| 816| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 817 818**Example** 819 820```ts 821import { common2D, drawing } from '@kit.ArkGraphics2D'; 822 823let path = new drawing.Path(); 824const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 825path.addRect(rect, drawing.PathDirection.CLOCKWISE); 826``` 827 828### addRoundRect<sup>12+</sup> 829 830addRoundRect(roundRect: RoundRect, pathDirection?: PathDirection): void 831 832Adds 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. 833 834**System capability**: SystemCapability.Graphics.Drawing 835 836**Parameters** 837 838| Name | Type | Mandatory | Description | 839| ----------- | ---------------------------------------- | ---- | ------------------- | 840| roundRect | [RoundRect](#roundrect12) | Yes | Rounded rectangle. | 841| pathDirection | [PathDirection](#pathdirection12) | No | Direction of the path. The default direction is clockwise.| 842 843**Error codes** 844 845For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 846 847| ID| Error Message| 848| ------- | --------------------------------------------| 849| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 850 851**Example** 852 853```ts 854import { common2D, drawing } from '@kit.ArkGraphics2D'; 855 856let path = new drawing.Path(); 857const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 858let roundRect = new drawing.RoundRect(rect, 50, 50); 859path.addRoundRect(roundRect, drawing.PathDirection.CLOCKWISE); 860``` 861 862### addPath<sup>12+</sup> 863 864addPath(path: Path, matrix?: Matrix | null): void 865 866Transforms the points in a path by a matrix and stores the resulting path in the current **Path** object. 867 868**System capability**: SystemCapability.Graphics.Drawing 869 870**Parameters** 871 872| Name | Type | Mandatory | Description | 873| ----------- | ---------------------------------------- | ---- | ------------------- | 874| path | [Path](#path) | Yes | Source **Path** object. | 875| matrix | [Matrix](#matrix12)\|null | No | **Matrix** object. The default value is an identity matrix.| 876 877**Error codes** 878 879For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 880 881| ID| Error Message| 882| ------- | --------------------------------------------| 883| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 884 885**Example** 886 887```ts 888import { common2D, drawing } from '@kit.ArkGraphics2D'; 889 890let path = new drawing.Path(); 891let matrix = new drawing.Matrix(); 892const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 893let roundRect = new drawing.RoundRect(rect, 50, 50); 894path.addRoundRect(roundRect, drawing.PathDirection.CLOCKWISE); 895let dstPath = new drawing.Path(); 896dstPath.addPath(path, matrix); 897``` 898 899### transform<sup>12+</sup> 900 901transform(matrix: Matrix): void 902 903Transforms the points in this path by a matrix. 904 905**System capability**: SystemCapability.Graphics.Drawing 906 907**Parameters** 908 909| Name | Type | Mandatory | Description | 910| ----------- | ---------------------------------------- | ---- | ------------------- | 911| matrix | [Matrix](#matrix12) | Yes | **Matrix** object.| 912 913**Error codes** 914 915For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 916 917| ID| Error Message| 918| ------- | --------------------------------------------| 919| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 920 921**Example** 922 923```ts 924import { common2D, drawing } from '@kit.ArkGraphics2D'; 925 926let path = new drawing.Path(); 927let matrix = new drawing.Matrix(); 928matrix.setScale(1.5, 1.5, 10, 10); 929const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 930let roundRect = new drawing.RoundRect(rect, 50, 50); 931path.addRoundRect(roundRect, drawing.PathDirection.CLOCKWISE); 932path.transform(matrix); 933``` 934 935### contains<sup>12+</sup> 936 937contains(x: number, y: number): boolean 938 939Checks whether a coordinate point is included in this path. For details, see [PathFillType](#pathfilltype12). 940 941**System capability**: SystemCapability.Graphics.Drawing 942 943**Parameters** 944 945| Name| Type | Mandatory| Description | 946| ------ | ------ | ---- | ----------------------- | 947| x | number | Yes | X coordinate. The value is a floating point number.| 948| y | number | Yes | Y coordinate. The value is a floating point number.| 949 950**Return value** 951 952| Type | Description | 953| ------- | -------------- | 954| boolean | Check result. The value **true** means that the coordinate point is included in the path, and **false** means the opposite.| 955 956**Error codes** 957 958For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 959 960| ID| Error Message| 961| ------- | --------------------------------------------| 962| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 963 964**Example** 965 966```ts 967import { common2D, drawing } from '@kit.ArkGraphics2D'; 968 969const path = new drawing.Path(); 970let rect : common2D.Rect = {left: 50, top: 50, right: 250, bottom: 250}; 971path.addRect(rect, drawing.PathDirection.CLOCKWISE); 972console.info("test contains: " + path.contains(0, 0)); 973console.info("test contains: " + path.contains(60, 60)); 974``` 975 976### setFillType<sup>12+</sup> 977 978setFillType(pathFillType: PathFillType): void 979 980Sets 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. 981 982**System capability**: SystemCapability.Graphics.Drawing 983 984**Parameters** 985 986| Name | Type | Mandatory | Description | 987| ----------- | ---------------------------------------- | ---- | ------------------- | 988| pathFillType | [PathFillType](#pathfilltype12) | Yes | Fill type of the path.| 989 990**Error codes** 991 992For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 993 994| ID| Error Message| 995| ------- | --------------------------------------------| 996| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 997 998**Example** 999 1000```ts 1001import { drawing } from '@kit.ArkGraphics2D'; 1002 1003const path = new drawing.Path(); 1004path.setFillType(drawing.PathFillType.WINDING); 1005``` 1006 1007### getBounds<sup>12+</sup> 1008 1009getBounds(): common2D.Rect 1010 1011Obtains the minimum bounding rectangle that encloses this path. 1012 1013**System capability**: SystemCapability.Graphics.Drawing 1014 1015**Return value** 1016 1017| Type | Description | 1018| -------------------------------------------------- | ---------------------- | 1019| [common2D.Rect](js-apis-graphics-common2D.md#rect) | Minimum bounding rectangle.| 1020 1021**Example** 1022 1023```ts 1024import { common2D, drawing } from '@kit.ArkGraphics2D'; 1025 1026const path = new drawing.Path(); 1027path.lineTo(50, 40) 1028let rect : common2D.Rect = {left: 0, top: 0, right: 0, bottom: 0}; 1029rect = path.getBounds(); 1030console.info("test rect.left: " + rect.left); 1031console.info("test rect.top: " + rect.top); 1032console.info("test rect.right: " + rect.right); 1033console.info("test rect.bottom: " + rect.bottom); 1034``` 1035 1036### addPolygon<sup>12+</sup> 1037 1038addPolygon(points: Array\<common2D.Point>, close: boolean): void 1039 1040Adds a polygon to this path. 1041 1042**System capability**: SystemCapability.Graphics.Drawing 1043 1044**Parameters** 1045 1046| Name| Type | Mandatory| Description | 1047| ------ | ------ | ---- | ----------------------- | 1048| points | Array\<[common2D.Point](js-apis-graphics-common2D.md#point)> | Yes | Array that holds the vertex coordinates of the polygon.| 1049| 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.| 1050 1051**Error codes** 1052 1053For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1054 1055| ID| Error Message| 1056| ------- | --------------------------------------------| 1057| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1058 1059**Example** 1060 1061```ts 1062import { common2D, drawing } from '@kit.ArkGraphics2D'; 1063 1064let pointsArray = new Array<common2D.Point>(); 1065const point1: common2D.Point = { x: 200, y: 200 }; 1066const point2: common2D.Point = { x: 400, y: 200 }; 1067const point3: common2D.Point = { x: 100, y: 400 }; 1068const point4: common2D.Point = { x: 300, y: 400 }; 1069pointsArray.push(point1); 1070pointsArray.push(point2); 1071pointsArray.push(point3); 1072pointsArray.push(point4); 1073const path = new drawing.Path(); 1074path.addPolygon(pointsArray, false); 1075``` 1076 1077### offset<sup>12+</sup> 1078 1079offset(dx: number, dy: number): Path 1080 1081Offsets this path by specified distances along the X axis and Y axis and stores the resulting path in the **Path** object returned. 1082 1083**System capability**: SystemCapability.Graphics.Drawing 1084 1085**Parameters** 1086 1087| Name| Type | Mandatory| Description | 1088| ------ | ------ | ---- | ----------------------- | 1089| 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.| 1090| 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.| 1091 1092**Return value** 1093 1094| Type | Description | 1095| ------ | ------------------ | 1096| [Path](#path) | New path generated.| 1097 1098**Error codes** 1099 1100For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1101 1102| ID| Error Message| 1103| ------- | --------------------------------------------| 1104| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1105 1106**Example** 1107 1108```ts 1109import { drawing } from '@kit.ArkGraphics2D'; 1110 1111const path = new drawing.Path(); 1112path.moveTo(200, 200); 1113path.lineTo(300, 300); 1114const dst = path.offset(200, 200); 1115``` 1116 1117### op<sup>12+</sup> 1118 1119op(path: Path, pathOp: PathOp): boolean 1120 1121Combines this path with the passed-in path based on the specified operation mode. 1122 1123**System capability**: SystemCapability.Graphics.Drawing 1124 1125**Parameters** 1126 1127| Name| Type | Mandatory| Description | 1128| ------ | ------ | ---- | ----------------------- | 1129| path | [Path](#path) | Yes | Path object, which will be combined with the current path.| 1130| pathOp | [PathOp](#pathop12) | Yes | Operation mode. | 1131 1132**Return value** 1133 1134| Type | Description | 1135| ------ | ------------------ | 1136| boolean | Result of the path combination result. The value **true** means that the path combination is successful, and **false** means the opposite.| 1137 1138**Error codes** 1139 1140For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1141 1142| ID| Error Message| 1143| ------- | --------------------------------------------| 1144| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 1145 1146**Example** 1147 1148```ts 1149import { drawing } from '@kit.ArkGraphics2D'; 1150 1151const path = new drawing.Path(); 1152const path2 = new drawing.Path(); 1153path.addCircle(100, 200, 100, drawing.PathDirection.CLOCKWISE); 1154console.info("get pathOp: ", path2.op(path, drawing.PathOp.DIFFERENCE)); 1155``` 1156 1157### close 1158 1159close(): void 1160 1161Closes this path by adding a line segment from the start point to the last point of the path. 1162 1163**System capability**: SystemCapability.Graphics.Drawing 1164 1165**Example** 1166 1167```ts 1168import { drawing } from '@kit.ArkGraphics2D'; 1169 1170let path = new drawing.Path(); 1171path.moveTo(10,10); 1172path.cubicTo(10, 10, 10, 10, 15, 15); 1173path.close(); 1174``` 1175 1176### reset 1177 1178reset(): void 1179 1180Resets the path data. 1181 1182**System capability**: SystemCapability.Graphics.Drawing 1183 1184**Example** 1185 1186```ts 1187import { drawing } from '@kit.ArkGraphics2D'; 1188 1189let path = new drawing.Path(); 1190path.moveTo(10,10); 1191path.cubicTo(10, 10, 10, 10, 15, 15); 1192path.reset(); 1193``` 1194 1195### getLength<sup>12+</sup> 1196 1197getLength(forceClosed: boolean): number 1198 1199Obtains the path length. 1200 1201**System capability**: SystemCapability.Graphics.Drawing 1202 1203**Parameters** 1204 1205| Name| Type | Mandatory| Description | 1206| ----- | ------ | ---- | --------- | 1207| 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.| 1208 1209**Return value** 1210 1211| Type | Description| 1212| ------ | ---- | 1213| number | Path length.| 1214 1215**Example** 1216 1217```ts 1218import { drawing } from '@kit.ArkGraphics2D'; 1219 1220let path = new drawing.Path(); 1221path.arcTo(20, 20, 180, 180, 180, 90); 1222let len = path.getLength(false); 1223console.info("path length = " + len); 1224``` 1225 1226### getPositionAndTangent<sup>12+</sup> 1227 1228getPositionAndTangent(forceClosed: boolean, distance: number, position: common2D.Point, tangent: common2D.Point): boolean 1229 1230Obtains the coordinates and tangent at a distance from the start point of this path. 1231 1232**System capability**: SystemCapability.Graphics.Drawing 1233 1234**Parameters** 1235 1236| Name | Type | Mandatory| Description | 1237| -------- | -------------------------------------------- | ---- | ------------------------------- | 1238| 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. | 1239| 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. | 1240| position | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | Coordinates obtained. | 1241| 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. | 1242 1243**Return value** 1244 1245| Type | Description | 1246| --------------------- | -------------- | 1247| 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.| 1248 1249**Error codes** 1250 1251For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1252 1253| ID| Error Message| 1254| ------- | --------------------------------------------| 1255| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1256 1257**Example** 1258 1259```ts 1260import { common2D, drawing } from '@kit.ArkGraphics2D'; 1261 1262let path: drawing.Path = new drawing.Path(); 1263path.moveTo(0, 0); 1264path.lineTo(0, 700); 1265path.lineTo(700, 0); 1266let position: common2D.Point = { x: 0.0, y: 0.0 }; 1267let tangent: common2D.Point = { x: 0.0, y: 0.0 }; 1268if (path.getPositionAndTangent(false, 0.1, position, tangent)) { 1269 console.info("getPositionAndTangent-----position: "+ position.x); 1270 console.info("getPositionAndTangent-----position: "+ position.y); 1271 console.info("getPositionAndTangent-----tangent: "+ tangent.x); 1272 console.info("getPositionAndTangent-----tangent: "+ tangent.y); 1273} 1274``` 1275 1276### getSegment<sup>18+</sup> 1277 1278getSegment(forceClosed: boolean, start: number, stop: number, startWithMoveTo: boolean, dst: Path): boolean 1279 1280Extracts a segment of this path and appends it to a destination path. 1281 1282**System capability**: SystemCapability.Graphics.Drawing 1283 1284**Parameters** 1285 1286| Name | Type | Mandatory| Description | 1287| -------- | -------------------------------------------- | ---- | ------------------------------- | 1288| 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. | 1289| 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. | 1290| 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. | 1291| 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. | 1292| dst | number | [Path](#path) | Destination path. If the extraction succeeds, the segment is appended to the path. If the extraction fails, nothing changes. | 1293 1294**Return value** 1295 1296| Type | Description | 1297| --------------------- | -------------- | 1298| boolean |Extraction result. The value **true** means that the extraction is successful, and **false** means the opposite.| 1299 1300**Example** 1301 1302```ts 1303import { drawing } from '@kit.ArkGraphics2D'; 1304 1305let path: drawing.Path = new drawing.Path(); 1306path.moveTo(0, 0); 1307path.lineTo(0, 700); 1308path.lineTo(700, 0); 1309let dstPath: drawing.Path = new drawing.Path(); 1310console.info("getSegment-----result: "+ path.getSegment(true, 10.0, 20.0, true, dstPath)); 1311``` 1312 1313### isClosed<sup>12+</sup> 1314 1315isClosed(): boolean 1316 1317Checks whether a path is closed. 1318 1319**System capability**: SystemCapability.Graphics.Drawing 1320 1321**Return value** 1322 1323| Type | Description | 1324| --------------------- | -------------- | 1325| boolean | Check result. The value **true** means that the path is closed, and **false** means the opposite.| 1326 1327**Example** 1328 1329```ts 1330import { drawing } from '@kit.ArkGraphics2D'; 1331 1332let path: drawing.Path = new drawing.Path(); 1333path.moveTo(0, 0); 1334path.lineTo(0, 700); 1335if (path.isClosed()) { 1336 console.info("path is closed."); 1337} else { 1338 console.info("path is not closed."); 1339} 1340``` 1341 1342### getMatrix<sup>12+</sup> 1343 1344getMatrix(forceClosed: boolean, distance: number, matrix: Matrix, flags: PathMeasureMatrixFlags): boolean 1345 1346Obtains a transformation matrix at a specific position along the path, which represents the coordinates and orientation of that point. 1347 1348**System capability**: SystemCapability.Graphics.Drawing 1349 1350**Parameters** 1351 1352| Name | Type | Mandatory| Description | 1353| -------- | -------------------------------------------- | ---- | ------------------------------- | 1354| 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. | 1355| 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. | 1356| matrix | [Matrix](#matrix12) | Yes | **Matrix** object used to store the matrix obtained. | 1357| flags | [PathMeasureMatrixFlags](#pathmeasurematrixflags12) | Yes | Type of the matrix information obtained. | 1358 1359**Return value** 1360 1361| Type | Description | 1362| --------------------- | -------------- | 1363| boolean | Result indicating whether the transformation matrix is obtained. The value **true** means that the operation is successful, and **false** means the opposite.| 1364 1365**Error codes** 1366 1367For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1368 1369| ID| Error Message| 1370| ------- | --------------------------------------------| 1371| 401 | Parameter error. Possible causes: Mandatory parameters are left unspecified. | 1372 1373**Example** 1374 1375```ts 1376import { drawing } from '@kit.ArkGraphics2D'; 1377 1378let path: drawing.Path = new drawing.Path(); 1379let matrix = new drawing.Matrix(); 1380if(path.getMatrix(false, 10, matrix, drawing.PathMeasureMatrixFlags.GET_TANGENT_MATRIX)) { 1381 console.info("path.getMatrix return true"); 1382} else { 1383 console.info("path.getMatrix return false"); 1384} 1385``` 1386 1387### buildFromSvgString<sup>12+</sup> 1388 1389buildFromSvgString(str: string): boolean 1390 1391Parses the path represented by an SVG string. 1392 1393**System capability**: SystemCapability.Graphics.Drawing 1394 1395**Parameters** 1396 1397| Name | Type | Mandatory| Description | 1398| -------- | -------------------------------------------- | ---- | ------------------------------- | 1399| str | string | Yes | String in SVG format, which is used to describe the path. | 1400 1401**Return value** 1402 1403| Type | Description | 1404| --------------------- | -------------- | 1405| boolean | Result of the parsing operation. The value **true** means that the operation is successful, and **false** means the opposite.| 1406 1407**Error codes** 1408 1409For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1410 1411| ID| Error Message| 1412| ------- | --------------------------------------------| 1413| 401 | Parameter error. Possible causes: Mandatory parameters are left unspecified. | 1414 1415**Example** 1416 1417```ts 1418import { drawing } from '@kit.ArkGraphics2D'; 1419 1420let path: drawing.Path = new drawing.Path(); 1421let svgStr: string = "M150 100 L75 300 L225 300 Z"; 1422if(path.buildFromSvgString(svgStr)) { 1423 console.info("buildFromSvgString return true"); 1424} else { 1425 console.info("buildFromSvgString return false"); 1426} 1427``` 1428 1429### getPathIterator<sup>18+</sup> 1430 1431getPathIterator(): PathIterator 1432 1433Obtains the operation iterator of this path. 1434 1435**System capability**: SystemCapability.Graphics.Drawing 1436 1437**Return value** 1438 1439| Type | Description | 1440| --------------------- | -------------- | 1441| [PathIterator](#pathiterator18) | **Iterator** object of the path.| 1442 1443**Example** 1444 1445```ts 1446import { drawing } from '@kit.ArkGraphics2D'; 1447 1448let path: drawing.Path = new drawing.Path(); 1449let iter = path.getPathIterator(); 1450``` 1451 1452## Canvas 1453 1454A carrier that carries the drawn content and drawing status. 1455 1456> **NOTE** 1457> 1458> The canvas comes with a default brush. The brush is black, has anti-aliasing enabled, and has no other style effects. This default brush is used when no brush or pen is actively set in the canvas. 1459 1460### constructor 1461 1462constructor(pixelmap: image.PixelMap) 1463 1464Creates a **Canvas** object that uses a PixelMap as the drawing target. 1465 1466**System capability**: SystemCapability.Graphics.Drawing 1467 1468**Parameters** 1469 1470| Name | Type | Mandatory| Description | 1471| -------- | -------------------------------------------- | ---- | -------------- | 1472| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap used to create the object.| 1473 1474**Error codes** 1475 1476For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1477 1478| ID| Error Message| 1479| ------- | --------------------------------------------| 1480| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1481 1482**Example** 1483 1484```ts 1485import { drawing } from '@kit.ArkGraphics2D'; 1486import { image } from '@kit.ImageKit'; 1487 1488const color = new ArrayBuffer(96); 1489let opts : image.InitializationOptions = { 1490 editable: true, 1491 pixelFormat: 3, 1492 size: { 1493 height: 4, 1494 width: 6 1495 } 1496} 1497image.createPixelMap(color, opts).then((pixelMap) => { 1498 const canvas = new drawing.Canvas(pixelMap); 1499}) 1500``` 1501 1502### drawRect 1503 1504drawRect(rect: common2D.Rect): void 1505 1506Draws a rectangle. By default, black is used for filling. 1507 1508**System capability**: SystemCapability.Graphics.Drawing 1509 1510**Parameters** 1511 1512| Name| Type | Mandatory| Description | 1513| ------ | -------------------------------------------------- | ---- | -------------- | 1514| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangle to draw.| 1515 1516**Error codes** 1517 1518For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1519 1520| ID| Error Message| 1521| ------- | --------------------------------------------| 1522| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1523 1524**Example** 1525 1526```ts 1527import { RenderNode } from '@kit.ArkUI'; 1528import { common2D, drawing } from '@kit.ArkGraphics2D'; 1529 1530class DrawingRenderNode extends RenderNode { 1531 draw(context : DrawContext) { 1532 const canvas = context.canvas; 1533 const pen = new drawing.Pen(); 1534 pen.setStrokeWidth(5); 1535 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1536 canvas.attachPen(pen); 1537 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 1538 canvas.detachPen(); 1539 } 1540} 1541``` 1542 1543### drawRect<sup>12+</sup> 1544 1545drawRect(left: number, top: number, right: number, bottom: number): void 1546 1547Draws a rectangle. By default, black is used for filling. This API provides better performance than [drawRect](#drawrect) and is recommended. 1548 1549**System capability**: SystemCapability.Graphics.Drawing 1550 1551**Parameters** 1552 1553| Name| Type | Mandatory| Description | 1554| ------ | ------ | ---- | -------------- | 1555| left | number | Yes | X coordinate of the upper left corner of the rectangle. The value is a floating point number.| 1556| top | number | Yes | Y coordinate of the upper left corner of the rectangle. The value is a floating point number.| 1557| right | number | Yes | X coordinate of the lower right corner of the rectangle. The value is a floating point number.| 1558| bottom | number | Yes | Y coordinate of the lower right corner of the rectangle. The value is a floating point number.| 1559 1560**Error codes** 1561 1562For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1563 1564| ID| Error Message| 1565| ------- | --------------------------------------------| 1566| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1567 1568**Example** 1569 1570```ts 1571import { RenderNode } from '@kit.ArkUI'; 1572import { drawing } from '@kit.ArkGraphics2D'; 1573 1574class DrawingRenderNode extends RenderNode { 1575 1576 draw(context : DrawContext) { 1577 const canvas = context.canvas; 1578 const pen = new drawing.Pen(); 1579 pen.setStrokeWidth(5); 1580 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1581 canvas.attachPen(pen); 1582 canvas.drawRect(0, 0, 10, 10); 1583 canvas.detachPen(); 1584 } 1585} 1586``` 1587 1588### drawRoundRect<sup>12+</sup> 1589 1590drawRoundRect(roundRect: RoundRect): void 1591 1592Draws a rounded rectangle. 1593 1594**System capability**: SystemCapability.Graphics.Drawing 1595 1596**Parameters** 1597 1598| Name | Type | Mandatory| Description | 1599| ---------- | ----------------------- | ---- | ------------ | 1600| roundRect | [RoundRect](#roundrect12) | Yes | Rounded rectangle.| 1601 1602**Error codes** 1603 1604For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1605 1606| ID| Error Message| 1607| ------- | --------------------------------------------| 1608| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1609 1610**Example** 1611 1612```ts 1613import { RenderNode } from '@kit.ArkUI'; 1614import { common2D, drawing } from '@kit.ArkGraphics2D'; 1615 1616class DrawingRenderNode extends RenderNode { 1617 draw(context : DrawContext) { 1618 const canvas = context.canvas; 1619 let rect: common2D.Rect = { left : 100, top : 100, right : 400, bottom : 500 }; 1620 let roundRect = new drawing.RoundRect(rect, 10, 10); 1621 canvas.drawRoundRect(roundRect); 1622 } 1623} 1624``` 1625 1626### drawNestedRoundRect<sup>12+</sup> 1627 1628drawNestedRoundRect(outer: RoundRect, inner: RoundRect): void 1629 1630Draws two nested rounded rectangles. The outer rectangle boundary must contain the inner rectangle boundary. Otherwise, there is no drawing effect. 1631 1632**System capability**: SystemCapability.Graphics.Drawing 1633 1634**Parameters** 1635 1636| Name | Type | Mandatory| Description | 1637| ------ | ----------------------- | ---- | ------------ | 1638| outer | [RoundRect](#roundrect12) | Yes | Outer rounded rectangle.| 1639| inner | [RoundRect](#roundrect12) | Yes | Inner rounded rectangle.| 1640 1641**Error codes** 1642 1643For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1644 1645| ID| Error Message| 1646| ------- | --------------------------------------------| 1647| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1648 1649**Example** 1650 1651```ts 1652import { RenderNode } from '@kit.ArkUI'; 1653import { common2D, drawing } from '@kit.ArkGraphics2D'; 1654 1655class DrawingRenderNode extends RenderNode { 1656 draw(context : DrawContext) { 1657 const canvas = context.canvas; 1658 let inRect: common2D.Rect = { left : 200, top : 200, right : 400, bottom : 500 }; 1659 let outRect: common2D.Rect = { left : 100, top : 100, right : 400, bottom : 500 }; 1660 let outRoundRect = new drawing.RoundRect(outRect, 10, 10); 1661 let inRoundRect = new drawing.RoundRect(inRect, 10, 10); 1662 canvas.drawNestedRoundRect(outRoundRect, inRoundRect); 1663 canvas.drawRoundRect(outRoundRect); 1664 } 1665} 1666``` 1667 1668### drawBackground<sup>12+</sup> 1669 1670drawBackground(brush: Brush): void 1671 1672Uses a brush to fill the drawable area of the canvas. 1673 1674**System capability**: SystemCapability.Graphics.Drawing 1675 1676**Parameters** 1677 1678| Name| Type | Mandatory| Description | 1679| ------ | --------------- | ---- | ---------- | 1680| brush | [Brush](#brush) | Yes | **Brush** object.| 1681 1682**Error codes** 1683 1684For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1685 1686| ID| Error Message| 1687| ------- | --------------------------------------------| 1688| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1689 1690**Example** 1691 1692```ts 1693import { RenderNode } from '@kit.ArkUI'; 1694import { common2D, drawing } from '@kit.ArkGraphics2D'; 1695 1696class DrawingRenderNode extends RenderNode { 1697 draw(context : DrawContext) { 1698 const canvas = context.canvas; 1699 const brush = new drawing.Brush(); 1700 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 1701 brush.setColor(color); 1702 canvas.drawBackground(brush); 1703 } 1704} 1705``` 1706 1707### drawShadow<sup>12+</sup> 1708 1709drawShadow(path: Path, planeParams: common2D.Point3d, devLightPos: common2D.Point3d, lightRadius: number, ambientColor: common2D.Color, spotColor: common2D.Color, flag: ShadowFlag) : void 1710 1711Draws a spot shadow and uses a given path to outline the ambient shadow. 1712 1713**System capability**: SystemCapability.Graphics.Drawing 1714 1715**Parameters** 1716 1717| Name | Type | Mandatory | Description | 1718| ------------ | ---------------------------------------- | ---- | ---------- | 1719| path | [Path](#path) | Yes | **Path** object, which is used to outline the shadow.| 1720| 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.| 1721| devLightPos | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | Yes | Position of the light relative to the canvas.| 1722| lightRadius | number | Yes | Radius of the light. The value is a floating point number. | 1723| ambientColor | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color of the ambient shadow.| 1724| spotColor | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color of the spot shadow.| 1725| flag | [ShadowFlag](#shadowflag12) | Yes | Shadow flag. | 1726 1727**Error codes** 1728 1729For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1730 1731| ID| Error Message| 1732| ------- | --------------------------------------------| 1733| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 1734 1735**Example** 1736 1737```ts 1738import { RenderNode } from '@kit.ArkUI'; 1739import { common2D, drawing } from '@kit.ArkGraphics2D'; 1740 1741class DrawingRenderNode extends RenderNode { 1742 draw(context : DrawContext) { 1743 const canvas = context.canvas; 1744 const path = new drawing.Path(); 1745 path.addCircle(100, 200, 100, drawing.PathDirection.CLOCKWISE); 1746 let pen = new drawing.Pen(); 1747 pen.setAntiAlias(true); 1748 let pen_color : common2D.Color = { alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00 }; 1749 pen.setColor(pen_color); 1750 pen.setStrokeWidth(10.0); 1751 canvas.attachPen(pen); 1752 let brush = new drawing.Brush(); 1753 let brush_color : common2D.Color = { alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00 }; 1754 brush.setColor(brush_color); 1755 canvas.attachBrush(brush); 1756 let point1 : common2D.Point3d = {x: 100, y: 80, z:80}; 1757 let point2 : common2D.Point3d = {x: 200, y: 10, z:40}; 1758 let color1 : common2D.Color = {alpha: 0xFF, red:0, green:0, blue:0xFF}; 1759 let color2 : common2D.Color = {alpha: 0xFF, red:0xFF, green:0, blue:0}; 1760 let shadowFlag : drawing.ShadowFlag = drawing.ShadowFlag.ALL; 1761 canvas.drawShadow(path, point1, point2, 30, color1, color2, shadowFlag); 1762 } 1763} 1764``` 1765 1766### drawShadow<sup>18+</sup> 1767 1768drawShadow(path: Path, planeParams: common2D.Point3d, devLightPos: common2D.Point3d, lightRadius: number, ambientColor: common2D.Color | number, spotColor: common2D.Color | number, flag: ShadowFlag) : void 1769 1770Draws a spot shadow and uses a given path to outline the ambient shadow. 1771 1772**System capability**: SystemCapability.Graphics.Drawing 1773 1774**Parameters** 1775 1776| Name | Type | Mandatory | Description | 1777| ------------ | ---------------------------------------- | ---- | ---------- | 1778| path | [Path](#path) | Yes | **Path** object, which is used to outline the shadow.| 1779| planeParams | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | Yes | 3D vector, which is used to calculate the offset in the Z axis.| 1780| devLightPos | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | Yes | Position of the light relative to the canvas.| 1781| lightRadius | number | Yes | Radius of the light. The value is a floating point number. | 1782| 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.| 1783| 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.| 1784| flag | [ShadowFlag](#shadowflag12) | Yes | Shadow flag. | 1785 1786**Error codes** 1787 1788For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1789 1790| ID| Error Message| 1791| ------- | --------------------------------------------| 1792| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 1793 1794**Example** 1795 1796```ts 1797import { RenderNode } from '@kit.ArkUI'; 1798import { common2D, drawing } from '@kit.ArkGraphics2D'; 1799 1800class DrawingRenderNode extends RenderNode { 1801 draw(context : DrawContext) { 1802 const canvas = context.canvas; 1803 const path = new drawing.Path(); 1804 path.addCircle(300, 600, 100, drawing.PathDirection.CLOCKWISE); 1805 let point1 : common2D.Point3d = {x: 100, y: 80, z:80}; 1806 let point2 : common2D.Point3d = {x: 200, y: 10, z:40}; 1807 let shadowFlag : drawing.ShadowFlag = drawing.ShadowFlag.ALL; 1808 canvas.drawShadow(path, point1, point2, 30, 0xFF0000FF, 0xFFFF0000, shadowFlag); 1809 } 1810} 1811``` 1812 1813### getLocalClipBounds<sup>12+</sup> 1814 1815getLocalClipBounds(): common2D.Rect 1816 1817Obtains the bounds of the cropping region of the canvas. 1818 1819**System capability**: SystemCapability.Graphics.Drawing 1820 1821**Return value** 1822 1823| Type | Description | 1824| ---------------------------------------- | -------- | 1825| [common2D.Rect](js-apis-graphics-common2D.md#rect) | Bounds of the cropping region.| 1826 1827**Example** 1828 1829```ts 1830import { RenderNode } from '@kit.ArkUI'; 1831import { common2D, drawing } from '@kit.ArkGraphics2D'; 1832 1833class DrawingRenderNode extends RenderNode { 1834 draw(context : DrawContext) { 1835 const canvas = context.canvas; 1836 let clipRect: common2D.Rect = { 1837 left : 150, top : 150, right : 300, bottom : 400 1838 }; 1839 canvas.clipRect(clipRect,drawing.ClipOp.DIFFERENCE, true); 1840 console.info("test rect.left: " + clipRect.left); 1841 console.info("test rect.top: " + clipRect.top); 1842 console.info("test rect.right: " + clipRect.right); 1843 console.info("test rect.bottom: " + clipRect.bottom); 1844 canvas.getLocalClipBounds(); 1845 } 1846} 1847``` 1848 1849### getTotalMatrix<sup>12+</sup> 1850 1851getTotalMatrix(): Matrix 1852 1853Obtains the canvas matrix. 1854 1855**System capability**: SystemCapability.Graphics.Drawing 1856 1857**Return value** 1858 1859| Type | Description | 1860| ----------------- | -------- | 1861| [Matrix](#matrix12) |Canvas matrix.| 1862 1863**Example** 1864 1865```ts 1866import { RenderNode } from '@kit.ArkUI'; 1867import { drawing } from '@kit.ArkGraphics2D'; 1868 1869class DrawingRenderNode extends RenderNode { 1870 draw(context : DrawContext) { 1871 const canvas = context.canvas; 1872 let matrix = new drawing.Matrix(); 1873 matrix.setMatrix([5, 0, 0, 0, 1, 1, 0, 0, 1]); 1874 canvas.setMatrix(matrix); 1875 let matrixResult =canvas.getTotalMatrix(); 1876 } 1877} 1878``` 1879 1880### drawCircle 1881 1882drawCircle(x: number, y: number, radius: number): void 1883 1884Draws a circle. If the radius is less than or equal to zero, nothing is drawn. By default, black is used for filling. 1885 1886**System capability**: SystemCapability.Graphics.Drawing 1887 1888**Parameters** 1889 1890| Name| Type | Mandatory| Description | 1891| ------ | ------ | ---- | ------------------- | 1892| x | number | Yes | X coordinate of the center of the circle. The value is a floating point number.| 1893| y | number | Yes | Y coordinate of the center of the circle. The value is a floating point number.| 1894| radius | number | Yes | Radius of the circle. The value is a floating point number greater than 0.| 1895 1896**Error codes** 1897 1898For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1899 1900| ID| Error Message| 1901| ------- | --------------------------------------------| 1902| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 1903 1904**Example** 1905 1906```ts 1907import { RenderNode } from '@kit.ArkUI'; 1908import { drawing } from '@kit.ArkGraphics2D'; 1909 1910class DrawingRenderNode extends RenderNode { 1911 draw(context : DrawContext) { 1912 const canvas = context.canvas; 1913 const pen = new drawing.Pen(); 1914 pen.setStrokeWidth(5); 1915 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1916 canvas.attachPen(pen); 1917 canvas.drawCircle(10, 10, 2); 1918 canvas.detachPen(); 1919 } 1920} 1921``` 1922 1923### drawImage 1924 1925drawImage(pixelmap: image.PixelMap, left: number, top: number, samplingOptions?: SamplingOptions): void 1926 1927Draws an image. The coordinates of the upper left corner of the image are (left, top). 1928 1929**System capability**: SystemCapability.Graphics.Drawing 1930 1931**Parameters** 1932 1933| Name | Type | Mandatory| Description | 1934| -------- | -------------------------------------------- | ---- | ------------------------------- | 1935| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap. | 1936| left | number | Yes | X coordinate of the upper left corner of the image. The value is a floating point number.| 1937| top | number | Yes | Y coordinate of the upper left corner of the image. The value is a floating point number.| 1938| samplingOptions<sup>12+</sup> | [SamplingOptions](#samplingoptions12) | No | Sampling options. By default, the **SamplingOptions** object created using the no-argument constructor is used.| 1939 1940**Error codes** 1941 1942For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1943 1944| ID| Error Message| 1945| ------- | --------------------------------------------| 1946| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1947 1948**Example** 1949 1950```ts 1951import { RenderNode } from '@kit.ArkUI'; 1952import { image } from '@kit.ImageKit'; 1953import { drawing } from '@kit.ArkGraphics2D'; 1954 1955class DrawingRenderNode extends RenderNode { 1956 pixelMap: image.PixelMap | null = null; 1957 1958 async draw(context : DrawContext) { 1959 const canvas = context.canvas; 1960 let options = new drawing.SamplingOptions(drawing.FilterMode.FILTER_MODE_NEAREST); 1961 if (this.pixelMap != null) { 1962 canvas.drawImage(this.pixelMap, 0, 0, options); 1963 } 1964 } 1965} 1966``` 1967 1968### drawImageRect<sup>12+</sup> 1969 1970drawImageRect(pixelmap: image.PixelMap, dstRect: common2D.Rect, samplingOptions?: SamplingOptions): void 1971 1972Draws an image onto a specified area of the canvas. 1973 1974**System capability**: SystemCapability.Graphics.Drawing 1975 1976**Parameters** 1977 1978| Name | Type | Mandatory| Description | 1979| -------- | -------------------------------------------- | ---- | ------------------------------- | 1980| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap. | 1981| 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.| 1982| samplingOptions | [SamplingOptions](#samplingoptions12) | No | Sampling options. By default, the **SamplingOptions** object created using the no-argument constructor is used.| 1983 1984**Error codes** 1985 1986For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1987 1988| ID| Error Message| 1989| ------- | --------------------------------------------| 1990| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1991 1992**Example** 1993 1994```ts 1995import { RenderNode } from '@kit.ArkUI'; 1996import { image } from '@kit.ImageKit'; 1997import { common2D, drawing } from '@kit.ArkGraphics2D'; 1998 1999class DrawingRenderNode extends RenderNode { 2000pixelMap: image.PixelMap | null = null; 2001 draw(context : DrawContext) { 2002 const canvas = context.canvas; 2003 let pen = new drawing.Pen(); 2004 canvas.attachPen(pen); 2005 let rect: common2D.Rect = { left: 0, top: 0, right: 200, bottom: 200 }; 2006 canvas.drawImageRect(this.pixelMap, rect); 2007 canvas.detachPen(); 2008 } 2009} 2010``` 2011 2012### drawImageRectWithSrc<sup>12+</sup> 2013 2014drawImageRectWithSrc(pixelmap: image.PixelMap, srcRect: common2D.Rect, dstRect: common2D.Rect, samplingOptions?: SamplingOptions, constraint?: SrcRectConstraint): void 2015 2016Draws a portion of an image onto a specified area of the canvas. 2017 2018**System capability**: SystemCapability.Graphics.Drawing 2019 2020**Parameters** 2021 2022| Name | Type | Mandatory| Description | 2023| -------- | -------------------------------------------- | ---- | ------------------------------- | 2024| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap. | 2025| srcRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | **Rectangle** object, which specifies the portion of the image to draw.| 2026| 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.| 2027| samplingOptions | [SamplingOptions](#samplingoptions12) | No | Sampling options. By default, the **SamplingOptions** object created using the no-argument constructor is used.| 2028| constraint | [SrcRectConstraint](#srcrectconstraint12) | No | Constraint type of the source rectangle. The default value is **STRICT**.| 2029 2030**Error codes** 2031 2032For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2033 2034| ID| Error Message| 2035| ------- | --------------------------------------------| 2036| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2037 2038**Example** 2039 2040```ts 2041import { RenderNode } from '@kit.ArkUI'; 2042import { image } from '@kit.ImageKit'; 2043import { common2D, drawing } from '@kit.ArkGraphics2D'; 2044 2045class DrawingRenderNode extends RenderNode { 2046pixelMap: image.PixelMap | null = null; 2047 draw(context : DrawContext) { 2048 const canvas = context.canvas; 2049 let pen = new drawing.Pen(); 2050 canvas.attachPen(pen); 2051 let srcRect: common2D.Rect = { left: 0, top: 0, right: 100, bottom: 100 }; 2052 let dstRect: common2D.Rect = { left: 100, top: 100, right: 200, bottom: 200 }; 2053 canvas.drawImageRectWithSrc(this.pixelMap, srcRect, dstRect); 2054 canvas.detachPen(); 2055 } 2056} 2057``` 2058 2059### drawColor 2060 2061drawColor(color: common2D.Color, blendMode?: BlendMode): void 2062 2063Fills the drawable area of the canvas with the specified color and [blend mode](#blendmode). 2064 2065**System capability**: SystemCapability.Graphics.Drawing 2066 2067**Parameters** 2068 2069| Name | Type | Mandatory| Description | 2070| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 2071| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. The value of each color channel is an integer ranging from 0 to 255. | 2072| blendMode | [BlendMode](#blendmode) | No | Blend mode. The default mode is **SRC_OVER**.| 2073 2074**Error codes** 2075 2076For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2077 2078| ID| Error Message| 2079| ------- | --------------------------------------------| 2080| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2081 2082**Example** 2083 2084```ts 2085import { RenderNode } from '@kit.ArkUI'; 2086import { common2D, drawing } from '@kit.ArkGraphics2D'; 2087 2088class DrawingRenderNode extends RenderNode { 2089 draw(context : DrawContext) { 2090 const canvas = context.canvas; 2091 let color: common2D.Color = { 2092 alpha : 255, 2093 red: 0, 2094 green: 10, 2095 blue: 10 2096 } 2097 canvas.drawColor(color, drawing.BlendMode.CLEAR); 2098 } 2099} 2100``` 2101 2102### drawColor<sup>12+</sup> 2103 2104drawColor(alpha: number, red: number, green: number, blue: number, blendMode?: BlendMode): void 2105 2106Fills the drawable area of the canvas with the specified color and [blend mode](#blendmode). This API provides better performance than [drawColor](#drawcolor) and is recommended. 2107 2108**System capability**: SystemCapability.Graphics.Drawing 2109 2110**Parameters** 2111 2112| Name | Type | Mandatory| Description | 2113| --------- | ----------------------- | ---- | ------------------------------------------------- | 2114| 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.| 2115| 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. | 2116| 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. | 2117| 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. | 2118| blendMode | [BlendMode](#blendmode) | No | Blend mode. The default mode is **SRC_OVER**. | 2119 2120**Error codes** 2121 2122For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2123 2124| ID| Error Message| 2125| ------- | --------------------------------------------| 2126| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2127 2128**Example** 2129 2130```ts 2131import { RenderNode } from '@kit.ArkUI'; 2132import { drawing } from '@kit.ArkGraphics2D'; 2133 2134class DrawingRenderNode extends RenderNode { 2135 draw(context : DrawContext) { 2136 const canvas = context.canvas; 2137 canvas.drawColor(255, 0, 10, 10, drawing.BlendMode.CLEAR); 2138 } 2139} 2140``` 2141 2142### drawColor<sup>18+</sup> 2143 2144drawColor(color: number, blendMode?: BlendMode): void 2145 2146Fills the drawable area of the canvas with the specified color and [blend mode](#blendmode). 2147 2148**System capability**: SystemCapability.Graphics.Drawing 2149 2150**Parameters** 2151 2152| Name | Type | Mandatory| Description | 2153| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 2154| color | number | Yes | Color in hexadecimal ARGB format. | 2155| blendMode | [BlendMode](#blendmode) | No | Blend mode. The default mode is **SRC_OVER**.| 2156 2157**Error codes** 2158 2159For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2160 2161| ID| Error Message| 2162| ------- | --------------------------------------------| 2163| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2164 2165**Example** 2166 2167```ts 2168import { RenderNode } from '@kit.ArkUI'; 2169import { drawing } from '@kit.ArkGraphics2D'; 2170 2171class DrawingRenderNode extends RenderNode { 2172 draw(context : DrawContext) { 2173 const canvas = context.canvas; 2174 canvas.drawColor(0xff000a0a, drawing.BlendMode.CLEAR); 2175 } 2176} 2177``` 2178 2179### drawPixelMapMesh<sup>12+</sup> 2180 2181drawPixelMapMesh(pixelmap: image.PixelMap, meshWidth: number, meshHeight: number, vertices: Array\<number>, vertOffset: number, colors: Array\<number>, colorOffset: number): void 2182 2183Draws a PixelMap based on a mesh, where mesh vertices are evenly distributed across the PixelMap. 2184 2185**System capability**: SystemCapability.Graphics.Drawing 2186 2187**Parameters** 2188 2189| Name | Type | Mandatory| Description | 2190| ----------- | ------------- | ---- | ------------------------------- | 2191| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap to draw.| 2192| meshWidth | number | Yes | Number of columns in the mesh. The value is an integer greater than 0.| 2193| meshHeight | number | Yes | Number of rows in the mesh. The value is an integer greater than 0.| 2194| 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.| 2195| vertOffset | number | Yes | Number of vert elements to skip before drawing. The value is an integer greater than or equal to 0.| 2196| 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.| 2197| colorOffset | number | Yes | Number of color elements to skip before drawing. The value is an integer greater than or equal to 0.| 2198 2199**Error codes** 2200 2201For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2202 2203| ID| Error Message| 2204| ------- | --------------------------------------------| 2205| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2206 2207**Example** 2208 2209```ts 2210import { RenderNode } from '@kit.ArkUI'; 2211import { image } from '@kit.ImageKit'; 2212import { drawing } from '@kit.ArkGraphics2D'; 2213 2214class DrawingRenderNode extends RenderNode { 2215 pixelMap: image.PixelMap | null = null; 2216 2217 async draw(context : DrawContext) { 2218 const canvas = context.canvas; 2219 if (this.pixelMap != null) { 2220 const brush = new drawing.Brush(); // Only brush is supported. There is no drawing effect when pen is used. 2221 canvas.attachBrush(brush); 2222 let verts : Array<number> = [0, 0, 50, 0, 410, 0, 0, 180, 50, 180, 410, 180, 0, 360, 50, 360, 410, 360]; // 18 2223 canvas.drawPixelMapMesh(this.pixelMap, 2, 2, verts, 0, null, 0); 2224 canvas.detachBrush(); 2225 } 2226 } 2227} 2228``` 2229 2230### clear<sup>12+</sup> 2231 2232clear(color: common2D.Color): void 2233 2234Clears the canvas with a given color. This API has the same effect as [drawColor](#drawcolor). 2235 2236**System capability**: SystemCapability.Graphics.Drawing 2237 2238**Parameters** 2239 2240| Name | Type | Mandatory| Description | 2241| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 2242| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. The value of each color channel is an integer ranging from 0 to 255. | 2243 2244**Error codes** 2245 2246For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2247 2248| ID| Error Message| 2249| ------- | --------------------------------------------| 2250| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2251 2252**Example** 2253 2254```ts 2255import { RenderNode } from '@kit.ArkUI'; 2256import { common2D, drawing } from '@kit.ArkGraphics2D'; 2257 2258class DrawingRenderNode extends RenderNode { 2259 draw(context : DrawContext) { 2260 const canvas = context.canvas; 2261 let color: common2D.Color = {alpha: 255, red: 255, green: 0, blue: 0}; 2262 canvas.clear(color); 2263 } 2264} 2265``` 2266 2267### clear<sup>18+</sup> 2268 2269clear(color: common2D.Color | number): void 2270 2271Clears the canvas with a given color. 2272 2273**System capability**: SystemCapability.Graphics.Drawing 2274 2275**Parameters** 2276 2277| Name | Type | Mandatory| Description | 2278| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 2279| color | [common2D.Color](js-apis-graphics-common2D.md#color) \| number| Yes | Color, represented by an unsigned integer in hexadecimal ARGB format. | 2280 2281**Example** 2282 2283```ts 2284import { RenderNode } from '@kit.ArkUI'; 2285import { drawing } from '@kit.ArkGraphics2D'; 2286 2287class DrawingRenderNode extends RenderNode { 2288 draw(context : DrawContext) { 2289 const canvas = context.canvas; 2290 let color: number = 0xffff0000; 2291 canvas.clear(color); 2292 } 2293} 2294``` 2295 2296### getWidth<sup>12+</sup> 2297 2298getWidth(): number 2299 2300Obtains the canvas width. 2301 2302**System capability**: SystemCapability.Graphics.Drawing 2303 2304**Return value** 2305 2306| Type | Mandatory| Description | 2307| ------ | ---- | -------------- | 2308| number | Yes | Canvas width. The value is a floating point number.| 2309 2310**Example** 2311 2312```ts 2313import { RenderNode } from '@kit.ArkUI'; 2314import { drawing } from '@kit.ArkGraphics2D'; 2315 2316class DrawingRenderNode extends RenderNode { 2317 draw(context : DrawContext) { 2318 const canvas = context.canvas; 2319 let width = canvas.getWidth(); 2320 console.info('get canvas width:' + width); 2321 } 2322} 2323``` 2324 2325### getHeight<sup>12+</sup> 2326 2327getHeight(): number 2328 2329Obtains the canvas height. 2330 2331**System capability**: SystemCapability.Graphics.Drawing 2332 2333**Return value** 2334 2335| Type | Mandatory| Description | 2336| ------ | ---- | -------------- | 2337| number | Yes | Canvas height. The value is a floating point number.| 2338 2339**Example** 2340 2341```ts 2342import { RenderNode } from '@kit.ArkUI'; 2343import { drawing } from '@kit.ArkGraphics2D'; 2344 2345class DrawingRenderNode extends RenderNode { 2346 draw(context : DrawContext) { 2347 const canvas = context.canvas; 2348 let height = canvas.getHeight(); 2349 console.log('get canvas height:' + height); 2350 } 2351} 2352``` 2353 2354### drawOval<sup>12+</sup> 2355 2356drawOval(oval: common2D.Rect): void 2357 2358Draws an oval on the canvas, where the shape and position of the oval are defined by its bounding rectangle. 2359 2360**System capability**: SystemCapability.Graphics.Drawing 2361 2362**Parameters** 2363 2364| Name| Type | Mandatory| Description | 2365| ------ | -------------------------------------------------- | ---- | -------------- | 2366| oval | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangle. The oval inscribed within the rectangle is the oval to draw.| 2367 2368**Error codes** 2369 2370For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2371 2372| ID| Error Message| 2373| ------- | --------------------------------------------| 2374| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2375 2376**Example** 2377 2378```ts 2379import { RenderNode } from '@kit.ArkUI'; 2380import { common2D, drawing } from '@kit.ArkGraphics2D'; 2381 2382class DrawingRenderNode extends RenderNode { 2383 draw(context : DrawContext) { 2384 const canvas = context.canvas; 2385 const pen = new drawing.Pen(); 2386 pen.setStrokeWidth(5); 2387 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 2388 pen.setColor(color); 2389 canvas.attachPen(pen); 2390 const rect: common2D.Rect = {left:100, top:50, right:400, bottom:500}; 2391 canvas.drawOval(rect); 2392 canvas.detachPen(); 2393 } 2394} 2395``` 2396 2397### drawArc<sup>12+</sup> 2398 2399drawArc(arc: common2D.Rect, startAngle: number, sweepAngle: number): void 2400 2401Draws 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. 2402 2403**System capability**: SystemCapability.Graphics.Drawing 2404 2405**Parameters** 2406 2407| Name| Type | Mandatory| Description | 2408| ------ | -------------------------------------------------- | ---- | -------------- | 2409| arc | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangular boundary that encapsulates the oval including the arc.| 2410| 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.| 2411| 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.| 2412 2413**Error codes** 2414 2415For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2416 2417| ID| Error Message| 2418| ------- | --------------------------------------------| 2419| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2420 2421**Example** 2422 2423```ts 2424import { RenderNode } from '@kit.ArkUI'; 2425import { common2D, drawing } from '@kit.ArkGraphics2D'; 2426 2427class DrawingRenderNode extends RenderNode { 2428 draw(context : DrawContext) { 2429 const canvas = context.canvas; 2430 const pen = new drawing.Pen(); 2431 pen.setStrokeWidth(5); 2432 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 2433 pen.setColor(color); 2434 canvas.attachPen(pen); 2435 const rect: common2D.Rect = {left:100, top:50, right:400, bottom:200}; 2436 canvas.drawArc(rect, 90, 180); 2437 canvas.detachPen(); 2438 } 2439} 2440``` 2441 2442### drawPoint 2443 2444drawPoint(x: number, y: number): void 2445 2446Draws a point. 2447 2448**System capability**: SystemCapability.Graphics.Drawing 2449 2450**Parameters** 2451 2452| Name| Type | Mandatory| Description | 2453| ------ | ------ | ---- | ------------------- | 2454| x | number | Yes | X coordinate of the point. The value is a floating point number.| 2455| y | number | Yes | Y coordinate of the point. The value is a floating point number.| 2456 2457**Error codes** 2458 2459For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2460 2461| ID| Error Message| 2462| ------- | --------------------------------------------| 2463| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2464 2465**Example** 2466 2467```ts 2468import { RenderNode } from '@kit.ArkUI'; 2469import { drawing } from '@kit.ArkGraphics2D'; 2470 2471class DrawingRenderNode extends RenderNode { 2472 draw(context : DrawContext) { 2473 const canvas = context.canvas; 2474 const pen = new drawing.Pen(); 2475 pen.setStrokeWidth(5); 2476 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2477 canvas.attachPen(pen); 2478 canvas.drawPoint(10, 10); 2479 canvas.detachPen(); 2480 } 2481} 2482``` 2483 2484### drawPoints<sup>12+</sup> 2485 2486drawPoints(points: Array\<common2D.Point>, mode?: PointMode): void 2487 2488Draws a group of points, line segments, or polygons on the canvas, with the specified drawing mode. An array is used to hold these points. 2489 2490**System capability**: SystemCapability.Graphics.Drawing 2491 2492**Parameters** 2493 2494| Name | Type | Mandatory | Description | 2495| ---- | ---------------------------------------- | ---- | --------- | 2496| points | Array\<[common2D.Point](js-apis-graphics-common2D.md#point)> | Yes | Array that holds the points to draw. The length cannot be 0. | 2497| mode | [PointMode](#pointmode12) | No | Mode in which the points are drawn. The default value is **drawing.PointMode.POINTS**.| 2498 2499**Error codes** 2500 2501For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2502 2503| ID| Error Message| 2504| ------- | --------------------------------------------| 2505| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 2506 2507**Example** 2508 2509```ts 2510import { RenderNode } from '@kit.ArkUI'; 2511import { common2D, drawing } from '@kit.ArkGraphics2D'; 2512 2513class DrawingRenderNode extends RenderNode { 2514 draw(context : DrawContext) { 2515 const canvas = context.canvas; 2516 const pen = new drawing.Pen(); 2517 pen.setStrokeWidth(30); 2518 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 2519 pen.setColor(color); 2520 canvas.attachPen(pen); 2521 canvas.drawPoints([{x: 100, y: 200}, {x: 150, y: 230}, {x: 200, y: 300}], drawing.PointMode.POINTS); 2522 canvas.detachPen(); 2523 } 2524} 2525``` 2526 2527### drawPath 2528 2529drawPath(path: Path): void 2530 2531Draws a custom path, which contains a set of path outlines. Each path outline can be open or closed. 2532 2533**System capability**: SystemCapability.Graphics.Drawing 2534 2535**Parameters** 2536 2537| Name| Type | Mandatory| Description | 2538| ------ | ------------- | ---- | ------------------ | 2539| path | [Path](#path) | Yes | **Path** object to draw.| 2540 2541**Error codes** 2542 2543For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2544 2545| ID| Error Message| 2546| ------- | --------------------------------------------| 2547| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2548 2549**Example** 2550 2551```ts 2552import { RenderNode } from '@kit.ArkUI'; 2553import { drawing } from '@kit.ArkGraphics2D'; 2554 2555class DrawingRenderNode extends RenderNode { 2556 draw(context : DrawContext) { 2557 const canvas = context.canvas; 2558 const pen = new drawing.Pen(); 2559 pen.setStrokeWidth(5); 2560 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2561 let path = new drawing.Path(); 2562 path.moveTo(10,10); 2563 path.cubicTo(10, 10, 10, 10, 15, 15); 2564 path.close(); 2565 canvas.attachPen(pen); 2566 canvas.drawPath(path); 2567 canvas.detachPen(); 2568 } 2569} 2570``` 2571 2572### drawLine 2573 2574drawLine(x0: number, y0: number, x1: number, y1: number): void 2575 2576Draws 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. 2577 2578**System capability**: SystemCapability.Graphics.Drawing 2579 2580**Parameters** 2581 2582| Name| Type | Mandatory| Description | 2583| ------ | ------ | ---- | ----------------------- | 2584| x0 | number | Yes | X coordinate of the start point of the line segment. The value is a floating point number.| 2585| y0 | number | Yes | Y coordinate of the start point of the line segment. The value is a floating point number.| 2586| x1 | number | Yes | X coordinate of the end point of the line segment. The value is a floating point number.| 2587| y1 | number | Yes | Y coordinate of the end point of the line segment. The value is a floating point number.| 2588 2589**Error codes** 2590 2591For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2592 2593| ID| Error Message| 2594| ------- | --------------------------------------------| 2595| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2596 2597**Example** 2598 2599```ts 2600import { RenderNode } from '@kit.ArkUI'; 2601import { drawing } from '@kit.ArkGraphics2D'; 2602 2603class DrawingRenderNode extends RenderNode { 2604 draw(context : DrawContext) { 2605 const canvas = context.canvas; 2606 const pen = new drawing.Pen(); 2607 pen.setStrokeWidth(5); 2608 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2609 canvas.attachPen(pen); 2610 canvas.drawLine(0, 0, 20, 20); 2611 canvas.detachPen(); 2612 } 2613} 2614``` 2615 2616### drawTextBlob 2617 2618drawTextBlob(blob: TextBlob, x: number, y: number): void 2619 2620Draws a text blob. If the typeface used to construct **blob** does not support a character, that character will not be drawn. 2621 2622**System capability**: SystemCapability.Graphics.Drawing 2623 2624**Parameters** 2625 2626| Name| Type | Mandatory| Description | 2627| ------ | --------------------- | ---- | ------------------------------------------ | 2628| blob | [TextBlob](#textblob) | Yes | **TextBlob** object. | 2629| 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.| 2630| 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.| 2631 2632 2633 2634**Error codes** 2635 2636For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2637 2638| ID| Error Message| 2639| ------- | --------------------------------------------| 2640| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2641 2642**Example** 2643 2644```ts 2645import { RenderNode } from '@kit.ArkUI'; 2646import { drawing } from '@kit.ArkGraphics2D'; 2647 2648class DrawingRenderNode extends RenderNode { 2649 draw(context : DrawContext) { 2650 const canvas = context.canvas; 2651 const brush = new drawing.Brush(); 2652 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2653 const font = new drawing.Font(); 2654 font.setSize(20); 2655 const textBlob = drawing.TextBlob.makeFromString("Hello, drawing", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 2656 canvas.attachBrush(brush); 2657 canvas.drawTextBlob(textBlob, 20, 20); 2658 canvas.detachBrush(); 2659 } 2660} 2661``` 2662 2663### drawSingleCharacter<sup>12+</sup> 2664 2665drawSingleCharacter(text: string, font: Font, x: number, y: number): void 2666 2667Draws 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. 2668 2669**System capability**: SystemCapability.Graphics.Drawing 2670 2671**Parameters** 2672 2673| Name| Type | Mandatory| Description | 2674| ------ | ------------------- | ---- | ----------- | 2675| text | string | Yes | Single character to draw. The length of the string must be 1. | 2676| font | [Font](#font) | Yes | **Font** object. | 2677| 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.| 2678| 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.| 2679 2680 2681 2682**Error codes** 2683 2684For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2685 2686| ID| Error Message| 2687| ------- | --------------------------------------------| 2688| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2689 2690**Example** 2691 2692```ts 2693import { RenderNode } from '@kit.ArkUI'; 2694import { drawing } from '@kit.ArkGraphics2D'; 2695 2696class DrawingRenderNode extends RenderNode { 2697 draw(context : DrawContext) { 2698 const canvas = context.canvas; 2699 const brush = new drawing.Brush(); 2700 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2701 const font = new drawing.Font(); 2702 font.setSize(20); 2703 canvas.attachBrush(brush); 2704 canvas.drawSingleCharacter ("Hello", font, 100, 100); 2705 canvas.drawSingleCharacter ("drawing", font, 120, 100); 2706 canvas.detachBrush(); 2707 } 2708} 2709``` 2710 2711### drawRegion<sup>12+</sup> 2712 2713drawRegion(region: Region): void 2714 2715Draws a region. 2716 2717**System capability**: SystemCapability.Graphics.Drawing 2718 2719**Parameters** 2720 2721| Name| Type | Mandatory| Description | 2722| ------ | ------------------- | ---- | ----------- | 2723| region | [Region](#region12) | Yes | Region to draw. | 2724 2725**Error codes** 2726 2727For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2728 2729| ID| Error Message| 2730| ------- | --------------------------------------------| 2731| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2732 2733**Example** 2734 2735```ts 2736import { RenderNode } from '@kit.ArkUI'; 2737import { drawing } from '@kit.ArkGraphics2D'; 2738 2739class DrawingRenderNode extends RenderNode { 2740 draw(context : DrawContext) { 2741 const canvas = context.canvas; 2742 const pen = new drawing.Pen(); 2743 let region = new drawing.Region(); 2744 pen.setStrokeWidth(10); 2745 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 2746 canvas.attachPen(pen); 2747 region.setRect(100, 100, 400, 400); 2748 canvas.drawRegion(region); 2749 canvas.detachPen(); 2750 } 2751} 2752``` 2753 2754### attachPen 2755 2756attachPen(pen: Pen): void 2757 2758Attaches a pen to the canvas. When you draw on the canvas, the pen's style is used to outline shapes. 2759 2760> **NOTE** 2761> 2762> 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. 2763 2764**System capability**: SystemCapability.Graphics.Drawing 2765 2766**Parameters** 2767 2768| Name| Type | Mandatory| Description | 2769| ------ | ----------- | ---- | ---------- | 2770| pen | [Pen](#pen) | Yes | **Pen** object.| 2771 2772**Error codes** 2773 2774For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2775 2776| ID| Error Message| 2777| ------- | --------------------------------------------| 2778| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2779 2780**Example** 2781 2782```ts 2783import { RenderNode } from '@kit.ArkUI'; 2784import { drawing } from '@kit.ArkGraphics2D'; 2785 2786class DrawingRenderNode extends RenderNode { 2787 draw(context : DrawContext) { 2788 const canvas = context.canvas; 2789 const pen = new drawing.Pen(); 2790 pen.setStrokeWidth(5); 2791 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2792 canvas.attachPen(pen); 2793 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 2794 canvas.detachPen(); 2795 } 2796} 2797``` 2798 2799### attachBrush 2800 2801attachBrush(brush: Brush): void 2802 2803Attaches a brush to the canvas. When you draw on the canvas, the brush's style is used to fill the interior of shapes. 2804 2805> **NOTE** 2806> 2807> 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. 2808 2809**System capability**: SystemCapability.Graphics.Drawing 2810 2811**Parameters** 2812 2813| Name| Type | Mandatory| Description | 2814| ------ | --------------- | ---- | ---------- | 2815| brush | [Brush](#brush) | Yes | **Brush** object.| 2816 2817**Error codes** 2818 2819For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2820 2821| ID| Error Message| 2822| ------- | --------------------------------------------| 2823| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2824 2825**Example** 2826 2827```ts 2828import { RenderNode } from '@kit.ArkUI'; 2829import { drawing } from '@kit.ArkGraphics2D'; 2830 2831class DrawingRenderNode extends RenderNode { 2832 draw(context : DrawContext) { 2833 const canvas = context.canvas; 2834 const brush = new drawing.Brush(); 2835 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2836 canvas.attachBrush(brush); 2837 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 2838 canvas.detachBrush(); 2839 } 2840} 2841``` 2842 2843### detachPen 2844 2845detachPen(): void 2846 2847Detaches the pen from the canvas. When you draw on the canvas, the pen is no longer used to outline shapes. 2848 2849**System capability**: SystemCapability.Graphics.Drawing 2850 2851**Example** 2852 2853```ts 2854import { RenderNode } from '@kit.ArkUI'; 2855import { drawing } from '@kit.ArkGraphics2D'; 2856 2857class DrawingRenderNode extends RenderNode { 2858 draw(context : DrawContext) { 2859 const canvas = context.canvas; 2860 const pen = new drawing.Pen(); 2861 pen.setStrokeWidth(5); 2862 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2863 canvas.attachPen(pen); 2864 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 2865 canvas.detachPen(); 2866 } 2867} 2868``` 2869 2870### detachBrush 2871 2872detachBrush(): void 2873 2874Detaches the brush from the canvas. When you draw on the canvas, the brush is no longer used to fill the interior of shapes. 2875 2876**System capability**: SystemCapability.Graphics.Drawing 2877 2878**Example** 2879 2880```ts 2881import { RenderNode } from '@kit.ArkUI'; 2882import { drawing } from '@kit.ArkGraphics2D'; 2883 2884class DrawingRenderNode extends RenderNode { 2885 draw(context : DrawContext) { 2886 const canvas = context.canvas; 2887 const brush = new drawing.Brush(); 2888 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2889 canvas.attachBrush(brush); 2890 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 2891 canvas.detachBrush(); 2892 } 2893} 2894``` 2895 2896### clipPath<sup>12+</sup> 2897 2898clipPath(path: Path, clipOp?: ClipOp, doAntiAlias?: boolean): void 2899 2900Clips the drawable area of the canvas using a custom path. 2901 2902**System capability**: SystemCapability.Graphics.Drawing 2903 2904**Parameters** 2905 2906| Name | Type | Mandatory| Description | 2907| ------------ | ----------------- | ---- | ------------------------------------| 2908| path | [Path](#path) | Yes | **Path** object. | 2909| clipOp | [ClipOp](#clipop12) | No | Clip mode. The default value is **INTERSECT**. | 2910| 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**.| 2911 2912**Error codes** 2913 2914For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2915 2916| ID| Error Message| 2917| ------- | --------------------------------------------| 2918| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2919 2920**Example** 2921 2922```ts 2923import { RenderNode } from '@kit.ArkUI'; 2924import { common2D, drawing } from '@kit.ArkGraphics2D'; 2925 2926class DrawingRenderNode extends RenderNode { 2927 draw(context : DrawContext) { 2928 const canvas = context.canvas; 2929 let path = new drawing.Path(); 2930 path.moveTo(10, 10); 2931 path.cubicTo(100, 100, 80, 150, 300, 150); 2932 path.close(); 2933 canvas.clipPath(path, drawing.ClipOp.INTERSECT, true); 2934 canvas.clear({alpha: 255, red: 255, green: 0, blue: 0}); 2935 } 2936} 2937``` 2938 2939### clipRect<sup>12+</sup> 2940 2941clipRect(rect: common2D.Rect, clipOp?: ClipOp, doAntiAlias?: boolean): void 2942 2943Clips the drawable area of the canvas using a rectangle. 2944 2945**System capability**: SystemCapability.Graphics.Drawing 2946 2947**Parameters** 2948 2949| Name | Type | Mandatory | Description | 2950| ----------- | ---------------------------------------- | ---- | ------------------- | 2951| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangle. | 2952| clipOp | [ClipOp](#clipop12) | No | Clip mode. The default value is **INTERSECT**. | 2953| 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**.| 2954 2955**Error codes** 2956 2957For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2958 2959| ID| Error Message| 2960| ------- | --------------------------------------------| 2961| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2962 2963**Example** 2964 2965```ts 2966import { RenderNode } from '@kit.ArkUI'; 2967import { common2D, drawing } from '@kit.ArkGraphics2D'; 2968 2969class DrawingRenderNode extends RenderNode { 2970 draw(context : DrawContext) { 2971 const canvas = context.canvas; 2972 canvas.clipRect({left : 10, right : 500, top : 300, bottom : 900}, drawing.ClipOp.DIFFERENCE, true); 2973 canvas.clear({alpha: 255, red: 255, green: 0, blue: 0}); 2974 } 2975} 2976``` 2977 2978### save<sup>12+</sup> 2979 2980save(): number 2981 2982Saves the canvas states (canvas matrix and drawable area) to the top of the stack. This API must be used in pair with [restore](#restore12). 2983 2984**System capability**: SystemCapability.Graphics.Drawing 2985 2986**Return value** 2987 2988| Type | Description | 2989| ------ | ------------------ | 2990| number | Number of canvas statuses. The value is a positive integer.| 2991 2992**Example** 2993 2994```ts 2995import { RenderNode } from '@kit.ArkUI'; 2996import { common2D, drawing } from '@kit.ArkGraphics2D'; 2997 2998class DrawingRenderNode extends RenderNode { 2999 draw(context : DrawContext) { 3000 const canvas = context.canvas; 3001 let rect: common2D.Rect = {left: 10, right: 200, top: 100, bottom: 300}; 3002 canvas.drawRect(rect); 3003 let saveCount = canvas.save(); 3004 } 3005} 3006``` 3007 3008### saveLayer<sup>12+</sup> 3009 3010saveLayer(rect?: common2D.Rect | null, brush?: Brush | null): number 3011 3012Saves 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. 3013 3014**System capability**: SystemCapability.Graphics.Drawing 3015 3016**Parameters** 3017 3018| Name | Type | Mandatory | Description | 3019| ---- | ------ | ---- | ----------------- | 3020| 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.| 3021| brush | [Brush](#brush)\|null | No | **Brush** object. The alpha value, filter effect, and blend mode of the brush are applied when the PixelMap is drawn. If null is passed in, no effect is applied.| 3022 3023**Return value** 3024 3025| Type | Description | 3026| ------ | ------------------ | 3027| number | Number of canvas statuses that have been saved. The value is a positive integer.| 3028 3029**Error codes** 3030 3031For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3032 3033| ID| Error Message| 3034| ------- | --------------------------------------------| 3035| 401 | Parameter error. Possible causes: Mandatory parameters are left unspecified. | 3036 3037**Example** 3038 3039```ts 3040import { RenderNode } from '@kit.ArkUI'; 3041import { common2D, drawing } from '@kit.ArkGraphics2D'; 3042 3043class DrawingRenderNode extends RenderNode { 3044 draw(context : DrawContext) { 3045 const canvas = context.canvas; 3046 canvas.saveLayer(null, null); 3047 const brushRect = new drawing.Brush(); 3048 const colorRect: common2D.Color = {alpha: 255, red: 255, green: 255, blue: 0}; 3049 brushRect.setColor(colorRect); 3050 canvas.attachBrush(brushRect); 3051 const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 3052 canvas.drawRect(rect); 3053 3054 const brush = new drawing.Brush(); 3055 brush.setBlendMode(drawing.BlendMode.DST_OUT); 3056 canvas.saveLayer(rect, brush); 3057 3058 const brushCircle = new drawing.Brush(); 3059 const colorCircle: common2D.Color = {alpha: 255, red: 0, green: 0, blue: 255}; 3060 brushCircle.setColor(colorCircle); 3061 canvas.attachBrush(brushCircle); 3062 canvas.drawCircle(500, 500, 200); 3063 canvas.restore(); 3064 canvas.restore(); 3065 canvas.detachBrush(); 3066 } 3067} 3068``` 3069 3070### scale<sup>12+</sup> 3071 3072scale(sx: number, sy: number): void 3073 3074Applies a scaling matrix on top of the current canvas matrix (identity matrix by default). Subsequent drawing and clipping operations will automatically have a scaling effect applied to the shapes and positions. 3075 3076**System capability**: SystemCapability.Graphics.Drawing 3077 3078**Parameters** 3079 3080| Name | Type | Mandatory | Description | 3081| ---- | ------ | ---- | ----------------- | 3082| sx | number | Yes | Scale ratio on the X axis. The value is a floating point number.| 3083| sy | number | Yes | Scale ratio on the Y axis. The value is a floating point number.| 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'; 3098 3099class DrawingRenderNode extends RenderNode { 3100 draw(context : DrawContext) { 3101 const canvas = context.canvas; 3102 const pen = new drawing.Pen(); 3103 pen.setStrokeWidth(5); 3104 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3105 canvas.attachPen(pen); 3106 canvas.scale(2, 0.5); 3107 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3108 canvas.detachPen(); 3109 } 3110} 3111``` 3112 3113### skew<sup>12+</sup> 3114 3115skew(sx: number, sy: number) : void 3116 3117Applies a skewing matrix on top of the current canvas matrix (identity matrix by default). Subsequent drawing and clipping operations will automatically have a skewing effect applied to the shapes and positions. 3118 3119**System capability**: SystemCapability.Graphics.Drawing 3120 3121**Parameters** 3122 3123| Name | Type | Mandatory | Description | 3124| ---- | ------ | ---- | ----------------- | 3125| 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. | 3126| 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. | 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'; 3141 3142class DrawingRenderNode extends RenderNode { 3143 draw(context : DrawContext) { 3144 const canvas = context.canvas; 3145 const pen = new drawing.Pen(); 3146 pen.setStrokeWidth(5); 3147 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3148 canvas.attachPen(pen); 3149 canvas.skew(0.1, 0.1); 3150 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3151 canvas.detachPen(); 3152 } 3153} 3154``` 3155 3156### rotate<sup>12+</sup> 3157 3158rotate(degrees: number, sx: number, sy: number) : void 3159 3160Applies a rotation matrix on top of the current canvas matrix (identity matrix by default). Subsequent drawing and clipping operations will automatically have a rotation effect applied to their shapes and positions. 3161 3162**System capability**: SystemCapability.Graphics.Drawing 3163 3164**Parameters** 3165 3166| Name | Type | Mandatory | Description | 3167| ---- | ------ | ------ | ------------------------ | 3168| 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. | 3169| sx | number | Yes | X coordinate of the rotation center. The value is a floating point number.| 3170| sy | number | Yes | Y coordinate of the rotation center. The value is a floating point number.| 3171 3172**Error codes** 3173 3174For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3175 3176| ID| Error Message| 3177| ------- | --------------------------------------------| 3178| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3179 3180**Example** 3181 3182```ts 3183import { RenderNode } from '@kit.ArkUI'; 3184import { common2D, drawing } from '@kit.ArkGraphics2D'; 3185 3186class DrawingRenderNode extends RenderNode { 3187 draw(context : DrawContext) { 3188 const canvas = context.canvas; 3189 const pen = new drawing.Pen(); 3190 pen.setStrokeWidth(5); 3191 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3192 canvas.attachPen(pen); 3193 canvas.rotate(30, 100, 100); 3194 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3195 canvas.detachPen(); 3196 } 3197} 3198``` 3199 3200### translate<sup>12+</sup> 3201 3202translate(dx: number, dy: number): void 3203 3204Applies a translation matrix on top of the current canvas matrix (identity matrix by default). Subsequent drawing and clipping operations will automatically have a translation effect applied to the shapes and positions. 3205 3206**System capability**: SystemCapability.Graphics.Drawing 3207 3208**Parameters** 3209 3210| Name| Type | Mandatory| Description | 3211| ----- | ------ | ---- | ------------------- | 3212| dx | number | Yes | Distance to translate on the X axis. The value is a floating point number. | 3213| dy | number | Yes | Distance to translate on the Y axis. The value is a floating point number. | 3214 3215**Error codes** 3216 3217For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3218 3219| ID| Error Message| 3220| ------- | --------------------------------------------| 3221| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3222 3223**Example** 3224 3225```ts 3226import { RenderNode } from '@kit.ArkUI'; 3227import { common2D, drawing } from '@kit.ArkGraphics2D'; 3228 3229class DrawingRenderNode extends RenderNode { 3230 draw(context : DrawContext) { 3231 const canvas = context.canvas; 3232 const pen = new drawing.Pen(); 3233 pen.setStrokeWidth(5); 3234 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3235 canvas.attachPen(pen); 3236 canvas.translate(10, 10); 3237 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3238 canvas.detachPen(); 3239 } 3240} 3241``` 3242 3243### getSaveCount<sup>12+</sup> 3244 3245getSaveCount(): number 3246 3247Obtains the number of canvas states (canvas matrix and clipping area) saved in the stack. 3248 3249**System capability**: SystemCapability.Graphics.Drawing 3250 3251**Return value** 3252 3253| Type | Description | 3254| ------ | ------------------------------------ | 3255| number | Number of canvas statuses that have been saved. The value is a positive integer.| 3256 3257**Example** 3258 3259```ts 3260import { RenderNode } from '@kit.ArkUI'; 3261import { common2D, drawing } from '@kit.ArkGraphics2D'; 3262 3263class DrawingRenderNode extends RenderNode { 3264 draw(context : DrawContext) { 3265 const canvas = context.canvas; 3266 const pen = new drawing.Pen(); 3267 pen.setStrokeWidth(5); 3268 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3269 canvas.attachPen(pen); 3270 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 300}); 3271 canvas.save(); 3272 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3273 canvas.getSaveCount(); 3274 canvas.detachPen(); 3275 } 3276} 3277``` 3278 3279### restoreToCount<sup>12+</sup> 3280 3281restoreToCount(count: number): void 3282 3283Restores the canvas state (canvas matrix and clipping area) to a specified number. 3284 3285**System capability**: SystemCapability.Graphics.Drawing 3286 3287**Parameters** 3288 3289| Name | Type | Mandatory | Description | 3290| ----- | ------ | ---- | ----------------------------- | 3291| 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.| 3292 3293**Error codes** 3294 3295For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3296 3297| ID| Error Message| 3298| ------- | --------------------------------------------| 3299| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3300 3301**Example** 3302 3303```ts 3304import { RenderNode } from '@kit.ArkUI'; 3305import { common2D, drawing } from '@kit.ArkGraphics2D'; 3306 3307class DrawingRenderNode extends RenderNode { 3308 draw(context : DrawContext) { 3309 const canvas = context.canvas; 3310 const pen = new drawing.Pen(); 3311 pen.setStrokeWidth(5); 3312 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3313 canvas.attachPen(pen); 3314 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 300}); 3315 canvas.save(); 3316 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 500}); 3317 canvas.save(); 3318 canvas.drawRect({left: 100, right: 300, top: 100, bottom: 500}); 3319 canvas.save(); 3320 canvas.restoreToCount(2); 3321 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3322 canvas.detachPen(); 3323 } 3324} 3325``` 3326 3327### restore<sup>12+</sup> 3328 3329restore(): void 3330 3331Restores the canvas state (canvas matrix and clipping area) saved on the top of the stack. 3332 3333**System capability**: SystemCapability.Graphics.Drawing 3334 3335**Example** 3336 3337```ts 3338import { RenderNode } from '@kit.ArkUI'; 3339import { common2D, drawing } from '@kit.ArkGraphics2D'; 3340 3341class DrawingRenderNode extends RenderNode { 3342 draw(context : DrawContext) { 3343 const canvas = context.canvas; 3344 const pen = new drawing.Pen(); 3345 pen.setStrokeWidth(5); 3346 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3347 canvas.attachPen(pen); 3348 canvas.restore(); 3349 canvas.detachPen(); 3350 } 3351} 3352``` 3353 3354### concatMatrix<sup>12+</sup> 3355 3356concatMatrix(matrix: Matrix): void 3357 3358Multiplies the current canvas matrix by the incoming matrix on the left. This API does not affect previous drawing operations, but subsequent drawing and clipping operations will be influenced by this matrix in terms of shape and position. 3359 3360**System capability**: SystemCapability.Graphics.Drawing 3361 3362**Parameters** 3363 3364| Name | Type | Mandatory | Description | 3365| ------ | ----------------- | ---- | ----- | 3366| matrix | [Matrix](#matrix12) | Yes | **Matrix** object.| 3367 3368**Error codes** 3369 3370For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3371 3372| ID| Error Message| 3373| ------- | --------------------------------------------| 3374| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3375 3376**Example** 3377 3378```ts 3379import { RenderNode } from '@kit.ArkUI'; 3380import { drawing } from '@kit.ArkGraphics2D'; 3381 3382class DrawingRenderNode extends RenderNode { 3383 draw(context : DrawContext) { 3384 const canvas = context.canvas; 3385 let matrix = new drawing.Matrix(); 3386 matrix.setMatrix([5, 0, 0, 0, 1, 2, 0, 0, 1]); 3387 canvas.concatMatrix(matrix); 3388 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 500}); 3389 } 3390} 3391``` 3392 3393### setMatrix<sup>12+</sup> 3394 3395setMatrix(matrix: Matrix): void 3396 3397Sets a matrix for the canvas. Subsequent drawing and clipping operations will be affected by this matrix in terms of shape and position. 3398 3399**System capability**: SystemCapability.Graphics.Drawing 3400 3401**Parameters** 3402 3403| Name | Type | Mandatory | Description | 3404| ------ | ----------------- | ---- | ----- | 3405| matrix | [Matrix](#matrix12) | Yes | **Matrix** object.| 3406 3407**Error codes** 3408 3409For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3410 3411| ID| Error Message| 3412| ------- | --------------------------------------------| 3413| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3414 3415**Example** 3416 3417```ts 3418import { RenderNode } from '@kit.ArkUI'; 3419import { drawing } from '@kit.ArkGraphics2D'; 3420 3421class DrawingRenderNode extends RenderNode { 3422 draw(context : DrawContext) { 3423 const canvas = context.canvas; 3424 let matrix = new drawing.Matrix() 3425 matrix.setMatrix([5, 0, 0, 0, 1, 1, 0, 0, 1]); 3426 canvas.setMatrix(matrix); 3427 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 500}); 3428 } 3429} 3430``` 3431 3432### isClipEmpty<sup>12+</sup> 3433 3434isClipEmpty(): boolean 3435 3436Checks whether the region that can be drawn is empty after clipping. 3437 3438**System capability**: SystemCapability.Graphics.Drawing 3439 3440**Return value** 3441 3442| Type | Description | 3443| --------------------- | -------------- | 3444| boolean | Check result. The value **true** means that the region is empty, and **false** means the opposite.| 3445 3446**Example** 3447 3448```ts 3449import { RenderNode } from '@kit.ArkUI'; 3450import { drawing } from '@kit.ArkGraphics2D'; 3451 3452class DrawingRenderNode extends RenderNode { 3453 draw(context : DrawContext) { 3454 const canvas = context.canvas; 3455 if (canvas.isClipEmpty()) { 3456 console.info("canvas.isClipEmpty() returned true"); 3457 } else { 3458 console.info("canvas.isClipEmpty() returned false"); 3459 } 3460 } 3461} 3462``` 3463 3464### clipRegion<sup>12+</sup> 3465 3466clipRegion(region: Region, clipOp?: ClipOp): void 3467 3468Clips a region on the canvas. 3469 3470**System capability**: SystemCapability.Graphics.Drawing 3471 3472**Parameters** 3473 3474| Name | Type | Mandatory| Description | 3475| --------------- | ------- | ---- | ----------------------------------------------------------- | 3476| region | [Region](#region12) | Yes | **Region** object, which indicates the range to clip.| 3477| clipOp | [ClipOp](#clipop12) | No | Clipping mode. The default value is **INTERSECT**.| 3478 3479**Error codes** 3480 3481For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3482 3483| ID| Error Message| 3484| ------- | --------------------------------------------| 3485| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3486 3487**Example** 3488 3489```ts 3490import { RenderNode } from '@kit.ArkUI'; 3491import { common2D, drawing } from '@kit.ArkGraphics2D'; 3492 3493class DrawingRenderNode extends RenderNode { 3494 draw(context : DrawContext) { 3495 const canvas = context.canvas; 3496 let region : drawing.Region = new drawing.Region(); 3497 region.setRect(0, 0, 500, 500); 3498 canvas.clipRegion(region); 3499 let color: common2D.Color = {alpha: 255, red: 255, green: 0, blue: 0}; 3500 canvas.clear(color); 3501 } 3502} 3503``` 3504 3505### clipRoundRect<sup>12+</sup> 3506 3507clipRoundRect(roundRect: RoundRect, clipOp?: ClipOp, doAntiAlias?: boolean): void 3508 3509Clips a rounded rectangle on the canvas. 3510 3511**System capability**: SystemCapability.Graphics.Drawing 3512 3513**Parameters** 3514 3515| Name | Type | Mandatory| Description | 3516| --------------- | ------- | ---- | ----------------------------------------------------------- | 3517| roundRect | [RoundRect](#roundrect12) | Yes | **RoundRect** object, which indicates the range to clip.| 3518| clipOp | [ClipOp](#clipop12) | No | Clipping mode. The default value is **INTERSECT**.| 3519| 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**.| 3520 3521**Error codes** 3522 3523For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3524 3525| ID| Error Message| 3526| ------- | --------------------------------------------| 3527| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3528 3529**Example** 3530 3531```ts 3532import { RenderNode } from '@kit.ArkUI'; 3533import { common2D, drawing } from '@kit.ArkGraphics2D'; 3534 3535class DrawingRenderNode extends RenderNode { 3536 draw(context : DrawContext) { 3537 const canvas = context.canvas; 3538 let rect: common2D.Rect = { left: 10, top: 100, right: 200, bottom: 300 }; 3539 let roundRect = new drawing.RoundRect(rect, 10, 10); 3540 canvas.clipRoundRect(roundRect); 3541 let color: common2D.Color = {alpha: 255, red: 255, green: 0, blue: 0}; 3542 canvas.clear(color); 3543 } 3544} 3545``` 3546 3547### resetMatrix<sup>12+</sup> 3548 3549resetMatrix(): void 3550 3551Resets the matrix of this canvas to an identity matrix. 3552 3553**System capability**: SystemCapability.Graphics.Drawing 3554 3555**Example** 3556 3557```ts 3558import { RenderNode } from '@kit.ArkUI'; 3559import { drawing } from '@kit.ArkGraphics2D'; 3560 3561class DrawingRenderNode extends RenderNode { 3562 draw(context : DrawContext) { 3563 const canvas = context.canvas; 3564 canvas.scale(4, 6); 3565 canvas.resetMatrix(); 3566 } 3567} 3568``` 3569 3570### quickRejectPath<sup>18+</sup> 3571 3572quickRejectPath(path: Path): boolean 3573 3574Checks whether the path is not intersecting with the canvas area. The canvas area includes its boundaries. 3575 3576**System capability**: SystemCapability.Graphics.Drawing 3577 3578**Parameters** 3579 3580| Name| Type | Mandatory| Description | 3581| ------ | ------------- | ---- | ------------------ | 3582| path | [Path](#path) | Yes | Path object.| 3583 3584**Return value** 3585 3586| Type | Description | 3587| --------------------- | -------------- | 3588| boolean | Check result. The value **true** means that the path is not intersecting with the canvas area, and **false** means the opposite.| 3589 3590**Example** 3591 3592```ts 3593import { RenderNode } from '@kit.ArkUI'; 3594import { drawing } from '@kit.ArkGraphics2D'; 3595 3596class DrawingRenderNode extends RenderNode { 3597 draw(context : DrawContext) { 3598 const canvas = context.canvas; 3599 let path = new drawing.Path(); 3600 path.moveTo(10, 10); 3601 path.cubicTo(10, 10, 10, 10, 15, 15); 3602 path.close(); 3603 if (canvas.quickRejectPath(path)) { 3604 console.info("canvas and path do not intersect."); 3605 } else { 3606 console.info("canvas and path intersect."); 3607 } 3608 } 3609} 3610``` 3611 3612### quickRejectRect<sup>18+</sup> 3613 3614quickRejectRect(rect: common2D.Rect): boolean 3615 3616Checks whether the rectangle is not intersecting with the canvas area. The canvas area includes its boundaries. 3617 3618**System capability**: SystemCapability.Graphics.Drawing 3619 3620**Parameters** 3621 3622| Name| Type | Mandatory| Description | 3623| ------ | -------------------------------------------------- | ---- | -------------- | 3624| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangle.| 3625 3626**Return value** 3627 3628| Type | Description | 3629| --------------------- | -------------- | 3630| boolean | Check result. The value **true** means that the rectangle is not intersecting with the canvas area, and **false** means the opposite.| 3631 3632**Example** 3633 3634```ts 3635import { RenderNode } from '@kit.ArkUI'; 3636import { common2D, drawing } from '@kit.ArkGraphics2D'; 3637 3638class DrawingRenderNode extends RenderNode { 3639 draw(context : DrawContext) { 3640 const canvas = context.canvas; 3641 let rect: common2D.Rect = { left : 10, top : 20, right : 50, bottom : 30 }; 3642 if (canvas.quickRejectRect(rect)) { 3643 console.info("canvas and rect do not intersect."); 3644 } else { 3645 console.info("canvas and rect intersect."); 3646 } 3647 } 3648} 3649``` 3650 3651### drawArcWithCenter<sup>18+</sup> 3652 3653drawArcWithCenter(arc: common2D.Rect, startAngle: number, sweepAngle: number, useCenter: boolean): void 3654 3655Draws an arc on the canvas. It enables you to define the start angle, sweep angle, and whether the arc's endpoints should connect to its center. 3656 3657**System capability**: SystemCapability.Graphics.Drawing 3658 3659**Parameters** 3660 3661| Name| Type | Mandatory| Description | 3662| ------ | -------------------------------------------------- | ---- | -------------- | 3663| arc | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangular boundary that encapsulates the oval including the arc.| 3664| 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.| 3665| 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.| 3666| 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.| 3667 3668**Example** 3669 3670```ts 3671import { RenderNode } from '@kit.ArkUI'; 3672import { common2D, drawing } from '@kit.ArkGraphics2D'; 3673 3674class DrawingRenderNode extends RenderNode { 3675 draw(context : DrawContext) { 3676 const canvas = context.canvas; 3677 const pen = new drawing.Pen(); 3678 pen.setStrokeWidth(5); 3679 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 3680 pen.setColor(color); 3681 canvas.attachPen(pen); 3682 const rect: common2D.Rect = { left: 100, top: 50, right: 400, bottom: 200 }; 3683 canvas.drawArcWithCenter(rect, 90, 180, false); 3684 canvas.detachPen(); 3685 } 3686} 3687``` 3688 3689### drawImageNine<sup>18+</sup> 3690 3691drawImageNine(pixelmap: image.PixelMap, center: common2D.Rect, dstRect: common2D.Rect, filterMode: FilterMode): void 3692 3693Splits an image into nine sections using two horizontal and two vertical lines: four edge sections, four corner sections, and a central section. 3694 3695If 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. 3696 3697**System capability**: SystemCapability.Graphics.Drawing 3698 3699**Parameters** 3700 3701| Name| Type | Mandatory| Description | 3702| ------ | ------ | ---- | -------------- | 3703| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap to split.| 3704| center | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Central rectangle that divides the image into nine sections by extending its four edges.| 3705| dstRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Target rectangle drawn on the canvas.| 3706| filterMode | [FilterMode](#filtermode12) | Yes | Filter mode.| 3707 3708**Error codes** 3709 3710For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3711 3712| ID| Error Message| 3713| ------- | --------------------------------------------| 3714| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 3715 3716**Example** 3717 3718```ts 3719import { RenderNode } from '@kit.ArkUI'; 3720import { common2D, drawing } from '@kit.ArkGraphics2D'; 3721import { image } from '@kit.ImageKit'; 3722 3723class DrawingRenderNode extends RenderNode { 3724 draw(context : DrawContext) { 3725 const canvas = context.canvas; 3726 let pixelMap: image.PixelMap = globalThis.getInstance().getPixelMap("test_2.jpg"); 3727 canvas.drawImage(pixelMap, 0, 0); // Original image 3728 let center: common2D.Rect = { left: 20, top: 10, right: 50, bottom: 40 }; 3729 let dst: common2D.Rect = { left: 70, top: 0, right: 100, bottom: 30 }; 3730 let dst1: common2D.Rect = { left: 110, top: 0, right: 200, bottom: 90 }; 3731 canvas.drawImageNine(pixelMap, center, dst, drawing.FilterMode.FILTER_MODE_NEAREST); // Example 1 3732 canvas.drawImageNine(pixelMap, center, dst1, drawing.FilterMode.FILTER_MODE_NEAREST); // Example 2 3733 } 3734} 3735``` 3736 3737 3738### drawImageLattice<sup>18+</sup> 3739 3740drawImageLattice(pixelmap: image.PixelMap, lattice: Lattice, dstRect: common2D.Rect, filterMode: FilterMode): void 3741 3742Splits an image into multiple sections based on the lattice object's configuration and draws each section into the specified target rectangle on the canvas. 3743 3744The 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. 3745 3746**System capability**: SystemCapability.Graphics.Drawing 3747 3748**Parameters** 3749 3750| Name| Type | Mandatory| Description | 3751| ------ | ------ | ---- | -------------- | 3752| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap to split.| 3753| lattice | [Lattice](#lattice12) | Yes | Lattice object.| 3754| dstRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Target rectangle.| 3755| filterMode | [FilterMode](#filtermode12) | Yes | Filter mode.| 3756 3757**Error codes** 3758 3759For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3760 3761| ID| Error Message| 3762| ------- | --------------------------------------------| 3763| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 3764 3765**Example** 3766 3767```ts 3768import { RenderNode } from '@kit.ArkUI'; 3769import { common2D, drawing } from '@kit.ArkGraphics2D'; 3770import { image } from '@kit.ImageKit'; 3771 3772class DrawingRenderNode extends RenderNode { 3773 draw(context : DrawContext) { 3774 const canvas = context.canvas; 3775 let pixelMap: image.PixelMap = globalThis.getInstance().getPixelMap("test_3.jpg"); 3776 canvas.drawImage(pixelMap, 0, 0); // Original image 3777 let xDivs: Array<number> = [28, 36, 44, 52]; 3778 let yDivs: Array<number> = [28, 36, 44, 52]; 3779 let lattice = drawing.Lattice.createImageLattice(xDivs, yDivs, 4, 4); 3780 let dst: common2D.Rect = { left: 100, top: 0, right: 164, bottom: 64 }; 3781 let dst1: common2D.Rect = { left: 200, top: 0, right: 360, bottom: 160 }; 3782 canvas.drawImageLattice(pixelMap, lattice, dst, drawing.FilterMode.FILTER_MODE_NEAREST); // Example 1 3783 canvas.drawImageLattice(pixelMap, lattice, dst1, drawing.FilterMode.FILTER_MODE_NEAREST); // Example 2 3784 } 3785} 3786``` 3787 3788 3789## ImageFilter<sup>12+</sup> 3790 3791Implements an image filter. 3792 3793### createBlurImageFilter<sup>12+</sup> 3794 3795static createBlurImageFilter(sigmaX: number, sigmaY: number, tileMode: TileMode, imageFilter?: ImageFilter | null ): ImageFilter 3796 3797Creates an image filter with a given blur effect. 3798 3799**System capability**: SystemCapability.Graphics.Drawing 3800 3801**Parameters** 3802 3803| Name | Type | Mandatory| Description | 3804| --------------- | ------- | ---- | ----------------------------------------------------------- | 3805| sigmaX | number | Yes | Standard deviation of the Gaussian blur along the X axis. The value must be a floating point number greater than 0.| 3806| sigmaY | number | Yes | Standard deviation of the Gaussian blur along the Y axis. The value must be a floating point number greater than 0.| 3807| tileMode | [TileMode](#tilemode12)| Yes | Tile mode to apply to the edges.| 3808| 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.| 3809 3810**Return value** 3811 3812| Type | Description | 3813| --------------------- | -------------- | 3814| [ImageFilter](#imagefilter12) | Image filter created.| 3815 3816**Error codes** 3817 3818For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3819 3820| ID| Error Message| 3821| ------- | --------------------------------------------| 3822| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 3823 3824**Example** 3825 3826```ts 3827import { drawing } from '@kit.ArkGraphics2D'; 3828 3829let imgFilter = drawing.ImageFilter.createBlurImageFilter(5, 10, drawing.TileMode.CLAMP); 3830``` 3831 3832### createFromColorFilter<sup>12+</sup> 3833 3834static createFromColorFilter(colorFilter: ColorFilter, imageFilter?: ImageFilter | null): ImageFilter 3835 3836Creates an image filter object with a given color filter effect. 3837 3838**System capability**: SystemCapability.Graphics.Drawing 3839 3840**Parameters** 3841 3842| Name | Type | Mandatory| Description | 3843| --------------- | ------- | ---- | ----------------------------------------------------------- | 3844| colorFilter | [ColorFilter](#colorfilter) | Yes | Color filter.| 3845| 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.| 3846 3847**Return value** 3848 3849| Type | Description | 3850| --------------------- | -------------- | 3851| [ImageFilter](#imagefilter12) | Image filter created.| 3852 3853**Error codes** 3854 3855For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3856 3857| ID| Error Message| 3858| ------- | --------------------------------------------| 3859| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3860 3861**Example** 3862 3863```ts 3864import { drawing } from '@kit.ArkGraphics2D'; 3865 3866let imgFilter = drawing.ImageFilter.createBlurImageFilter(5, 10, drawing.TileMode.CLAMP); 3867let clolorfilter = drawing.ColorFilter.createSRGBGammaToLinear(); 3868let imgFilter1 = drawing.ImageFilter.createFromColorFilter(clolorfilter, imgFilter); 3869``` 3870 3871## TextBlobRunBuffer 3872 3873Describes a series of consecutive glyphs with the same attributes in a text blob. 3874 3875**System capability**: SystemCapability.Graphics.Drawing 3876 3877| Name | Type | Readable| Writable| Description | 3878| --------- | ------ | ---- | ---- | ------------------------- | 3879| 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.| 3880| positionX | number | Yes | Yes | X coordinate of the start point of the text blob. The value is a floating point number.| 3881| positionY | number | Yes | Yes | Y coordinate of the start point of the text blob. The value is a floating point number.| 3882 3883## TextEncoding 3884 3885Enumerates the text encoding types. 3886 3887**System capability**: SystemCapability.Graphics.Drawing 3888 3889| Name | Value | Description | 3890| ---------------------- | ---- | ------------------------------ | 3891| TEXT_ENCODING_UTF8 | 0 | One byte is used to indicate UTF-8 or ASCII characters. | 3892| TEXT_ENCODING_UTF16 | 1 | Two bytes are used to indicate most Unicode characters.| 3893| TEXT_ENCODING_UTF32 | 2 | Four bytes are used to indicate all Unicode characters. | 3894| TEXT_ENCODING_GLYPH_ID | 3 | Two bytes are used to indicate the glyph index. | 3895 3896## ClipOp<sup>12+</sup> 3897Enumerates the canvas clipping modes. 3898 3899 3900**System capability**: SystemCapability.Graphics.Drawing 3901 3902| Name | Value | Description | Diagram | 3903| ------------------ | ---- | ---------------- | -------- | 3904| DIFFERENCE | 0 | Clips a specified area. That is, the difference set is obtained.|  | 3905| INTERSECT | 1 | Retains a specified area. That is, the intersection is obtained.|  | 3906 3907> **NOTE** 3908> 3909> 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. 3910 3911## FilterMode<sup>12+</sup> 3912 3913Enumerates the filter modes. 3914 3915**System capability**: SystemCapability.Graphics.Drawing 3916 3917| Name | Value | Description | 3918| ------------------- | ---- | ------- | 3919| FILTER_MODE_NEAREST | 0 | Nearest filter mode.| 3920| FILTER_MODE_LINEAR | 1 | Linear filter mode.| 3921 3922## PathDirection<sup>12+</sup> 3923 3924Enumerates the directions of a closed contour. 3925 3926**System capability**: SystemCapability.Graphics.Drawing 3927 3928| Name | Value | Description | 3929| ------------------- | ---- | ------- | 3930| CLOCKWISE | 0 | Adds a closed contour clockwise.| 3931| COUNTER_CLOCKWISE | 1 | Adds a closed contour counterclockwise.| 3932 3933## PathFillType<sup>12+</sup> 3934 3935Enumerates the fill types of a path. 3936 3937**System capability**: SystemCapability.Graphics.Drawing 3938 3939| Name | Value | Description | 3940| ------------------- | ---- | ------- | 3941| 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.| 3942| 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.| 3943| INVERSE_WINDING | 2 | Same as **WINDING**, but draws outside of the path, rather than inside.| 3944| INVERSE_EVEN_ODD | 3 | Same as **EVEN_ODD**, but draws outside of the path, rather than inside.| 3945 3946> **NOTE** 3947> 3948>  3949> 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. 3950 3951## PointMode<sup>12+</sup> 3952 3953Enumerates the modes for drawing multiple points in an array. 3954 3955**System capability**: SystemCapability.Graphics.Drawing 3956 3957| Name | Value | Description | 3958| ------------------ | ---- | ------------- | 3959| POINTS | 0 | Draws each point separately. | 3960| LINES | 1 | Draws every two points as a line segment. | 3961| POLYGON | 2 | Draws an array of points as an open polygon.| 3962 3963## FontEdging<sup>12+</sup> 3964 3965Enumerates the font edging types. 3966 3967**System capability**: SystemCapability.Graphics.Drawing 3968 3969| Name | Value | Description | 3970| ------------------- | ---- | ------- | 3971| ALIAS | 0 | No anti-aliasing processing is used.| 3972| ANTI_ALIAS | 1 | Uses anti-aliasing to smooth the jagged edges.| 3973| SUBPIXEL_ANTI_ALIAS | 2 | Uses sub-pixel anti-aliasing to provide a smoother effect for jagged edges.| 3974 3975## FontHinting<sup>12+</sup> 3976 3977Enumerates the font hinting types. 3978 3979**System capability**: SystemCapability.Graphics.Drawing 3980 3981| Name | Value | Description | 3982| ------------------- | ---- | ------- | 3983| NONE | 0 | No font hinting is used.| 3984| SLIGHT | 1 | Slight font hinting is used to improve contrast.| 3985| NORMAL | 2 | Normal font hinting is used to improve contrast.| 3986| FULL | 3 | Full font hinting is used to improve contrast.| 3987 3988## TextBlob 3989 3990Defines a block consisting of one or more characters with the same font. 3991 3992### makeFromPosText<sup>12+</sup> 3993 3994static makeFromPosText(text: string, len: number, points: common2D.Point[], font: Font): TextBlob 3995 3996Creates 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. 3997 3998**System capability**: SystemCapability.Graphics.Drawing 3999 4000**Parameters** 4001 4002| Name | Type | Mandatory| Description | 4003| -------- | ----------------------------- | ---- | -------------------------------------- | 4004| text | string | Yes | Content to be used for drawing the text blob. | 4005| len | number | Yes | Number of fonts. The value is an integer and is obtained from [countText](#counttext12).| 4006| 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**.| 4007| font | [Font](#font) | Yes | **Font** object.| 4008 4009**Return value** 4010 4011| Type | Description | 4012| --------------------- | -------------- | 4013| [TextBlob](#textblob) | **TextBlob** object.| 4014 4015 4016**Error codes** 4017 4018For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4019 4020| ID| Error Message| 4021| ------- | --------------------------------------------| 4022| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types. | 4023 4024**Example** 4025 4026```ts 4027import { RenderNode } from '@kit.ArkUI'; 4028import { drawing,common2D} from '@kit.ArkGraphics2D'; 4029 4030class DrawingRenderNode extends RenderNode { 4031 draw(context : DrawContext) { 4032 const canvas = context.canvas; 4033 let text : string = 'makeFromPosText'; 4034 let font : drawing.Font = new drawing.Font(); 4035 font.setSize(100); 4036 let length = font.countText(text); 4037 let points : common2D.Point[] = []; 4038 for (let i = 0; i !== length; ++i) { 4039 points.push({ x: i * 35, y: i * 35 }); 4040 } 4041 let textblob : drawing.TextBlob =drawing.TextBlob.makeFromPosText(text, points.length, points, font); 4042 canvas.drawTextBlob(textblob, 100, 100); 4043 } 4044} 4045``` 4046 4047### uniqueID<sup>12+</sup> 4048 4049uniqueID(): number 4050 4051Obtains the unique, non-zero identifier of this **TextBlob** object. 4052 4053**System capability**: SystemCapability.Graphics.Drawing 4054 4055**Return value** 4056 4057| Type | Description | 4058| --------------------- | -------------- | 4059| number | Unique, non-zero identifier of this **TextBlob** object.| 4060 4061**Example** 4062 4063```ts 4064import {drawing} from "@kit.ArkGraphics2D"; 4065 4066let text : string = 'TextBlobUniqueId'; 4067let font : drawing.Font = new drawing.Font(); 4068font.setSize(100); 4069let textBlob = drawing.TextBlob.makeFromString(text, font, 0); 4070let id = textBlob.uniqueID(); 4071console.info("uniqueID---------------" +id); 4072``` 4073 4074### makeFromString 4075 4076static makeFromString(text: string, font: Font, encoding?: TextEncoding): TextBlob 4077 4078Converts a value of the string type into a **TextBlob** object. 4079 4080**System capability**: SystemCapability.Graphics.Drawing 4081 4082**Parameters** 4083 4084| Name | Type | Mandatory| Description | 4085| -------- | ----------------------------- | ---- | -------------------------------------- | 4086| text | string | Yes | Content to be used for drawing the text blob. | 4087| font | [Font](#font) | Yes | **Font** object. | 4088| 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**.| 4089 4090**Return value** 4091 4092| Type | Description | 4093| --------------------- | -------------- | 4094| [TextBlob](#textblob) | **TextBlob** object.| 4095 4096**Error codes** 4097 4098For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4099 4100| ID| Error Message| 4101| ------- | --------------------------------------------| 4102| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4103 4104**Example** 4105 4106```ts 4107import { RenderNode } from '@kit.ArkUI'; 4108import { drawing } from '@kit.ArkGraphics2D'; 4109 4110class DrawingRenderNode extends RenderNode { 4111 draw(context : DrawContext) { 4112 const canvas = context.canvas; 4113 const brush = new drawing.Brush(); 4114 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 4115 const font = new drawing.Font(); 4116 font.setSize(20); 4117 const textBlob = drawing.TextBlob.makeFromString("drawing", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4118 canvas.attachBrush(brush); 4119 canvas.drawTextBlob(textBlob, 20, 20); 4120 canvas.detachBrush(); 4121 } 4122} 4123``` 4124 4125### makeFromRunBuffer 4126 4127static makeFromRunBuffer(pos: Array\<TextBlobRunBuffer>, font: Font, bounds?: common2D.Rect): TextBlob 4128 4129Creates a **Textblob** object based on the RunBuffer information. 4130 4131**System capability**: SystemCapability.Graphics.Drawing 4132 4133**Parameters** 4134 4135| Name| Type | Mandatory| Description | 4136| ------ | -------------------------------------------------- | ---- | ------------------------------ | 4137| pos | Array\<[TextBlobRunBuffer](#textblobrunbuffer)> | Yes | **TextBlobRunBuffer** array. | 4138| font | [Font](#font) | Yes | **Font** object. | 4139| bounds | [common2D.Rect](js-apis-graphics-common2D.md#rect) | No | Bounding box. If this parameter is not set, there is no bounding box.| 4140 4141**Return value** 4142 4143| Type | Description | 4144| --------------------- | -------------- | 4145| [TextBlob](#textblob) | **TextBlob** object.| 4146 4147**Error codes** 4148 4149For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4150 4151| ID| Error Message| 4152| ------- | --------------------------------------------| 4153| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4154 4155**Example** 4156 4157```ts 4158import { RenderNode } from '@kit.ArkUI'; 4159import { common2D, drawing } from '@kit.ArkGraphics2D'; 4160 4161class DrawingRenderNode extends RenderNode { 4162 draw(context : DrawContext) { 4163 const canvas = context.canvas; 4164 const font = new drawing.Font(); 4165 font.setSize(20); 4166 let runBuffer : Array<drawing.TextBlobRunBuffer> = [ 4167 { glyph: 65, positionX: 0, positionY: 0 }, 4168 { glyph: 227, positionX: 14.9, positionY: 0 }, 4169 { glyph: 283, positionX: 25.84, positionY: 0 }, 4170 { glyph: 283, positionX: 30.62, positionY: 0 }, 4171 { glyph: 299, positionX: 35.4, positionY: 0} 4172 ]; 4173 const textBlob = drawing.TextBlob.makeFromRunBuffer(runBuffer, font, null); 4174 const brush = new drawing.Brush(); 4175 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 4176 canvas.attachBrush(brush); 4177 canvas.drawTextBlob(textBlob, 20, 20); 4178 canvas.detachBrush(); 4179 } 4180} 4181``` 4182 4183### bounds 4184 4185bounds(): common2D.Rect 4186 4187Obtains the rectangular bounding box of the text blob. 4188 4189**System capability**: SystemCapability.Graphics.Drawing 4190 4191**Return value** 4192 4193| Type | Description | 4194| -------------------------------------------------- | ---------------------- | 4195| [common2D.Rect](js-apis-graphics-common2D.md#rect) | Rectangular bounding box.| 4196 4197**Example** 4198 4199```ts 4200import { common2D, drawing } from '@kit.ArkGraphics2D'; 4201 4202const font = new drawing.Font(); 4203font.setSize(20); 4204const textBlob = drawing.TextBlob.makeFromString("drawing", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4205let bounds = textBlob.bounds(); 4206``` 4207 4208## Typeface 4209 4210Describes the style of a typeface, such as SimSun or KaiTi. 4211 4212### getFamilyName 4213 4214getFamilyName(): string 4215 4216Obtains the name of the typeface family, which is the name given to a collection of related typeface designs. 4217 4218**System capability**: SystemCapability.Graphics.Drawing 4219 4220**Return value** 4221 4222| Type | Description | 4223| ------ | -------------------- | 4224| string | Family name.| 4225 4226**Example** 4227 4228```ts 4229import { drawing } from '@kit.ArkGraphics2D'; 4230 4231const font = new drawing.Font(); 4232let typeface = font.getTypeface(); 4233let familyName = typeface.getFamilyName(); 4234``` 4235 4236### makeFromFile<sup>12+</sup> 4237 4238static makeFromFile(filePath: string): Typeface 4239 4240Constructs a typeface from a file. 4241 4242**System capability**: SystemCapability.Graphics.Drawing 4243 4244**Parameters** 4245 4246| Name | Type | Mandatory | Description | 4247| ----------- | ---------------------------------------- | ---- | ------------------- | 4248| 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).| 4249 4250**Return value** 4251 4252| Type | Description | 4253| ------ | -------------------- | 4254| [Typeface](#typeface) | **Typeface** object.| 4255 4256**Error codes** 4257 4258For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4259 4260| ID| Error Message| 4261| ------- | --------------------------------------------| 4262| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4263 4264**Example** 4265 4266```ts 4267import { RenderNode } from '@kit.ArkUI'; 4268import { drawing } from '@kit.ArkGraphics2D'; 4269 4270class TextRenderNode extends RenderNode { 4271 async draw(context: DrawContext) { 4272 const canvas = context.canvas; 4273 let font = new drawing.Font(); 4274 let str = "/system/fonts/HarmonyOS_Sans_Italic.ttf"; 4275 const mytypeface = drawing.Typeface.makeFromFile(str); 4276 font.setTypeface(mytypeface); 4277 const textBlob = drawing.TextBlob.makeFromString("Hello World", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4278 canvas.drawTextBlob(textBlob, 60, 100); 4279 } 4280} 4281``` 4282 4283### makeFromRawFile<sup>18+</sup> 4284 4285static makeFromRawFile(rawfile: Resource): Typeface 4286 4287Constructs a typeface from a file, which must be stored in the **resources/rawfile** directory of the application project. 4288 4289**System capability**: SystemCapability.Graphics.Drawing 4290 4291**Parameters** 4292 4293| Name | Type | Mandatory | Description | 4294| ----------- | ---------------------------------------- | ---- | ------------------- | 4295| 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')**.| 4296 4297**Return value** 4298 4299| Type | Description | 4300| ------ | -------------------- | 4301| [Typeface](#typeface) | **Typeface** object. In abnormal cases, a null pointer is returned.| 4302 4303**Example** 4304 4305```ts 4306import { RenderNode } from '@kit.ArkUI'; 4307import { drawing } from '@kit.ArkGraphics2D'; 4308 4309class TextRenderNode extends RenderNode { 4310 async draw(context: DrawContext) { 4311 const canvas = context.canvas; 4312 let font = new drawing.Font(); 4313 const mytypeface = drawing.Typeface.makeFromRawFile($rawfile('HarmonyOS_Sans_Bold.ttf')); 4314 font.setTypeface(mytypeface); 4315 const textBlob = drawing.TextBlob.makeFromString("Hello World", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4316 canvas.drawTextBlob(textBlob, 60, 100); 4317 } 4318} 4319``` 4320 4321## Font 4322 4323Describes the attributes used for text rendering, such as size and typeface. 4324 4325### isSubpixel<sup>12+</sup> 4326 4327isSubpixel(): boolean 4328 4329Checks whether sub-pixel rendering is used for this font. 4330 4331**System capability**: SystemCapability.Graphics.Drawing 4332 4333**Return value** 4334 4335| Type | Description | 4336| ------ | -------------------- | 4337| boolean | Check result. The value **true** means that sub-pixel rendering is used, and **false** means the opposite.| 4338 4339**Example** 4340 4341```ts 4342import {drawing} from '@kit.ArkGraphics2D'; 4343 4344let font: drawing.Font = new drawing.Font(); 4345font.enableSubpixel(true) 4346console.info("values=" + font.isSubpixel()); 4347``` 4348 4349### isLinearMetrics<sup>12+</sup> 4350 4351isLinearMetrics(): boolean 4352 4353Checks whether linear scaling is used for this font. 4354 4355**System capability**: SystemCapability.Graphics.Drawing 4356 4357**Return value** 4358 4359| Type | Description | 4360| ------ | -------------------- | 4361| boolean | Check result. The value **true** means that linear scaling is used, and **false** means the opposite.| 4362 4363**Example** 4364 4365```ts 4366import {drawing} from '@kit.ArkGraphics2D'; 4367 4368let font: drawing.Font = new drawing.Font(); 4369font.enableLinearMetrics(true) 4370console.info("values=" + font.isLinearMetrics()); 4371``` 4372 4373### getSkewX<sup>12+</sup> 4374 4375getSkewX(): number 4376 4377Obtains the horizontal skew factor of this font. 4378 4379**System capability**: SystemCapability.Graphics.Drawing 4380 4381**Return value** 4382 4383| Type | Description | 4384| ------ | -------------------- | 4385| number | Horizontal skew factor.| 4386 4387**Example** 4388 4389```ts 4390import {drawing} from '@kit.ArkGraphics2D'; 4391 4392let font: drawing.Font = new drawing.Font(); 4393font.setSkewX(-1) 4394console.info("values=" + font.getSkewX()); 4395``` 4396 4397### isEmbolden<sup>12+</sup> 4398 4399isEmbolden(): boolean 4400 4401Checks whether the bold effect is set for this font. 4402 4403**System capability**: SystemCapability.Graphics.Drawing 4404 4405**Return value** 4406 4407| Type | Description | 4408| ------ | -------------------- | 4409| boolean | Check result. The value **true** means that the bold effect is set, and **false** means the opposite.| 4410 4411**Example** 4412 4413```ts 4414import {drawing} from '@kit.ArkGraphics2D'; 4415 4416let font: drawing.Font = new drawing.Font(); 4417font.enableEmbolden(true); 4418console.info("values=" + font.isEmbolden()); 4419``` 4420 4421### getScaleX<sup>12+</sup> 4422 4423getScaleX(): number 4424 4425Obtains the horizontal scale ratio of this font. 4426 4427**System capability**: SystemCapability.Graphics.Drawing 4428 4429**Return value** 4430 4431| Type | Description | 4432| ------ | -------------------- | 4433| number | Horizontal scale ratio.| 4434 4435**Example** 4436 4437```ts 4438import {drawing} from '@kit.ArkGraphics2D'; 4439 4440let font: drawing.Font = new drawing.Font(); 4441font.setScaleX(2); 4442console.info("values=" + font.getScaleX()); 4443``` 4444 4445### getHinting<sup>12+</sup> 4446 4447getHinting(): FontHinting 4448 4449Obtains the font hinting effect. 4450 4451**System capability**: SystemCapability.Graphics.Drawing 4452 4453**Return value** 4454 4455| Type | Description | 4456| ------ | -------------------- | 4457| [FontHinting](#fonthinting12) | Font hinting effect.| 4458 4459**Example** 4460 4461```ts 4462import {drawing} from '@kit.ArkGraphics2D'; 4463 4464let font: drawing.Font = new drawing.Font(); 4465console.info("values=" + font.getHinting()); 4466``` 4467 4468### getEdging<sup>12+</sup> 4469 4470getEdging(): FontEdging 4471 4472Obtains the font edging effect. 4473 4474**System capability**: SystemCapability.Graphics.Drawing 4475 4476**Return value** 4477 4478| Type | Description | 4479| ------ | -------------------- | 4480| [FontEdging](#fontedging12) | Font edging effect.| 4481 4482**Example** 4483 4484```ts 4485import {drawing} from '@kit.ArkGraphics2D'; 4486 4487let font: drawing.Font = new drawing.Font(); 4488console.info("values=" + font.getEdging()); 4489``` 4490 4491### enableSubpixel 4492 4493enableSubpixel(isSubpixel: boolean): void 4494 4495Enables subpixel font rendering. 4496 4497**System capability**: SystemCapability.Graphics.Drawing 4498 4499**Parameters** 4500 4501| Name | Type | Mandatory| Description | 4502| ---------- | ------- | ---- | ------------------------------------------------------------ | 4503| isSubpixel | boolean | Yes | Whether to enable subpixel font rendering. The value **true** means to enable subpixel font rendering, and **false** means the opposite.| 4504 4505**Error codes** 4506 4507For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4508 4509| ID| Error Message| 4510| ------- | --------------------------------------------| 4511| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4512 4513**Example** 4514 4515```ts 4516import { drawing } from '@kit.ArkGraphics2D'; 4517 4518let font = new drawing.Font(); 4519font.enableSubpixel(true); 4520``` 4521 4522### enableEmbolden 4523 4524enableEmbolden(isEmbolden: boolean): void 4525 4526Enables emboldened fonts. 4527 4528**System capability**: SystemCapability.Graphics.Drawing 4529 4530**Parameters** 4531 4532| Name | Type | Mandatory| Description | 4533| ---------- | ------- | ---- | ----------------------------------------------------- | 4534| isEmbolden | boolean | Yes | Whether to enable emboldened fonts. The value **true** means to enable emboldened fonts, and **false** means the opposite.| 4535 4536**Error codes** 4537 4538For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4539 4540| ID| Error Message| 4541| ------- | --------------------------------------------| 4542| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4543 4544**Example** 4545 4546```ts 4547import { drawing } from '@kit.ArkGraphics2D'; 4548 4549let font = new drawing.Font(); 4550font.enableEmbolden(true); 4551``` 4552 4553### enableLinearMetrics 4554 4555enableLinearMetrics(isLinearMetrics: boolean): void 4556 4557Enables linear font scaling. 4558 4559**System capability**: SystemCapability.Graphics.Drawing 4560 4561**Parameters** 4562 4563| Name | Type | Mandatory| Description | 4564| --------------- | ------- | ---- | ----------------------------------------------------------- | 4565| isLinearMetrics | boolean | Yes | Whether to enable linear font scaling. The value **true** means to enable linear font scaling, and **false** means the opposite.| 4566 4567**Error codes** 4568 4569For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4570 4571| ID| Error Message| 4572| ------- | --------------------------------------------| 4573| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4574 4575**Example** 4576 4577```ts 4578import { drawing } from '@kit.ArkGraphics2D'; 4579 4580let font = new drawing.Font(); 4581font.enableLinearMetrics(true); 4582``` 4583 4584### setSize 4585 4586setSize(textSize: number): void 4587 4588Sets the font size. 4589 4590**System capability**: SystemCapability.Graphics.Drawing 4591 4592**Parameters** 4593 4594| Name | Type | Mandatory| Description | 4595| -------- | ------ | ---- | ---------------- | 4596| textSize | number | Yes | Font 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.| 4597 4598**Error codes** 4599 4600For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4601 4602| ID| Error Message| 4603| ------- | --------------------------------------------| 4604| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 4605 4606**Example** 4607 4608```ts 4609import { drawing } from '@kit.ArkGraphics2D'; 4610 4611let font = new drawing.Font(); 4612font.setSize(5); 4613``` 4614 4615### getSize 4616 4617getSize(): number 4618 4619Obtains the font size. 4620 4621**System capability**: SystemCapability.Graphics.Drawing 4622 4623**Return value** 4624 4625| Type | Description | 4626| ------ | ---------------- | 4627| number | Font size. The value is a floating point number.| 4628 4629**Example** 4630 4631```ts 4632import { drawing } from '@kit.ArkGraphics2D'; 4633 4634let font = new drawing.Font(); 4635font.setSize(5); 4636let fontSize = font.getSize(); 4637``` 4638 4639### setTypeface 4640 4641setTypeface(typeface: Typeface): void 4642 4643Sets the typeface style (including attributes such as font name, weight, and italic) for the font. 4644 4645**System capability**: SystemCapability.Graphics.Drawing 4646 4647**Parameters** 4648 4649| Name | Type | Mandatory| Description | 4650| -------- | --------------------- | ---- | ------ | 4651| typeface | [Typeface](#typeface) | Yes | Typeface style (including attributes such as font name, weight, and italic).| 4652 4653**Error codes** 4654 4655For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4656 4657| ID| Error Message| 4658| ------- | --------------------------------------------| 4659| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4660 4661**Example** 4662 4663```ts 4664import { drawing } from '@kit.ArkGraphics2D'; 4665 4666let font = new drawing.Font(); 4667font.setTypeface(new drawing.Typeface()); 4668``` 4669 4670### getTypeface 4671 4672getTypeface(): Typeface 4673 4674Obtains the typeface. 4675 4676**System capability**: SystemCapability.Graphics.Drawing 4677 4678**Return value** 4679 4680| Type | Description | 4681| --------------------- | ------ | 4682| [Typeface](#typeface) | **Typeface** object.| 4683 4684**Example** 4685 4686```ts 4687import { drawing } from '@kit.ArkGraphics2D'; 4688 4689let font = new drawing.Font(); 4690let typeface = font.getTypeface(); 4691``` 4692 4693### getMetrics 4694 4695getMetrics(): FontMetrics 4696 4697Obtains the font metrics of the typeface. 4698 4699**System capability**: SystemCapability.Graphics.Drawing 4700 4701**Return value** 4702 4703| Type | Description | 4704| --------------------------- | ----------------- | 4705| [FontMetrics](#fontmetrics) | Font metrics.| 4706 4707**Example** 4708 4709```ts 4710import { drawing } from '@kit.ArkGraphics2D'; 4711 4712let font = new drawing.Font(); 4713let metrics = font.getMetrics(); 4714``` 4715 4716### measureText 4717 4718measureText(text: string, encoding: TextEncoding): number 4719 4720Measures the text width. 4721 4722> **NOTE** 4723> 4724> 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). 4725 4726**System capability**: SystemCapability.Graphics.Drawing 4727 4728**Parameters** 4729 4730| Name | Type | Mandatory| Description | 4731| -------- | ----------------------------- | ---- | ---------- | 4732| text | string | Yes | Text content.| 4733| encoding | [TextEncoding](#textencoding) | Yes | Encoding format.| 4734 4735**Return value** 4736 4737| Type | Description | 4738| ------ | ---------------- | 4739| number | Width of the text. The value is a floating point number.| 4740 4741**Error codes** 4742 4743For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4744 4745| ID| Error Message| 4746| ------- | --------------------------------------------| 4747| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4748 4749**Example** 4750 4751```ts 4752import { drawing } from '@kit.ArkGraphics2D'; 4753 4754let font = new drawing.Font(); 4755font.measureText("drawing", drawing.TextEncoding.TEXT_ENCODING_UTF8); 4756``` 4757 4758### measureSingleCharacter<sup>12+</sup> 4759 4760measureSingleCharacter(text: string): number 4761 4762Measures 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. 4763 4764**System capability**: SystemCapability.Graphics.Drawing 4765 4766**Parameters** 4767 4768| Name| Type | Mandatory| Description | 4769| ------ | ------------------- | ---- | ----------- | 4770| text | string | Yes | Single character to measure. The length of the string must be 1. | 4771 4772**Return value** 4773 4774| Type | Description | 4775| ------ | ---------------- | 4776| number | Width of the character. The value is a floating point number.| 4777 4778**Error codes** 4779 4780For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4781 4782| ID| Error Message| 4783| ------- | --------------------------------------------| 4784| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 4785 4786**Example** 4787 4788```ts 4789import { RenderNode } from '@kit.ArkUI'; 4790import { drawing } from '@kit.ArkGraphics2D'; 4791 4792class DrawingRenderNode extends RenderNode { 4793 draw(context : DrawContext) { 4794 const canvas = context.canvas; 4795 const font = new drawing.Font(); 4796 font.setSize(20); 4797 let width = font.measureSingleCharacter ("Hello"); 4798 } 4799} 4800``` 4801 4802### setScaleX<sup>12+</sup> 4803 4804setScaleX(scaleX: number): void 4805 4806Sets a horizontal scale factor for this font. 4807 4808**System capability**: SystemCapability.Graphics.Drawing 4809 4810**Parameters** 4811 4812| Name | Type | Mandatory| Description | 4813| -------- | ----------------------------- | ---- | ---------- | 4814| scaleX | number | Yes | Horizontal scale factor. The value is a floating point number.| 4815 4816**Error codes** 4817 4818For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4819 4820| ID| Error Message| 4821| ------- | --------------------------------------------| 4822| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4823 4824**Example** 4825 4826```ts 4827import { RenderNode } from '@kit.ArkUI'; 4828import { common2D, drawing } from '@kit.ArkGraphics2D'; 4829 4830class DrawingRenderNode extends RenderNode { 4831 draw(context : DrawContext) { 4832 const canvas = context.canvas; 4833 const pen = new drawing.Pen(); 4834 pen.setStrokeWidth(5); 4835 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 4836 canvas.attachPen(pen); 4837 let font = new drawing.Font(); 4838 font.setSize(100); 4839 font.setScaleX(2); 4840 const textBlob = drawing.TextBlob.makeFromString("hello", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4841 canvas.drawTextBlob(textBlob, 200, 200); 4842 } 4843} 4844``` 4845 4846### setSkewX<sup>12+</sup> 4847 4848setSkewX(skewX: number): void 4849 4850Sets a horizontal skew factor for this font. 4851 4852**System capability**: SystemCapability.Graphics.Drawing 4853 4854**Parameters** 4855 4856| Name | Type | Mandatory| Description | 4857| -------- | ----------------------------- | ---- | ---------- | 4858| 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.| 4859 4860**Error codes** 4861 4862For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4863 4864| ID| Error Message| 4865| ------- | --------------------------------------------| 4866| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4867 4868**Example** 4869 4870```ts 4871import { RenderNode } from '@kit.ArkUI'; 4872import { common2D, drawing } from '@kit.ArkGraphics2D'; 4873 4874class DrawingRenderNode extends RenderNode { 4875 draw(context : DrawContext) { 4876 const canvas = context.canvas; 4877 const pen = new drawing.Pen(); 4878 pen.setStrokeWidth(5); 4879 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 4880 canvas.attachPen(pen); 4881 let font = new drawing.Font(); 4882 font.setSize(100); 4883 font.setSkewX(1); 4884 const textBlob = drawing.TextBlob.makeFromString("hello", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4885 canvas.drawTextBlob(textBlob, 200, 200); 4886 } 4887} 4888``` 4889 4890### setEdging<sup>12+</sup> 4891 4892setEdging(edging: FontEdging): void 4893 4894Sets a font edging effect. 4895 4896**System capability**: SystemCapability.Graphics.Drawing 4897 4898**Parameters** 4899 4900| Name | Type | Mandatory| Description | 4901| -------- | ----------------------------- | ---- | ---------- | 4902| edging | [FontEdging](#fontedging12) | Yes | Font edging effect.| 4903 4904**Error codes** 4905 4906For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4907 4908| ID| Error Message| 4909| ------- | --------------------------------------------| 4910| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed. | 4911 4912**Example** 4913 4914```ts 4915import { drawing } from '@kit.ArkGraphics2D'; 4916 4917let font = new drawing.Font(); 4918font.setEdging(drawing.FontEdging.SUBPIXEL_ANTI_ALIAS); 4919``` 4920 4921### setHinting<sup>12+</sup> 4922 4923setHinting(hinting: FontHinting): void 4924 4925Sets a font hinting effect. 4926 4927**System capability**: SystemCapability.Graphics.Drawing 4928 4929**Parameters** 4930 4931| Name | Type | Mandatory| Description | 4932| -------- | ----------------------------- | ---- | ---------- | 4933| hinting | [FontHinting](#fonthinting12) | Yes | Font hinting effect.| 4934 4935**Error codes** 4936 4937For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4938 4939| ID| Error Message| 4940| ------- | --------------------------------------------| 4941| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed. | 4942 4943**Example** 4944 4945```ts 4946import { drawing } from '@kit.ArkGraphics2D'; 4947 4948let font = new drawing.Font(); 4949font.setHinting(drawing.FontHinting.FULL); 4950``` 4951 4952### countText<sup>12+</sup> 4953 4954countText(text: string): number 4955 4956Obtains the number of glyphs represented by text. 4957 4958**System capability**: SystemCapability.Graphics.Drawing 4959 4960**Parameters** 4961 4962| Name | Type | Mandatory| Description | 4963| -------- | ----------------------------- | ---- | ---------- | 4964| text | string | Yes | Text content.| 4965 4966**Return value** 4967 4968| Type | Description | 4969| ------ | ---------------- | 4970| number | Number of glyphs represented by the text. The value is an integer.| 4971 4972**Error codes** 4973 4974For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4975 4976| ID| Error Message| 4977| ------- | --------------------------------------------| 4978| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4979 4980**Example** 4981 4982```ts 4983import { drawing } from '@kit.ArkGraphics2D'; 4984 4985let font = new drawing.Font(); 4986let resultNumber: number = font.countText('ABCDE'); 4987console.info("count text number: " + resultNumber); 4988``` 4989 4990### setBaselineSnap<sup>12+</sup> 4991 4992setBaselineSnap(isBaselineSnap: boolean): void 4993 4994Sets whether to request that baselines be snapped to pixels when the current canvas matrix is axis aligned. 4995 4996**System capability**: SystemCapability.Graphics.Drawing 4997 4998**Parameters** 4999 5000| Name | Type | Mandatory| Description | 5001| --------------- | ------- | ---- | ---------------------------------------- | 5002| 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.| 5003 5004**Error codes** 5005 5006For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5007 5008| ID| Error Message| 5009| ------- | --------------------------------------------| 5010| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5011 5012**Example** 5013 5014```ts 5015import { drawing } from '@kit.ArkGraphics2D'; 5016 5017let font : drawing.Font = new drawing.Font(); 5018font.setBaselineSnap(true); 5019console.info("drawing font isBaselineSnap: " + font.isBaselineSnap()); 5020``` 5021 5022### isBaselineSnap()<sup>12+</sup> 5023 5024isBaselineSnap(): boolean 5025 5026Checks whether baselines are requested to be snapped to pixels when the current canvas matrix is axis aligned. 5027 5028**System capability**: SystemCapability.Graphics.Drawing 5029 5030**Return value** 5031 5032| Type | Description | 5033| ------ | ---------------- | 5034| boolean | Check result. The value **true** means that the baselines are requested to be snapped to pixels, and **false** means the opposite.| 5035 5036**Example** 5037 5038```ts 5039import { drawing } from '@kit.ArkGraphics2D'; 5040 5041let font : drawing.Font = new drawing.Font(); 5042font.setTypeface(new drawing.Typeface()); 5043font.setBaselineSnap(true); 5044console.info("drawing font isBaselineSnap: " + font.isBaselineSnap()); 5045``` 5046 5047### setEmbeddedBitmaps<sup>12+</sup> 5048 5049setEmbeddedBitmaps(isEmbeddedBitmaps: boolean): void 5050 5051Sets whether to use bitmaps in this font. 5052 5053**System capability**: SystemCapability.Graphics.Drawing 5054 5055**Parameters** 5056 5057| Name | Type | Mandatory| Description | 5058| -------- | ------ | ---- | ---------------- | 5059| 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.| 5060 5061**Error codes** 5062 5063For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5064 5065| ID| Error Message| 5066| ------- | --------------------------------------------| 5067| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5068 5069**Example** 5070 5071```ts 5072import { drawing } from '@kit.ArkGraphics2D'; 5073 5074let font : drawing.Font = new drawing.Font(); 5075font.setTypeface(new drawing.Typeface()); 5076font.setEmbeddedBitmaps(false); 5077console.info("draw isEmbeddedBitmaps: " + font.isEmbeddedBitmaps()); 5078``` 5079 5080### isEmbeddedBitmaps()<sup>12+</sup> 5081 5082isEmbeddedBitmaps(): boolean 5083 5084Checks whether bitmaps are used in this font. 5085 5086**System capability**: SystemCapability.Graphics.Drawing 5087 5088**Return value** 5089 5090| Type | Description | 5091| ------ | ---------------- | 5092| boolean | Check result. The value **true** means that the bitmaps are used, and **false** means the opposite.| 5093 5094**Example** 5095 5096```ts 5097import { drawing } from '@kit.ArkGraphics2D'; 5098 5099let font : drawing.Font = new drawing.Font(); 5100font.setTypeface(new drawing.Typeface()); 5101font.setEmbeddedBitmaps(true); 5102console.info("draw isEmbeddedBitmaps: " + font.isEmbeddedBitmaps()); 5103``` 5104 5105### setForceAutoHinting<sup>12+</sup> 5106 5107setForceAutoHinting(isForceAutoHinting: boolean): void 5108 5109Sets whether to forcibly use auto hinting, that is, whether to always hint glyphs. 5110 5111**System capability**: SystemCapability.Graphics.Drawing 5112 5113**Parameters** 5114 5115| Name | Type | Mandatory| Description | 5116| -------- | ------ | ---- | ---------------- | 5117| isForceAutoHinting | boolean | Yes | Whether to forcibly use auto hinting. The value **true** means to forcibly use auto hinting, and **false** means the opposite.| 5118 5119**Error codes** 5120 5121For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5122 5123| ID| Error Message| 5124| ------- | --------------------------------------------| 5125| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5126 5127**Example** 5128 5129```ts 5130import { drawing } from '@kit.ArkGraphics2D'; 5131 5132let font : drawing.Font = new drawing.Font(); 5133font.setTypeface(new drawing.Typeface()); 5134font.setForceAutoHinting(false); 5135console.info("drawing isForceAutoHinting: " + font.isForceAutoHinting()); 5136``` 5137 5138### isForceAutoHinting<sup>12+</sup> 5139 5140isForceAutoHinting(): boolean 5141 5142Checks whether auto hinting is forcibly used. 5143 5144**System capability**: SystemCapability.Graphics.Drawing 5145 5146**Return value** 5147 5148| Type | Description | 5149| ------ | ---------------- | 5150| boolean | Check result. The value **true** means that auto hinting is forcibly used, and **false** means the opposite.| 5151 5152**Example** 5153 5154```ts 5155import { drawing } from '@kit.ArkGraphics2D'; 5156 5157let font : drawing.Font = new drawing.Font(); 5158font.setTypeface(new drawing.Typeface()); 5159font.setForceAutoHinting(false); 5160console.info("drawing isForceAutoHinting: " + font.isForceAutoHinting()); 5161``` 5162 5163### getWidths<sup>12+</sup> 5164 5165getWidths(glyphs: Array\<number>): Array\<number> 5166 5167Obtains the width of each glyph in an array. 5168 5169**System capability**: SystemCapability.Graphics.Drawing 5170 5171**Parameters** 5172 5173| Name | Type | Mandatory| Description | 5174| -------- | --------------------- | ---- | ------ | 5175| glyphs | Array\<number> | Yes | Glyph array, which can be generated by [textToGlyphs](#texttoglyphs12).| 5176 5177**Return value** 5178 5179| Type | Description | 5180| ------ | ---------------- | 5181| Array\<number> | Glyph width array.| 5182 5183**Error codes** 5184 5185For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5186 5187| ID| Error Message| 5188| ------- | --------------------------------------------| 5189| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5190 5191**Example** 5192 5193```ts 5194import { drawing } from '@kit.ArkGraphics2D'; 5195 5196let font: drawing.Font = new drawing.Font(); 5197let text: string = 'hello world'; 5198let glyphs: number[] = font.textToGlyphs(text); 5199let fontWidths: Array<number> = font.getWidths(glyphs); 5200for (let index = 0; index < fontWidths.length; index++) { 5201 console.info("get fontWidths[", index, "]:", fontWidths[index]); 5202} 5203``` 5204 5205### textToGlyphs<sup>12+</sup> 5206 5207textToGlyphs(text: string, glyphCount?: number): Array\<number> 5208 5209Converts text into glyph indexes. 5210 5211**System capability**: SystemCapability.Graphics.Drawing 5212 5213**Parameters** 5214 5215| Name | Type | Mandatory| Description | 5216| -------- | ----------------------------- | ---- | ---------- | 5217| text | string | Yes | Text string.| 5218| 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.| 5219 5220**Return value** 5221 5222| Type | Description | 5223| ------ | ---------------- | 5224| Array\<number> | Array that holds the glyph indexes.| 5225 5226**Error codes** 5227 5228For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5229 5230| ID| Error Message| 5231| ------- | --------------------------------------------| 5232| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5233 5234**Example** 5235 5236```ts 5237import { drawing } from '@kit.ArkGraphics2D'; 5238 5239let font : drawing.Font = new drawing.Font(); 5240let text : string = 'hello world'; 5241let glyphs : number[] = font.textToGlyphs(text); 5242console.info("drawing text toglyphs OnTestFunction num = " + glyphs.length ); 5243``` 5244 5245### getBounds<sup>18+</sup> 5246 5247getBounds(glyphs: Array\<number>): Array\<common2D.Rect> 5248 5249Obtains the rectangular bounding box of each glyph in an array. 5250 5251**System capability**: SystemCapability.Graphics.Drawing 5252 5253**Parameters** 5254 5255| Name | Type | Mandatory| Description | 5256| -------- | --------------------- | ---- | ------ | 5257| glyphs | Array\<number> | Yes | Glyph array, which can be generated by [textToGlyphs](#texttoglyphs12).| 5258 5259**Return value** 5260 5261| Type | Description | 5262| ------ | ---------------- | 5263| Array\<[common2D.Rect](js-apis-graphics-common2D.md#rect)> | Array that holds the rectangular bounding boxes.| 5264 5265**Example** 5266 5267```ts 5268import { common2D, drawing } from '@kit.ArkGraphics2D'; 5269 5270let font: drawing.Font = new drawing.Font(); 5271let text: string = 'hello world'; 5272let glyphs: number[] = font.textToGlyphs(text); 5273let fontBounds: Array<common2D.Rect> = font.getBounds(glyphs); 5274for (let index = 0; index < fontBounds.length; index++) { 5275 console.info("get fontWidths[", index, "] left:", fontBounds[index].left, " top:", fontBounds[index].top, 5276 " right:", fontBounds[index].right, " bottom:", fontBounds[index].bottom); 5277} 5278``` 5279 5280### getTextPath<sup>18+</sup> 5281 5282getTextPath(text: string, byteLength: number, x: number, y: number): Path; 5283 5284Obtains the outline path of a text. 5285 5286**System capability**: SystemCapability.Graphics.Drawing 5287 5288**Parameters** 5289 5290| Name | Type | Mandatory| Description | 5291| ------ | ------------------------------------------------ | ---- | ---------------------- | 5292| text | string | Yes | UTF-8 text-encoded characters.| 5293|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.| 5294| x | number | Yes | X coordinate of the text in the drawing area, with the origin as the start point.| 5295| y | number | Yes | Y coordinate of the text in the drawing area, with the origin as the start point.| 5296 5297**Return value** 5298 5299| Type | Description | 5300| ------ | ---------------- | 5301| [Path](#path) | Outline path of the text.| 5302 5303**Error codes** 5304 5305For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5306 5307| ID| Error Message| 5308| ------- | --------------------------------------------| 5309| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5310 5311**Example** 5312 5313```ts 5314import { drawing } from '@kit.ArkGraphics2D'; 5315import { buffer } from '@kit.ArkTS'; 5316import { RenderNode } from '@kit.ArkUI'; 5317 5318class DrawingRenderNode extends RenderNode { 5319 draw(context : DrawContext) { 5320 const canvas = context.canvas; 5321 let font = new drawing.Font(); 5322 font.setSize(50) 5323 let myString: string = "Hello, HarmonyOS"; 5324 let length = buffer.from(myString).length; 5325 let path = font.getTextPath(myString, length, 0, 100) 5326 canvas.drawPath(path) 5327 } 5328} 5329``` 5330 5331### createPathForGlyph<sup>18+</sup> 5332 5333createPathForGlyph(index: number): Path 5334 5335Obtains the outline path of a glyph. 5336 5337**System capability**: SystemCapability.Graphics.Drawing 5338 5339**Parameters** 5340 5341| Name | Type | Mandatory| Description | 5342| -------- | --------------------- | ---- | ------ | 5343| index | number | Yes | Index of the glyph.| 5344 5345**Return value** 5346 5347| Type | Description | 5348| ------ | ---------------- | 5349| [Path](#path) | Outline path of the glyph.| 5350 5351**Example** 5352 5353```ts 5354import { FrameNode, NodeController, RenderNode } from '@kit.ArkUI'; 5355import { drawing } from '@kit.ArkGraphics2D'; 5356 5357class DrawingRenderNode extends RenderNode { 5358 draw(context : DrawContext) { 5359 const canvas = context.canvas; 5360 let font = new drawing.Font(); 5361 font.setSize(50) 5362 let text: string = 'Hello' 5363 let glyphs: number[] = font.textToGlyphs(text); 5364 for (let index = 0; index < glyphs.length; index++) { 5365 let path: drawing.Path = font.createPathForGlyph(glyphs[index]) 5366 canvas.drawPath(path) 5367 } 5368 } 5369} 5370``` 5371 5372### setThemeFontFollowed<sup>15+</sup> 5373 5374setThemeFontFollowed(followed: boolean): void 5375 5376Sets 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. 5377 5378**System capability**: SystemCapability.Graphics.Drawing 5379 5380**Parameters** 5381 5382| Name | Type | Mandatory| Description | 5383| -------- | ------ | ---- | ---------------- | 5384| followed | boolean | Yes | Whether to follow the theme font. The value **true** means to follow the theme font, and **false** means the opposite.| 5385 5386**Error codes** 5387 5388For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5389 5390| ID| Error Message| 5391| ------- | --------------------------------------------| 5392| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5393 5394**Example** 5395 5396```ts 5397import { drawing } from '@kit.ArkGraphics2D'; 5398 5399let font : drawing.Font = new drawing.Font(); 5400font.setThemeFontFollowed(true); 5401console.info("font is theme font followed: " + font.isThemeFontFollowed()); 5402``` 5403 5404### isThemeFontFollowed()<sup>15+</sup> 5405 5406isThemeFontFollowed(): boolean 5407 5408Checks whether the font follows the theme font. By default, the font follows the theme font. 5409 5410**System capability**: SystemCapability.Graphics.Drawing 5411 5412**Return value** 5413 5414| Type | Description | 5415| ------ | ---------------- | 5416| boolean | Check result. The value **true** means that the theme font is followed, and **false** means the opposite.| 5417 5418**Example** 5419 5420```ts 5421import { drawing } from '@kit.ArkGraphics2D'; 5422 5423let font : drawing.Font = new drawing.Font(); 5424font.setThemeFontFollowed(true); 5425console.info("font is theme font followed: " + font.isThemeFontFollowed()); 5426``` 5427 5428## FontMetricsFlags<sup>12+</sup> 5429 5430Enumerates the font measurement flags, which is used to specify whether a field in the font measurement information is valid. 5431 5432**System capability**: SystemCapability.Graphics.Drawing 5433 5434| Name | Value | Description | 5435| ----------------------------- | --------- | ------------------------------ | 5436| UNDERLINE_THICKNESS_VALID | 1 << 0 | The **underlineThickness** field in the [FontMetrics](#fontmetrics) struct is valid. | 5437| UNDERLINE_POSITION_VALID | 1 << 1 | The **underlinePosition** field in the [FontMetrics](#fontmetrics) struct is valid. | 5438| STRIKETHROUGH_THICKNESS_VALID | 1 << 2 | The **strikethroughThickness** field in the [FontMetrics](#fontmetrics) struct is valid.| 5439| STRIKETHROUGH_POSITION_VALID | 1 << 3 | The **strikethroughPosition** field in the [FontMetrics](#fontmetrics) struct is valid. | 5440| BOUNDS_INVALID | 1 << 4 | The boundary metrics (such as **top**, **bottom**, **xMin**, and **xMax**) in the [FontMetrics](#fontmetrics) struct are invalid. | 5441 5442## FontMetrics 5443 5444Describes the attributes that describe the font size and layout. A typeface has similar font metrics. 5445 5446**System capability**: SystemCapability.Graphics.Drawing 5447 5448| Name | Type | Read Only| Optional| Description | 5449| ------- | ------ | ---- | ---- | ------------------------------------------------------------ | 5450| flags<sup>12+</sup> | [FontMetricsFlags](#fontmetricsflags12) | Yes | Yes | Font measurement flags that are valid. | 5451| top | number | Yes | No | Maximum distance from the baseline to the highest coordinate of the text. The value is a floating point number. | 5452| ascent | number | Yes | No | Distance from the baseline to the highest coordinate of the text. The value is a floating point number. | 5453| descent | number | Yes | No | Distance from the baseline to the lowest coordinate of the text. The value is a floating point number. | 5454| bottom | number | Yes | No | Maximum distance from the baseline to the lowest coordinate of the text. The value is a floating point number. | 5455| 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.| 5456| avgCharWidth<sup>12+</sup> | number | Yes | Yes | Average character width. | 5457| maxCharWidth<sup>12+</sup> | number | Yes | Yes | Maximum character width. | 5458| 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. | 5459| 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. | 5460| xHeight<sup>12+</sup> | number | Yes | Yes | Height of the lowercase letter x. The value is usually a negative value. | 5461| capHeight<sup>12+</sup> | number | Yes | Yes | Height of a capital letter. The value is usually a negative value. | 5462| underlineThickness<sup>12+</sup> | number | Yes | Yes | Thickness of the underline. | 5463| 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. | 5464| strikethroughThickness<sup>12+</sup> | number | Yes | Yes | Thickness of the strikethrough. | 5465| 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. | 5466 5467## ColorFilter 5468 5469Defines a color filter. 5470 5471### createBlendModeColorFilter 5472 5473createBlendModeColorFilter(color: common2D.Color, mode: BlendMode) : ColorFilter 5474 5475Creates a **ColorFilter** object with a given color and blend mode. 5476 5477**System capability**: SystemCapability.Graphics.Drawing 5478 5479**Parameters** 5480 5481| Name| Type | Mandatory| Description | 5482| ------ | ---------------------------------------------------- | ---- | ---------------- | 5483| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. The value of each color channel is an integer ranging from 0 to 255.| 5484| mode | [BlendMode](#blendmode) | Yes | Blend mode.| 5485 5486**Return value** 5487 5488| Type | Description | 5489| --------------------------- | ------------------ | 5490| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 5491 5492**Error codes** 5493 5494For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5495 5496| ID| Error Message| 5497| ------- | --------------------------------------------| 5498| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5499 5500**Example** 5501 5502```ts 5503import { common2D, drawing } from '@kit.ArkGraphics2D'; 5504 5505const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 5506let colorFilter = drawing.ColorFilter.createBlendModeColorFilter(color, drawing.BlendMode.SRC); 5507``` 5508 5509### createBlendModeColorFilter<sup>18+</sup> 5510 5511static createBlendModeColorFilter(color: common2D.Color | number, mode: BlendMode) : ColorFilter 5512 5513Creates a **ColorFilter** object with a given color and blend mode. 5514 5515**System capability**: SystemCapability.Graphics.Drawing 5516 5517**Parameters** 5518 5519| Name| Type | Mandatory| Description | 5520| ------ | ---------------------------------------------------- | ---- | ---------------- | 5521| color | [common2D.Color](js-apis-graphics-common2D.md#color) \| number | Yes | Color, represented by an unsigned integer in hexadecimal ARGB format.| 5522| mode | [BlendMode](#blendmode) | Yes | Blend mode.| 5523 5524**Return value** 5525 5526| Type | Description | 5527| --------------------------- | ------------------ | 5528| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 5529 5530**Error codes** 5531 5532For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5533 5534| ID| Error Message| 5535| ------- | --------------------------------------------| 5536| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5537 5538**Example** 5539 5540```ts 5541import { drawing } from '@kit.ArkGraphics2D'; 5542 5543let colorFilter = drawing.ColorFilter.createBlendModeColorFilter(0xffff0000, drawing.BlendMode.SRC); 5544``` 5545 5546### createComposeColorFilter 5547 5548createComposeColorFilter(outer: ColorFilter, inner: ColorFilter) : ColorFilter 5549 5550Creates a **ColorFilter** object by combining another two color filters. 5551 5552**System capability**: SystemCapability.Graphics.Drawing 5553 5554**Parameters** 5555 5556| Name| Type | Mandatory| Description | 5557| ------ | --------------------------- | ---- | -------------------------------- | 5558| outer | [ColorFilter](#colorfilter) | Yes | Color filter that takes effect later in the new filter.| 5559| inner | [ColorFilter](#colorfilter) | Yes | Color filter that takes effect first in the new filter.| 5560 5561**Return value** 5562 5563| Type | Description | 5564| --------------------------- | ------------------ | 5565| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 5566 5567**Error codes** 5568 5569For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5570 5571| ID| Error Message| 5572| ------- | --------------------------------------------| 5573| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5574 5575**Example** 5576 5577```ts 5578import { common2D, drawing } from '@kit.ArkGraphics2D'; 5579 5580const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 5581let colorFilter1 = drawing.ColorFilter.createBlendModeColorFilter(color, drawing.BlendMode.SRC); 5582let colorFilter2 = drawing.ColorFilter.createBlendModeColorFilter(color, drawing.BlendMode.DST); 5583let colorFilter = drawing.ColorFilter.createComposeColorFilter(colorFilter1, colorFilter2); 5584``` 5585 5586### createLinearToSRGBGamma 5587 5588createLinearToSRGBGamma() : ColorFilter 5589 5590Creates a **ColorFilter** object that applies the sRGB gamma curve to the RGB channels. 5591 5592**System capability**: SystemCapability.Graphics.Drawing 5593 5594**Return value** 5595 5596| Type | Description | 5597| --------------------------- | ------------------ | 5598| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 5599 5600**Example** 5601 5602```ts 5603import { drawing } from '@kit.ArkGraphics2D'; 5604 5605let colorFilter = drawing.ColorFilter.createLinearToSRGBGamma(); 5606``` 5607 5608### createSRGBGammaToLinear 5609 5610createSRGBGammaToLinear() : ColorFilter 5611 5612Creates a **ColorFilter** object that applies the RGB channels to the sRGB gamma curve. 5613 5614**System capability**: SystemCapability.Graphics.Drawing 5615 5616**Return value** 5617 5618| Type | Description | 5619| --------------------------- | ------------------ | 5620| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 5621 5622**Example** 5623 5624```ts 5625import { drawing } from '@kit.ArkGraphics2D'; 5626 5627let colorFilter = drawing.ColorFilter.createSRGBGammaToLinear(); 5628``` 5629 5630### createLumaColorFilter 5631 5632createLumaColorFilter() : ColorFilter 5633 5634Creates a **ColorFilter** object that multiplies the luma into the alpha channel and sets the RGB channels to zero. 5635 5636**System capability**: SystemCapability.Graphics.Drawing 5637 5638**Return value** 5639 5640| Type | Description | 5641| --------------------------- | ------------------ | 5642| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 5643 5644**Example** 5645 5646```ts 5647import { drawing } from '@kit.ArkGraphics2D'; 5648 5649let colorFilter = drawing.ColorFilter.createLumaColorFilter(); 5650``` 5651 5652### createMatrixColorFilter<sup>12+</sup> 5653 5654static createMatrixColorFilter(matrix: Array\<number>): ColorFilter 5655 5656Creates a color filter object with a 4*5 color matrix. 5657 5658**System capability**: SystemCapability.Graphics.Drawing 5659 5660**Parameters** 5661 5662| Name | Type | Mandatory| Description | 5663| -------- | -------------------------------------------- | ---- | ------------------------------- | 5664| matrix | Array\<number> | Yes | An array of 20 numbers, indicating the 4*5 matrix. | 5665 5666**Return value** 5667 5668| Type | Description | 5669| --------------------------- | ------------------ | 5670| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 5671 5672**Error codes** 5673 5674For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5675 5676| ID| Error Message| 5677| ------- | --------------------------------------------| 5678| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5679 5680**Example** 5681 5682```ts 5683import { drawing } from '@kit.ArkGraphics2D'; 5684 5685let matrix: Array<number> = [ 5686 1, 0, 0, 0, 0, 5687 0, 1, 0, 0, 0, 5688 0, 0, 100, 0, 0, 5689 0, 0, 0, 1, 0 5690]; 5691let colorFilter = drawing.ColorFilter.createMatrixColorFilter(matrix); 5692``` 5693 5694## JoinStyle<sup>12+</sup> 5695 5696Enumerates the join styles of a pen. The join style defines the shape of the joints of a polyline segment drawn by the pen. 5697 5698**System capability**: SystemCapability.Graphics.Drawing 5699 5700| Name | Value | Description | Diagram | 5701| ----------- | ---- | ----------------------------------------------------------- | -------- | 5702| 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.|  | 5703| ROUND_JOIN | 1 | Round corner.|  | 5704| BEVEL_JOIN | 2 | Beveled corner.|  | 5705 5706## CapStyle<sup>12+</sup> 5707 5708Enumerates the cap styles of a pen. The cap style defines the style of both ends of a line segment drawn by the pen. 5709 5710**System capability**: SystemCapability.Graphics.Drawing 5711 5712| Name | Value | Description | Diagram | 5713| ---------- | ---- | ----------------------------------------------------------- | -------- | 5714| FLAT_CAP | 0 | There is no cap style. Both ends of the line segment are cut off square.|  | 5715| 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.|  | 5716| 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.|  | 5717 5718## BlurType<sup>12+</sup> 5719 5720Enumerates the blur types of a mask filter. 5721 5722**System capability**: SystemCapability.Graphics.Drawing 5723 5724| Name | Value| Description | Diagram | 5725| ------ | - | ------------------ | -------- | 5726| NORMAL | 0 | Both the outer edges and the inner solid parts are blurred.|  | 5727| SOLID | 1 | The inner solid part remains unchanged, while only the outer edges are blurred.|  | 5728| OUTER | 2 | Only the outer edges are blurred, with the inner solid part being fully transparent.|  | 5729| INNER | 3 | Only the inner solid part is blurred, while the outer edges remain sharp.|  | 5730 5731## SamplingOptions<sup>12+</sup> 5732 5733Implements sampling options. 5734 5735### constructor<sup>12+</sup> 5736 5737constructor() 5738 5739Creates a **SamplingOptions** object. The default value of [FilterMode](#filtermode12) is **FILTER_MODE_NEAREST**. 5740 5741**System capability**: SystemCapability.Graphics.Drawing 5742 5743**Example** 5744 5745```ts 5746import { RenderNode } from '@kit.ArkUI'; 5747import { common2D, drawing } from '@kit.ArkGraphics2D'; 5748 5749class DrawingRenderNode extends RenderNode { 5750 draw(context : DrawContext) { 5751 const canvas = context.canvas; 5752 const pen = new drawing.Pen(); 5753 let samplingOptions = new drawing.SamplingOptions(); 5754 } 5755} 5756``` 5757 5758### constructor<sup>12+</sup> 5759 5760constructor(filterMode: FilterMode) 5761 5762Creates a **SamplingOptions** object. 5763 5764**System capability**: SystemCapability.Graphics.Drawing 5765 5766**Parameters** 5767 5768| Name | Type | Mandatory| Description | 5769| ---------- | --------------------- | ---- | ----------------------------------- | 5770| filterMode | [FilterMode](#filtermode12) | Yes | Filter mode. | 5771 5772**Error codes** 5773 5774For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5775 5776| ID| Error Message| 5777| ------- | --------------------------------------------| 5778| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5779 5780**Example** 5781 5782```ts 5783import { RenderNode } from '@kit.ArkUI'; 5784import { common2D, drawing } from '@kit.ArkGraphics2D'; 5785 5786class DrawingRenderNode extends RenderNode { 5787 draw(context : DrawContext) { 5788 const canvas = context.canvas; 5789 let samplingOptions = new drawing.SamplingOptions(drawing.FilterMode.FILTER_MODE_NEAREST); 5790 } 5791} 5792``` 5793 5794## Lattice<sup>12+</sup> 5795 5796Implements a lattice object, which is used to divide an image by lattice. 5797 5798### createImageLattice<sup>12+</sup> 5799 5800static 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 5801 5802Divides 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. 5803 5804**System capability**: SystemCapability.Graphics.Drawing 5805 5806**Parameters** 5807 5808| Name | Type | Mandatory| Description | 5809| ------------ | ------------------------------------------------------------------ | ---- | --------------------------------------------------------------------------------- | 5810| xDivs | Array\<number> | Yes | Array of X coordinates used to divide the image. The value is an integer. | 5811| yDivs | Array\<number> | Yes | Array of Y coordinates used to divide the image. The value is an integer. | 5812| fXCount | number | Yes | Size of the array that holds the X coordinates. The value range is [0, 5]. | 5813| fYCount | number | Yes | Size of the array that holds the Y coordinates. The value range is [0, 5]. | 5814| 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.| 5815| 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).| 5816| 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).| 5817 5818**Return value** 5819 5820| Type | Description | 5821| ------------------------- | ----------------------------------- | 5822| [Lattice](#lattice12) | **Lattice** object obtained. | 5823 5824**Error codes** 5825 5826For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5827 5828| ID| Error Message| 5829| ------- | --------------------------------------------| 5830| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5831 5832**Example** 5833 5834```ts 5835import { RenderNode } from '@kit.ArkUI'; 5836import { drawing } from '@kit.ArkGraphics2D'; 5837 5838class DrawingRenderNode extends RenderNode { 5839 draw(context : DrawContext) { 5840 let xDivs : Array<number> = [1, 2, 4]; 5841 let yDivs : Array<number> = [1, 2, 4]; 5842 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. 5843 } 5844} 5845``` 5846 5847 5848### createImageLattice<sup>18+</sup> 5849 5850static createImageLattice(xDivs: Array\<number>, yDivs: Array\<number>, fXCount: number, fYCount: number, fBounds?: common2D.Rect | null, fRectTypes?: Array\<RectType> | null, fColors?: Array\<number> | null): Lattice 5851 5852Divides 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. 5853 5854**System capability**: SystemCapability.Graphics.Drawing 5855 5856**Parameters** 5857 5858| Name | Type | Mandatory| Description | 5859| ------------ | ------------------------------------------------------------------ | ---- | --------------------------------------------------------------------------------- | 5860| xDivs | Array\<number> | Yes | Array of X coordinates used to divide the image. The value is an integer. | 5861| yDivs | Array\<number> | Yes | Array of Y coordinates used to divide the image. The value is an integer. | 5862| fXCount | number | Yes | Size of the array that holds the X coordinates. The value range is [0, 5]. | 5863| fYCount | number | Yes | Size of the array that holds the Y coordinates. The value range is [0, 5]. | 5864| 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.| 5865| 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).| 5866| 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).| 5867 5868**Return value** 5869 5870| Type | Description | 5871| ------------------------- | ----------------------------------- | 5872| [Lattice](#lattice12) | **Lattice** object obtained. | 5873 5874**Error codes** 5875 5876For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5877 5878| ID| Error Message| 5879| ------- | --------------------------------------------| 5880| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5881 5882**Example** 5883 5884```ts 5885import { RenderNode } from '@kit.ArkUI'; 5886import { drawing } from '@kit.ArkGraphics2D'; 5887 5888class DrawingRenderNode extends RenderNode { 5889 draw(context : DrawContext) { 5890 let xDivs : Array<number> = [1, 2, 4]; 5891 let yDivs : Array<number> = [1, 2, 4]; 5892 let colorArray :Array<number>=[0xffffffff,0x44444444,0x99999999,0xffffffff,0x44444444,0x99999999,0xffffffff,0x44444444,0x99999999,0x44444444,0x99999999,0xffffffff,0x44444444,0x99999999,0xffffffff,0x44444444]; 5893 let lattice = drawing.Lattice.createImageLattice(xDivs, yDivs, 3, 3,null,null,colorArray); 5894 } 5895} 5896``` 5897 5898## RectType<sup>12+</sup> 5899 5900Enumerates the types of rectangles used to fill the lattices. This enum is used only in [Lattice](#lattice12). 5901 5902**System capability**: SystemCapability.Graphics.Drawing 5903 5904| Name | Value | Description | 5905| ------------ | ---- | --------------------------------------------------------------- | 5906| DEFAULT | 0 | Draws an image into the lattice. | 5907| TRANSPARENT | 1 | Sets the lattice to transparent. | 5908| FIXEDCOLOR | 2 | Draws the colors in the **fColors** array in [Lattice](#lattice12) into the lattice. | 5909 5910## MaskFilter<sup>12+</sup> 5911 5912Implements a mask filter. 5913 5914### createBlurMaskFilter<sup>12+</sup> 5915 5916static createBlurMaskFilter(blurType: BlurType, sigma: number): MaskFilter 5917 5918Creates a mask filter with a blur effect. 5919 5920**System capability**: SystemCapability.Graphics.Drawing 5921 5922**Parameters** 5923 5924| Name | Type | Mandatory| Description | 5925| ---------- | --------------------- | ---- | ----------------------------------- | 5926| blurType | [BlurType](#blurtype12) | Yes | Blur type. | 5927| sigma | number | Yes | Standard deviation of the Gaussian blur to apply. The value must be a floating point number greater than 0.| 5928 5929**Return value** 5930 5931| Type | Description | 5932| ------------------------- | ------------------ | 5933| [MaskFilter](#maskfilter12) | **MaskFilter** object created.| 5934 5935**Error codes** 5936 5937For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5938 5939| ID| Error Message| 5940| ------- | --------------------------------------------| 5941| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5942 5943**Example** 5944 5945```ts 5946import { RenderNode } from '@kit.ArkUI'; 5947import { common2D, drawing } from '@kit.ArkGraphics2D'; 5948 5949class DrawingRenderNode extends RenderNode { 5950 draw(context : DrawContext) { 5951 const canvas = context.canvas; 5952 let maskFilter = drawing.MaskFilter.createBlurMaskFilter(drawing.BlurType.OUTER, 10); 5953 } 5954} 5955``` 5956 5957## PathDashStyle<sup>18+</sup> 5958 5959Enumerates the styles of the dashed path effect. 5960 5961**System capability**: SystemCapability.Graphics.Drawing 5962 5963| Name | Value| Description | 5964| ------ | - | ------------------ | 5965| TRANSLATE | 0 | Translates only, not rotating with the path.| 5966| ROTATE | 1 | Rotates with the path.| 5967| MORPH | 2 | Rotates with the path and stretches or compresses at turns to enhance smoothness.| 5968 5969## PathEffect<sup>12+</sup> 5970 5971Implements a path effect. 5972 5973### createDashPathEffect<sup>12+</sup> 5974 5975static createDashPathEffect(intervals: Array\<number>, phase: number): PathEffect 5976 5977Creates a **PathEffect** object that converts a path into a dotted line. 5978 5979**System capability**: SystemCapability.Graphics.Drawing 5980 5981**Parameters** 5982 5983| Name | Type | Mandatory | Description | 5984| ---------- | ------------- | ------- | -------------------------------------------------- | 5985| 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.| 5986| phase | number | Yes | Offset used during drawing. The value is a floating point number. | 5987 5988**Return value** 5989 5990| Type | Description | 5991| ------------------------- | --------------------- | 5992| [PathEffect](#patheffect12) | **PathEffect** object created.| 5993 5994**Error codes** 5995 5996For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5997 5998| ID| Error Message| 5999| ------- | --------------------------------------------| 6000| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6001 6002**Example** 6003 6004```ts 6005import { RenderNode } from '@kit.ArkUI'; 6006import { common2D, drawing } from '@kit.ArkGraphics2D'; 6007 6008class DrawingRenderNode extends RenderNode { 6009 draw(context : DrawContext) { 6010 const canvas = context.canvas; 6011 let intervals = [10, 5]; 6012 let effect = drawing.PathEffect.createDashPathEffect(intervals, 5); 6013 } 6014} 6015``` 6016 6017### createPathDashEffect<sup>18+</sup> 6018 6019static createPathDashEffect(path: Path, advance: number, phase: number, style: PathDashStyle): PathEffect 6020 6021Creates a dashed path effect based on the shape described by a path. 6022 6023**System capability**: SystemCapability.Graphics.Drawing 6024 6025**Parameters** 6026 6027| Name | Type | Mandatory | Description | 6028| ---------- | ------------- | ------- | -------------------------------------------------- | 6029| path | [Path](#path) | Yes| Path that defines the shape to be used for filling each dash in the pattern.| 6030| advance | number | Yes| Distance between two consecutive dashes. The value is a floating point number greater than 0. Otherwise, an error code is thrown.| 6031| 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**.| 6032| style | [PathDashStyle](#pathdashstyle18) | Yes| Style of the dashed path effect.| 6033 6034**Return value** 6035 6036| Type | Description | 6037| ------------------------- | --------------------- | 6038| [PathEffect](#patheffect12) | **PathEffect** object created.| 6039 6040**Error codes** 6041 6042For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6043 6044| ID| Error Message| 6045| ------- | --------------------------------------------| 6046| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3. Parameter verification failed. | 6047 6048**Example** 6049 6050```ts 6051import { RenderNode } from '@kit.ArkUI'; 6052import { common2D, drawing } from '@kit.ArkGraphics2D'; 6053 6054class DrawingRenderNode extends RenderNode { 6055 draw(context : DrawContext) { 6056 const canvas = context.canvas; 6057 let pen = new drawing.Pen(); 6058 const penColor: common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 } 6059 pen.setColor(penColor); 6060 pen.setStrokeWidth(10); 6061 canvas.attachPen(pen); 6062 pen.setAntiAlias(true); 6063 6064 const path = new drawing.Path(); 6065 path.moveTo(100, 100); 6066 path.lineTo(150, 50); 6067 path.lineTo(200, 100); 6068 6069 const path1 = new drawing.Path(); 6070 path1.moveTo(0, 0); 6071 path1.lineTo(10, 0); 6072 path1.lineTo(20, 10); 6073 path1.lineTo(0,10); 6074 6075 let pathEffect1: drawing.PathEffect = drawing.PathEffect.createPathDashEffect(path1, 50, -30, 6076 drawing.PathDashStyle.MORPH); 6077 pen.setPathEffect(pathEffect1); 6078 6079 canvas.attachPen(pen); 6080 canvas.drawPath(path); 6081 canvas.detachPen(); 6082 } 6083} 6084``` 6085 6086### createSumPathEffect<sup>18+</sup> 6087 6088static createSumPathEffect(firstPathEffect: PathEffect, secondPathEffect: PathEffect): PathEffect 6089 6090Creates 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. 6091 6092**System capability**: SystemCapability.Graphics.Drawing 6093 6094**Parameters** 6095 6096| Name | Type | Mandatory | Description | 6097| ---------- | ------------- | ------- | -------------------------------------------------- | 6098| firstPathEffect | [PathEffect](#patheffect12) | Yes| First path effect.| 6099| secondPathEffect | [PathEffect](#patheffect12) | Yes| Second path effect.| 6100 6101**Return value** 6102 6103| Type | Description | 6104| ------------------------- | --------------------- | 6105| [PathEffect](#patheffect12) | **PathEffect** object created.| 6106 6107**Example** 6108 6109```ts 6110import { RenderNode } from '@kit.ArkUI'; 6111import { drawing } from '@kit.ArkGraphics2D'; 6112 6113class DrawingRenderNode extends RenderNode { 6114 draw(context : DrawContext) { 6115 const canvas = context.canvas; 6116 let intervals = [10, 5]; 6117 let pathEffectOne = drawing.PathEffect.createDashPathEffect(intervals, 5); 6118 let pathEffectTwo = drawing.PathEffect.createDashPathEffect(intervals, 10); 6119 let effect = drawing.PathEffect.createSumPathEffect(pathEffectOne, pathEffectTwo); 6120 } 6121} 6122``` 6123 6124### createCornerPathEffect<sup>12+</sup> 6125 6126static createCornerPathEffect(radius: number): PathEffect 6127 6128Creates a path effect that transforms the sharp angle between line segments into a rounded corner with the specified radius. 6129 6130**System capability**: SystemCapability.Graphics.Drawing 6131 6132**Parameters** 6133 6134| Name | Type | Mandatory | Description | 6135| ---------- | ------------- | ------- | -------------------------------------------------- | 6136| radius | number | Yes | Radius of the rounded corner. The value must be greater than 0. The value is a floating point number. | 6137 6138**Return value** 6139 6140| Type | Description | 6141| ------------------------- | --------------------- | 6142| [PathEffect](#patheffect12) | **PathEffect** object created.| 6143 6144**Error codes** 6145 6146For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6147 6148| ID| Error Message| 6149| ------- | --------------------------------------------| 6150| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6151 6152**Example** 6153 6154```ts 6155import { RenderNode } from '@kit.ArkUI'; 6156import { drawing } from '@kit.ArkGraphics2D'; 6157 6158class DrawingRenderNode extends RenderNode { 6159 draw(context : DrawContext) { 6160 const canvas = context.canvas; 6161 let effect = drawing.PathEffect.createCornerPathEffect(30); 6162 } 6163} 6164``` 6165 6166### createDiscretePathEffect<sup>18+</sup> 6167 6168static createDiscretePathEffect(segLength: number, dev: number, seedAssist?: number): PathEffect 6169 6170Creates an effect that segments the path and scatters the segments in an irregular pattern along the path. 6171 6172**System capability**: SystemCapability.Graphics.Drawing 6173 6174**Parameters** 6175 6176| Name | Type | Mandatory | Description | 6177| ---------- | ------------- | ------- | -------------------------------------------------- | 6178| 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.| 6179| 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.| 6180| 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.| 6181 6182**Return value** 6183 6184| Type | Description | 6185| ------------------------- | --------------------- | 6186| [PathEffect](#patheffect12) | **PathEffect** object created.| 6187 6188**Example** 6189 6190```ts 6191import { RenderNode } from '@kit.ArkUI'; 6192import { drawing } from '@kit.ArkGraphics2D'; 6193 6194class DrawingRenderNode extends RenderNode { 6195 draw(context : DrawContext) { 6196 const canvas = context.canvas; 6197 let effect = drawing.PathEffect.createDiscretePathEffect(100, -50, 0); 6198 } 6199} 6200``` 6201 6202### createComposePathEffect<sup>18+</sup> 6203 6204static createComposePathEffect(outer: PathEffect, inner: PathEffect): PathEffect 6205 6206Creates a path effect by sequentially applying the inner effect and then the outer effect. 6207 6208**System capability**: SystemCapability.Graphics.Drawing 6209 6210**Parameters** 6211 6212| Name| Type | Mandatory| Description | 6213| ------ | --------------------------- | ---- | -------------------------------- | 6214| outer | [PathEffect](#patheffect12) | Yes | Path effect that is applied second, overlaying the first effect.| 6215| inner | [PathEffect](#patheffect12) | Yes | Inner path effect that is applied first.| 6216 6217**Return value** 6218 6219| Type | Description | 6220| ------------------------- | --------------------- | 6221| [PathEffect](#patheffect12) | **PathEffect** object created.| 6222 6223**Example** 6224 6225```ts 6226import { RenderNode } from '@kit.ArkUI'; 6227import { drawing } from '@kit.ArkGraphics2D'; 6228 6229class DrawingRenderNode extends RenderNode { 6230 draw(context : DrawContext) { 6231 const canvas = context.canvas; 6232 let pathEffect1 = drawing.PathEffect.createCornerPathEffect(100); 6233 let pathEffect2 = drawing.PathEffect.createCornerPathEffect(10); 6234 let effect = drawing.PathEffect.createComposePathEffect(pathEffect1, pathEffect2); 6235 } 6236} 6237``` 6238 6239## ShadowLayer<sup>12+</sup> 6240 6241Implements a shadow layer. 6242 6243### create<sup>12+</sup> 6244 6245static create(blurRadius: number, x: number, y: number, color: common2D.Color): ShadowLayer 6246 6247Creates a **ShadowLayer** object. 6248 6249**System capability**: SystemCapability.Graphics.Drawing 6250 6251**Parameters** 6252 6253| Name | Type | Mandatory| Description | 6254| ---------- | -------- | ---- | ----------------------------------- | 6255| blurRadius | number | Yes | Radius of the shadow layer. The value must be a floating point number greater than 0. | 6256| x | number | Yes | Offset on the X axis. The value is a floating point number. | 6257| y | number | Yes | Offset on the Y axis. The value is a floating point number. | 6258| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. The value of each color channel is an integer ranging from 0 to 255.| 6259 6260**Return value** 6261 6262| Type | Description | 6263| --------------------------- | -------------------- | 6264| [ShadowLayer](#shadowlayer12) | **ShadowLayer** object created.| 6265 6266**Error codes** 6267 6268For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6269 6270| ID| Error Message| 6271| ------- | --------------------------------------------| 6272| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6273 6274**Example** 6275 6276```ts 6277import { RenderNode } from '@kit.ArkUI'; 6278import { common2D, drawing } from '@kit.ArkGraphics2D'; 6279 6280class DrawingRenderNode extends RenderNode { 6281 draw(context : DrawContext) { 6282 const canvas = context.canvas; 6283 let color : common2D.Color = {alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00}; 6284 let shadowLayer = drawing.ShadowLayer.create(3, -3, 3, color); 6285 } 6286} 6287``` 6288 6289### create<sup>18+</sup> 6290 6291static create(blurRadius: number, x: number, y: number, color: common2D.Color | number): ShadowLayer 6292 6293Creates a **ShadowLayer** object. 6294 6295**System capability**: SystemCapability.Graphics.Drawing 6296 6297**Parameters** 6298 6299| Name | Type | Mandatory| Description | 6300| ---------- | -------- | ---- | ----------------------------------- | 6301| blurRadius | number | Yes | Radius of the shadow layer. The value must be a floating point number greater than 0. | 6302| x | number | Yes | Offset on the X axis. The value is a floating point number. | 6303| y | number | Yes | Offset on the Y axis. The value is a floating point number. | 6304| color | [common2D.Color](js-apis-graphics-common2D.md#color) \| number | Yes | Color, represented by an unsigned integer in hexadecimal ARGB format. | 6305 6306**Return value** 6307 6308| Type | Description | 6309| --------------------------- | -------------------- | 6310| [ShadowLayer](#shadowlayer12) | **ShadowLayer** object created.| 6311 6312**Error codes** 6313 6314For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6315 6316| ID| Error Message| 6317| ------- | --------------------------------------------| 6318| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6319 6320**Example** 6321 6322```ts 6323import { RenderNode } from '@kit.ArkUI'; 6324import { drawing } from '@kit.ArkGraphics2D'; 6325 6326class DrawingRenderNode extends RenderNode { 6327 draw(context : DrawContext) { 6328 const canvas = context.canvas; 6329 let shadowLayer = drawing.ShadowLayer.create(3, -3, 3, 0xff00ff00); 6330 } 6331} 6332``` 6333 6334## Pen 6335 6336Defines a pen, which is used to describe the style and color to outline a shape. 6337 6338### constructor<sup>12+</sup> 6339 6340constructor() 6341 6342A constructor used to create a **Pen** object. 6343 6344**System capability**: SystemCapability.Graphics.Drawing 6345 6346**Example** 6347 6348```ts 6349import { drawing } from '@kit.ArkGraphics2D'; 6350 6351const pen = new drawing.Pen(); 6352``` 6353 6354### constructor<sup>12+</sup> 6355 6356constructor(pen: Pen) 6357 6358Copies a **Pen** object to create a new one. 6359 6360**System capability**: SystemCapability.Graphics.Drawing 6361 6362**Parameters** 6363 6364| Name| Type | Mandatory| Description | 6365| ------| ----------- | ---- | ---------------- | 6366| pen | [Pen](#pen) | Yes | **Pen** object to copy.| 6367 6368**Error codes** 6369 6370For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6371 6372| ID| Error Message| 6373| ------- | --------------------------------------------| 6374| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6375 6376**Example** 6377 6378```ts 6379import { common2D, drawing } from '@kit.ArkGraphics2D'; 6380 6381const pen = new drawing.Pen(); 6382const penColor: common2D.Color = { alpha: 255, red: 0, green: 255, blue: 0 }; 6383pen.setColor(penColor); 6384pen.setStrokeWidth(10); 6385const newPen = new drawing.Pen(pen); 6386``` 6387 6388### setMiterLimit<sup>12+</sup> 6389 6390setMiterLimit(miter: number): void 6391 6392Sets 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. 6393 6394**System capability**: SystemCapability.Graphics.Drawing 6395 6396**Parameters** 6397 6398| Name| Type | Mandatory| Description | 6399| ------ | ------ | ---- | ---------------- | 6400| 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.| 6401 6402**Error codes** 6403 6404For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6405 6406| ID| Error Message| 6407| ------- | --------------------------------------------| 6408| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6409 6410**Example** 6411 6412```ts 6413import { drawing } from '@kit.ArkGraphics2D'; 6414 6415const pen = new drawing.Pen(); 6416pen.setMiterLimit(5); 6417``` 6418 6419### getMiterLimit<sup>12+</sup> 6420 6421getMiterLimit(): number 6422 6423Obtains the maximum ratio allowed between the sharp corner length of a polyline and its line width. 6424 6425**System capability**: SystemCapability.Graphics.Drawing 6426 6427**Return value** 6428 6429| Type | Description | 6430| -------| -------------------- | 6431| number | Maximum ratio obtained.| 6432 6433**Example** 6434 6435```ts 6436import { drawing } from '@kit.ArkGraphics2D'; 6437 6438const pen = new drawing.Pen(); 6439let miter = pen.getMiterLimit(); 6440``` 6441 6442### setImageFilter<sup>12+</sup> 6443 6444setImageFilter(filter: ImageFilter | null): void 6445 6446Sets an image filter for this pen. 6447 6448**System capability**: SystemCapability.Graphics.Drawing 6449 6450**Parameters** 6451 6452| Name| Type | Mandatory| Description | 6453| ------ | ------ | ---- | ----------------------- | 6454| filter | [ImageFilter](#imagefilter12) \| null | Yes | Image filter. If null is passed in, the image filter effect of the pen will be cleared.| 6455 6456**Error codes** 6457 6458For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6459 6460| ID| Error Message| 6461| ------- | --------------------------------------------| 6462| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types. | 6463 6464**Example** 6465 6466```ts 6467import {drawing} from '@kit.ArkGraphics2D'; 6468 6469let colorfilter = drawing.ColorFilter.createSRGBGammaToLinear(); 6470let imgFilter = drawing.ImageFilter.createFromColorFilter(colorfilter); 6471let pen = new drawing.Pen(); 6472pen.setImageFilter(imgFilter); 6473pen.setImageFilter(null); 6474``` 6475 6476### getColorFilter<sup>12+</sup> 6477 6478getColorFilter(): ColorFilter 6479 6480Obtains the color filter of this pen. 6481 6482**System capability**: SystemCapability.Graphics.Drawing 6483 6484**Return value** 6485 6486| Type | Description | 6487| --------------------------- | ------------------ | 6488| [ColorFilter](#colorfilter) | Color filter.| 6489 6490**Example** 6491 6492```ts 6493import {drawing} from '@kit.ArkGraphics2D'; 6494 6495let pen = new drawing.Pen(); 6496let colorfilter = drawing.ColorFilter.createLumaColorFilter(); 6497pen.setColorFilter(colorfilter); 6498let filter = pen.getColorFilter(); 6499``` 6500 6501### setColor 6502 6503setColor(color: common2D.Color) : void 6504 6505Sets a color for this pen. 6506 6507**System capability**: SystemCapability.Graphics.Drawing 6508 6509**Parameters** 6510 6511| Name| Type | Mandatory| Description | 6512| ------ | ---------------------------------------------------- | ---- | ---------------- | 6513| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. The value of each color channel is an integer ranging from 0 to 255.| 6514 6515**Error codes** 6516 6517For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6518 6519| ID| Error Message| 6520| ------- | --------------------------------------------| 6521| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6522 6523**Example** 6524 6525```ts 6526import { common2D, drawing } from '@kit.ArkGraphics2D'; 6527 6528const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 6529const pen = new drawing.Pen(); 6530pen.setColor(color); 6531``` 6532 6533### setColor<sup>12+</sup> 6534 6535setColor(alpha: number, red: number, green: number, blue: number): void 6536 6537Sets a color for this pen. This API provides better performance than [setColor](#setcolor) and is recommended. 6538 6539**System capability**: SystemCapability.Graphics.Drawing 6540 6541**Parameters** 6542 6543| Name| Type | Mandatory| Description | 6544| ------ | ------ | ---- | -------------------------------------------------- | 6545| 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.| 6546| 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. | 6547| 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. | 6548| 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. | 6549 6550**Error codes** 6551 6552For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6553 6554| ID| Error Message| 6555| ------- | --------------------------------------------| 6556| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6557 6558**Example** 6559 6560```ts 6561import { drawing } from '@kit.ArkGraphics2D'; 6562 6563const pen = new drawing.Pen(); 6564pen.setColor(255, 255, 0, 0); 6565``` 6566 6567### setColor<sup>18+</sup> 6568 6569setColor(color: number) : void 6570 6571Sets a color for this pen. 6572 6573**System capability**: SystemCapability.Graphics.Drawing 6574 6575**Parameters** 6576 6577| Name| Type | Mandatory| Description | 6578| ------ | ---------------------------------------------------- | ---- | ---------------- | 6579| color | number | Yes | Color in hexadecimal ARGB format.| 6580 6581**Example** 6582 6583```ts 6584import { drawing } from '@kit.ArkGraphics2D'; 6585 6586const pen = new drawing.Pen(); 6587pen.setColor(0xffff0000); 6588``` 6589 6590### getColor<sup>12+</sup> 6591 6592getColor(): common2D.Color 6593 6594Obtains the color of this pen. 6595 6596**System capability**: SystemCapability.Graphics.Drawing 6597 6598**Return value** 6599 6600| Type | Description | 6601| -------------- | -------------- | 6602| common2D.Color | Color of the pen.| 6603 6604**Example** 6605 6606```ts 6607import { common2D, drawing } from '@kit.ArkGraphics2D'; 6608 6609const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 6610const pen = new drawing.Pen(); 6611pen.setColor(color); 6612let colorGet = pen.getColor(); 6613``` 6614 6615### getHexColor<sup>18+</sup> 6616 6617getHexColor(): number 6618 6619Obtains the color of this pen. 6620 6621**System capability**: SystemCapability.Graphics.Drawing 6622 6623**Return value** 6624 6625| Type | Description | 6626| -------------- | -------------- | 6627| number | Color, represented as a 32-bit unsigned integer in hexadecimal ARGB format.| 6628 6629**Example** 6630 6631```ts 6632import { common2D, drawing } from '@kit.ArkGraphics2D'; 6633 6634let color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 6635let pen = new drawing.Pen(); 6636pen.setColor(color); 6637let hex_color: number = pen.getHexColor(); 6638console.info('getHexColor: ', hex_color.toString(16)); 6639``` 6640 6641### setStrokeWidth 6642 6643setStrokeWidth(width: number) : void 6644 6645Sets 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. 6646 6647**System capability**: SystemCapability.Graphics.Drawing 6648 6649**Parameters** 6650 6651| Name| Type | Mandatory| Description | 6652| ------ | ------ | ---- | ---------------- | 6653| width | number | Yes | Stroke width. The value is a floating point number.| 6654 6655**Error codes** 6656 6657For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6658 6659| ID| Error Message| 6660| ------- | --------------------------------------------| 6661| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6662 6663**Example** 6664 6665```ts 6666import { drawing } from '@kit.ArkGraphics2D'; 6667 6668const pen = new drawing.Pen(); 6669pen.setStrokeWidth(5); 6670``` 6671 6672### getWidth<sup>12+</sup> 6673 6674getWidth(): number 6675 6676Obtains the stroke width of this pen. The width describes the thickness of the outline of a shape. 6677 6678**System capability**: SystemCapability.Graphics.Drawing 6679 6680**Return value** 6681 6682| Type | Description | 6683| ------ | -------------- | 6684| number | Stroke width for the pen, in px.| 6685 6686**Example** 6687 6688```ts 6689import { drawing } from '@kit.ArkGraphics2D'; 6690 6691const pen = new drawing.Pen(); 6692let width = pen.getWidth(); 6693``` 6694 6695### setAntiAlias 6696 6697setAntiAlias(aa: boolean) : void 6698 6699Enables anti-aliasing for this pen. Anti-aliasing makes the edges of the content smoother. If this API is not called, anti-aliasing is disabled by default. 6700 6701**System capability**: SystemCapability.Graphics.Drawing 6702 6703**Parameters** 6704 6705| Name| Type | Mandatory| Description | 6706| ------ | ------- | ---- | ------------------------------------------------- | 6707| aa | boolean | Yes | Whether to enable anti-aliasing. The value **true** means to enable anti-aliasing, and **false** means the opposite.| 6708 6709**Error codes** 6710 6711For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6712 6713| ID| Error Message| 6714| ------- | --------------------------------------------| 6715| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6716 6717**Example** 6718 6719```ts 6720import { drawing } from '@kit.ArkGraphics2D'; 6721 6722const pen = new drawing.Pen(); 6723pen.setAntiAlias(true); 6724``` 6725 6726### isAntiAlias<sup>12+</sup> 6727 6728isAntiAlias(): boolean 6729 6730Checks whether anti-aliasing is enabled for this pen. 6731 6732**System capability**: SystemCapability.Graphics.Drawing 6733 6734**Return value** 6735 6736| Type | Description | 6737| ------- | ------------------------- | 6738| boolean | Check result. The value **true** means that anti-aliasing is enabled, and **false** means the opposite.| 6739 6740**Example** 6741 6742```ts 6743import { drawing } from '@kit.ArkGraphics2D'; 6744 6745const pen = new drawing.Pen(); 6746let isAntiAlias = pen.isAntiAlias(); 6747``` 6748 6749### setAlpha 6750 6751setAlpha(alpha: number) : void 6752 6753Sets an alpha value for this pen. 6754 6755**System capability**: SystemCapability.Graphics.Drawing 6756 6757**Parameters** 6758 6759| Name| Type | Mandatory| Description | 6760| ------ | ------ | ---- | ---------------------------------------- | 6761| 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.| 6762 6763**Error codes** 6764 6765For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6766 6767| ID| Error Message| 6768| ------- | --------------------------------------------| 6769| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6770 6771**Example** 6772 6773```ts 6774import { drawing } from '@kit.ArkGraphics2D'; 6775 6776const pen = new drawing.Pen(); 6777pen.setAlpha(128); 6778``` 6779 6780### getAlpha<sup>12+</sup> 6781 6782getAlpha(): number 6783 6784Obtains the alpha value of this pen. 6785 6786**System capability**: SystemCapability.Graphics.Drawing 6787 6788**Return value** 6789 6790| Type | Description | 6791| ------ | ---------------- | 6792| number | Alpha value of the pen. The return value is an integer ranging from 0 to 255.| 6793 6794**Example** 6795 6796```ts 6797import { drawing } from '@kit.ArkGraphics2D'; 6798 6799const pen = new drawing.Pen(); 6800let alpha = pen.getAlpha(); 6801``` 6802 6803### setColorFilter 6804 6805setColorFilter(filter: ColorFilter) : void 6806 6807Sets a color filter for this pen. 6808 6809**System capability**: SystemCapability.Graphics.Drawing 6810 6811**Parameters** 6812 6813| Name| Type | Mandatory| Description | 6814| ------ | --------------------------- | ---- | ------------ | 6815| filter | [ColorFilter](#colorfilter) | Yes | Color filter. If null is passed in, the color filter is cleared.| 6816 6817**Error codes** 6818 6819For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6820 6821| ID| Error Message| 6822| ------- | --------------------------------------------| 6823| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6824 6825**Example** 6826 6827```ts 6828import { drawing } from '@kit.ArkGraphics2D'; 6829 6830const pen = new drawing.Pen(); 6831let colorFilter = drawing.ColorFilter.createLinearToSRGBGamma(); 6832pen.setColorFilter(colorFilter); 6833``` 6834 6835### setMaskFilter<sup>12+</sup> 6836 6837setMaskFilter(filter: MaskFilter): void 6838 6839Adds a mask filter for this pen. 6840 6841**System capability**: SystemCapability.Graphics.Drawing 6842 6843**Parameters** 6844 6845| Name| Type | Mandatory| Description | 6846| ------ | ------------------------- | ---- | --------- | 6847| filter | [MaskFilter](#maskfilter12) | Yes | Mask filter. If null is passed in, the mask filter is cleared.| 6848 6849**Error codes** 6850 6851For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6852 6853| ID| Error Message| 6854| ------- | --------------------------------------------| 6855| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6856 6857**Example** 6858 6859```ts 6860import { RenderNode } from '@kit.ArkUI'; 6861import { common2D, drawing } from '@kit.ArkGraphics2D'; 6862 6863class DrawingRenderNode extends RenderNode { 6864 draw(context : DrawContext) { 6865 const canvas = context.canvas; 6866 const pen = new drawing.Pen(); 6867 pen.setStrokeWidth(5); 6868 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 6869 let maskFilter = drawing.MaskFilter.createBlurMaskFilter(drawing.BlurType.OUTER, 10); 6870 pen.setMaskFilter(maskFilter); 6871 } 6872} 6873``` 6874 6875### setPathEffect<sup>12+</sup> 6876 6877setPathEffect(effect: PathEffect): void 6878 6879Sets the path effect for this pen. 6880 6881**System capability**: SystemCapability.Graphics.Drawing 6882 6883**Parameters** 6884 6885| Name | Type | Mandatory| Description | 6886| ------- | ------------------------- | ---- | ------------ | 6887| effect | [PathEffect](#patheffect12) | Yes | Path effect. If null is passed in, the path filter is cleared.| 6888 6889**Error codes** 6890 6891For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6892 6893| ID| Error Message| 6894| ------- | --------------------------------------------| 6895| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6896 6897**Example** 6898 6899```ts 6900import { RenderNode } from '@kit.ArkUI'; 6901import { common2D, drawing } from '@kit.ArkGraphics2D'; 6902 6903class DrawingRenderNode extends RenderNode { 6904 draw(context : DrawContext) { 6905 const canvas = context.canvas; 6906 const pen = new drawing.Pen(); 6907 pen.setStrokeWidth(5); 6908 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 6909 let pathEffect = drawing.PathEffect.createDashPathEffect([30, 10], 0); 6910 pen.setPathEffect(pathEffect); 6911 } 6912} 6913``` 6914 6915### setShaderEffect<sup>12+</sup> 6916 6917setShaderEffect(shaderEffect: ShaderEffect): void 6918 6919Sets the shader effect for this pen. 6920 6921**System capability**: SystemCapability.Graphics.Drawing 6922 6923**Parameters** 6924 6925| Name | Type | Mandatory| Description | 6926| ------- | ------------------------- | ---- | ------------ | 6927| shaderEffect | [ShaderEffect](#shadereffect12) | Yes | **ShaderEffect** object. If null is passed in, the shader effect will be cleared.| 6928 6929**Error codes** 6930 6931For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6932 6933| ID| Error Message| 6934| ------- | --------------------------------------------| 6935| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6936 6937**Example** 6938 6939```ts 6940import { drawing } from '@kit.ArkGraphics2D'; 6941 6942const pen = new drawing.Pen(); 6943let shaderEffect = drawing.ShaderEffect.createLinearGradient({x: 100, y: 100}, {x: 300, y: 300}, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 6944pen.setShaderEffect(shaderEffect); 6945``` 6946 6947### setShadowLayer<sup>12+</sup> 6948 6949setShadowLayer(shadowLayer: ShadowLayer): void 6950 6951Sets a shadow layer for this pen. The shadow layer effect takes effect only when text is drawn. 6952 6953**System capability**: SystemCapability.Graphics.Drawing 6954 6955**Parameters** 6956 6957| Name | Type | Mandatory| Description | 6958| ------- | ------------------------- | ---- | --------- | 6959| shadowLayer | [ShadowLayer](#shadowlayer12) | Yes | Shadow layer. If null is passed in, the shadow layer is cleared.| 6960 6961**Error codes** 6962 6963For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6964 6965| ID| Error Message| 6966| ------- | --------------------------------------------| 6967| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6968 6969**Example** 6970 6971```ts 6972import { RenderNode } from '@kit.ArkUI'; 6973import { common2D, drawing } from '@kit.ArkGraphics2D'; 6974 6975class DrawingRenderNode extends RenderNode { 6976 draw(context : DrawContext) { 6977 const canvas = context.canvas; 6978 let font = new drawing.Font(); 6979 font.setSize(60); 6980 let textBlob = drawing.TextBlob.makeFromString("hello", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 6981 let pen = new drawing.Pen(); 6982 pen.setStrokeWidth(2.0); 6983 let pen_color : common2D.Color = {alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00}; 6984 pen.setColor(pen_color); 6985 canvas.attachPen(pen); 6986 canvas.drawTextBlob(textBlob, 100, 100); 6987 canvas.detachPen(); 6988 let color : common2D.Color = {alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00}; 6989 let shadowLayer = drawing.ShadowLayer.create(3, -3, 3, color); 6990 pen.setShadowLayer(shadowLayer); 6991 canvas.attachPen(pen); 6992 canvas.drawTextBlob(textBlob, 100, 200); 6993 canvas.detachPen(); 6994 } 6995} 6996``` 6997 6998### setBlendMode 6999 7000setBlendMode(mode: BlendMode) : void 7001 7002Sets a blend mode for this pen. 7003 7004**System capability**: SystemCapability.Graphics.Drawing 7005 7006**Parameters** 7007 7008| Name| Type | Mandatory| Description | 7009| ------ | ----------------------- | ---- | ---------------- | 7010| mode | [BlendMode](#blendmode) | Yes | Blend mode.| 7011 7012**Error codes** 7013 7014For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7015 7016| ID| Error Message| 7017| ------- | --------------------------------------------| 7018| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7019 7020**Example** 7021 7022```ts 7023import { drawing } from '@kit.ArkGraphics2D'; 7024 7025const pen = new drawing.Pen(); 7026pen.setBlendMode(drawing.BlendMode.SRC); 7027``` 7028 7029### setJoinStyle<sup>12+</sup> 7030 7031setJoinStyle(style: JoinStyle): void 7032 7033Sets the join style for this pen. If this API is not called, the default join style is **MITER_JOIN**. 7034 7035**System capability**: SystemCapability.Graphics.Drawing 7036 7037**Parameters** 7038 7039| Name| Type | Mandatory| Description | 7040| ------ | ----------------------- | ---- | --------------- | 7041| style | [JoinStyle](#joinstyle12) | Yes | Join style. | 7042 7043**Error codes** 7044 7045For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7046 7047| ID| Error Message| 7048| ------- | --------------------------------------------| 7049| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7050 7051**Example** 7052 7053```ts 7054import { RenderNode } from '@kit.ArkUI'; 7055import { common2D, drawing } from '@kit.ArkGraphics2D'; 7056 7057class DrawingRenderNode extends RenderNode { 7058 draw(context : DrawContext) { 7059 const canvas = context.canvas; 7060 const pen = new drawing.Pen(); 7061 pen.setStrokeWidth(5); 7062 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 7063 pen.setJoinStyle(drawing.JoinStyle.ROUND_JOIN); 7064 } 7065} 7066``` 7067 7068### getJoinStyle<sup>12+</sup> 7069 7070getJoinStyle(): JoinStyle 7071 7072Obtains the join style of this pen. 7073 7074**System capability**: SystemCapability.Graphics.Drawing 7075 7076**Return value** 7077 7078| Type | Description | 7079| ------------- | ---------------------- | 7080| JoinStyle | Join style. | 7081 7082**Example** 7083 7084```ts 7085import { RenderNode } from '@kit.ArkUI'; 7086import { common2D, drawing } from '@kit.ArkGraphics2D'; 7087 7088class DrawingRenderNode extends RenderNode { 7089 draw(context : DrawContext) { 7090 const canvas = context.canvas; 7091 const pen = new drawing.Pen(); 7092 pen.setStrokeWidth(5); 7093 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 7094 pen.setJoinStyle(drawing.JoinStyle.ROUND_JOIN); 7095 let joinStyle = pen.getJoinStyle(); 7096 } 7097} 7098``` 7099 7100### setCapStyle<sup>12+</sup> 7101 7102setCapStyle(style: CapStyle): void 7103 7104Sets the cap style for this pen. If this API is not called, the default cap style is **FLAT_CAP**. 7105 7106**System capability**: SystemCapability.Graphics.Drawing 7107 7108**Parameters** 7109 7110| Name| Type | Mandatory| Description | 7111| ------ | ----------------------- | ---- | --------------------- | 7112| style | [CapStyle](#capstyle12) | Yes | Cap style. | 7113 7114**Error codes** 7115 7116For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7117 7118| ID| Error Message| 7119| ------- | --------------------------------------------| 7120| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7121 7122**Example** 7123 7124```ts 7125import { RenderNode } from '@kit.ArkUI'; 7126import { common2D, drawing } from '@kit.ArkGraphics2D'; 7127 7128class DrawingRenderNode extends RenderNode { 7129 draw(context : DrawContext) { 7130 const canvas = context.canvas; 7131 const pen = new drawing.Pen(); 7132 pen.setStrokeWidth(5); 7133 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 7134 pen.setCapStyle(drawing.CapStyle.SQUARE_CAP); 7135 } 7136} 7137``` 7138 7139### getCapStyle<sup>12+</sup> 7140 7141getCapStyle(): CapStyle 7142 7143Obtains the cap style of this pen. 7144 7145**System capability**: SystemCapability.Graphics.Drawing 7146 7147**Return value** 7148 7149| Type | Description | 7150| ------------ | ------------------ | 7151| CapStyle | Cap style.| 7152 7153**Example** 7154 7155```ts 7156import { RenderNode } from '@kit.ArkUI'; 7157import { common2D, drawing } from '@kit.ArkGraphics2D'; 7158 7159class DrawingRenderNode extends RenderNode { 7160 draw(context : DrawContext) { 7161 const canvas = context.canvas; 7162 const pen = new drawing.Pen(); 7163 pen.setStrokeWidth(5); 7164 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 7165 pen.setCapStyle(drawing.CapStyle.SQUARE_CAP); 7166 let capStyle = pen.getCapStyle(); 7167 } 7168} 7169``` 7170 7171### setDither 7172 7173setDither(dither: boolean) : void 7174 7175Enables dithering for this pen. Dithering make the drawn color more realistic. 7176 7177**System capability**: SystemCapability.Graphics.Drawing 7178 7179**Parameters** 7180 7181| Name| Type | Mandatory| Description | 7182| ------ | ------- | ---- | --------------------------------------------------------- | 7183| dither | boolean | Yes | Whether to enable dithering. The value **true** means to enable dithering, and **false** means the opposite.| 7184 7185**Error codes** 7186 7187For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7188 7189| ID| Error Message| 7190| ------- | --------------------------------------------| 7191| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7192 7193**Example** 7194 7195```ts 7196import { drawing } from '@kit.ArkGraphics2D'; 7197 7198const pen = new drawing.Pen(); 7199pen.setDither(true); 7200``` 7201 7202### getFillPath<sup>12+</sup> 7203 7204getFillPath(src: Path, dst: Path): boolean 7205 7206Obtains the source path outline drawn using this pen and represents it using a destination path. 7207 7208**System capability**: SystemCapability.Graphics.Drawing 7209 7210**Parameters** 7211 7212| Name | Type | Mandatory| Description | 7213| -------- | -------------------------------------------- | ---- | ------------------------------- | 7214| src | [Path](#path) | Yes | Source path. | 7215| dst | [Path](#path) | Yes | Destination path.| 7216 7217**Return value** 7218 7219| Type | Description | 7220| --------------------- | -------------- | 7221| boolean | Check result. The value **true** means that the source path outline is obtained, and **false** means the opposite.| 7222 7223**Error codes** 7224 7225For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7226 7227| ID| Error Message| 7228| ------- | --------------------------------------------| 7229| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7230 7231**Example** 7232 7233```ts 7234import { drawing } from '@kit.ArkGraphics2D'; 7235 7236let pen = new drawing.Pen(); 7237let pathSrc: drawing.Path = new drawing.Path(); 7238let pathDst: drawing.Path = new drawing.Path(); 7239pathSrc.moveTo(0, 0); 7240pathSrc.lineTo(700, 700); 7241let value = pen.getFillPath(pathSrc, pathDst); 7242``` 7243 7244### reset<sup>12+</sup> 7245 7246reset(): void 7247 7248Resets this pen to the initial state. 7249 7250**System capability**: SystemCapability.Graphics.Drawing 7251 7252**Example** 7253 7254```ts 7255import { drawing } from '@kit.ArkGraphics2D'; 7256 7257const pen = new drawing.Pen(); 7258pen.reset(); 7259``` 7260 7261## Brush 7262 7263Defines a brush, which is used to describe the style and color to fill in a shape. 7264 7265### constructor<sup>12+</sup> 7266 7267constructor() 7268 7269A constructor used to create a **Brush** object. 7270 7271**System capability**: SystemCapability.Graphics.Drawing 7272 7273**Example** 7274 7275```ts 7276import { drawing } from '@kit.ArkGraphics2D'; 7277 7278const brush = new drawing.Brush(); 7279``` 7280 7281### constructor<sup>12+</sup> 7282 7283constructor(brush: Brush) 7284 7285Copies a **Brush** object to create a new one. 7286 7287**System capability**: SystemCapability.Graphics.Drawing 7288 7289**Parameters** 7290 7291| Name| Type | Mandatory| Description | 7292| ------| ----------- | ---- | ---------------- | 7293| brush | [Brush](#brush) | Yes | **Brush** object to copy.| 7294 7295**Error codes** 7296 7297For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7298 7299| ID| Error Message| 7300| ------- | --------------------------------------------| 7301| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7302 7303**Example** 7304 7305```ts 7306import { common2D, drawing } from '@kit.ArkGraphics2D'; 7307 7308const brush = new drawing.Brush(); 7309const brushColor: common2D.Color = { alpha: 255, red: 0, green: 255, blue: 0 }; 7310brush.setColor(brushColor); 7311const newBrush = new drawing.Brush(brush); 7312``` 7313 7314### setColor 7315 7316setColor(color: common2D.Color) : void 7317 7318Sets a color for this brush. 7319 7320**System capability**: SystemCapability.Graphics.Drawing 7321 7322**Parameters** 7323 7324| Name| Type | Mandatory| Description | 7325| ------ | ---------------------------------------------------- | ---- | ---------------- | 7326| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. The value of each color channel is an integer ranging from 0 to 255.| 7327 7328**Error codes** 7329 7330For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7331 7332| ID| Error Message| 7333| ------- | --------------------------------------------| 7334| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7335 7336**Example** 7337 7338```ts 7339import { common2D, drawing } from '@kit.ArkGraphics2D'; 7340 7341const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 7342const brush = new drawing.Brush(); 7343brush.setColor(color); 7344``` 7345 7346### setColor<sup>12+</sup> 7347 7348setColor(alpha: number, red: number, green: number, blue: number): void 7349 7350Sets a color for this brush. This API provides better performance than [setColor](#setcolor-1) and is recommended. 7351 7352**System capability**: SystemCapability.Graphics.Drawing 7353 7354**Parameters** 7355 7356| Name| Type | Mandatory| Description | 7357| ------ | ------ | ---- | -------------------------------------------------- | 7358| 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.| 7359| 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. | 7360| 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. | 7361| 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. | 7362 7363**Error codes** 7364 7365For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7366 7367| ID| Error Message| 7368| ------- | --------------------------------------------| 7369| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7370 7371**Example** 7372 7373```ts 7374import { drawing } from '@kit.ArkGraphics2D'; 7375 7376const brush = new drawing.Brush(); 7377brush.setColor(255, 255, 0, 0); 7378``` 7379 7380### setColor<sup>18+</sup> 7381 7382setColor(color: number) : void 7383 7384Sets a color for this brush. 7385 7386**System capability**: SystemCapability.Graphics.Drawing 7387 7388**Parameters** 7389 7390| Name| Type | Mandatory| Description | 7391| ------ | ---------------------------------------------------- | ---- | ---------------- | 7392| color | number | Yes | Color in hexadecimal ARGB format.| 7393 7394**Error codes** 7395 7396For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7397 7398| ID| Error Message| 7399| ------- | --------------------------------------------| 7400| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7401 7402**Example** 7403 7404```ts 7405import { drawing } from '@kit.ArkGraphics2D'; 7406 7407const brush = new drawing.Brush(); 7408brush.setColor(0xffff0000); 7409``` 7410 7411### getColor<sup>12+</sup> 7412 7413getColor(): common2D.Color 7414 7415Obtains the color of this brush. 7416 7417**System capability**: SystemCapability.Graphics.Drawing 7418 7419**Return value** 7420 7421| Type | Description | 7422| -------------- | -------------- | 7423| common2D.Color | Color of the brush.| 7424 7425**Example** 7426 7427```ts 7428import { common2D, drawing } from '@kit.ArkGraphics2D'; 7429 7430const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 7431const brush = new drawing.Brush(); 7432brush.setColor(color); 7433let colorGet = brush.getColor(); 7434``` 7435 7436### getHexColor<sup>18+</sup> 7437 7438getHexColor(): number 7439 7440Obtains the color of this brush. 7441 7442**System capability**: SystemCapability.Graphics.Drawing 7443 7444**Return value** 7445 7446| Type | Description | 7447| -------------- | -------------- | 7448| number | Color, represented as a 32-bit unsigned integer in hexadecimal ARGB format.| 7449 7450**Example** 7451 7452```ts 7453import { common2D, drawing } from '@kit.ArkGraphics2D'; 7454 7455let color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 7456let brush = new drawing.Brush(); 7457brush.setColor(color); 7458let hex_color: number = brush.getHexColor(); 7459console.info('getHexColor: ', hex_color.toString(16)); 7460``` 7461 7462### setAntiAlias 7463 7464setAntiAlias(aa: boolean) : void 7465 7466Enables anti-aliasing for this brush. Anti-aliasing makes the edges of the content smoother. If this API is not called, anti-aliasing is disabled by default. 7467 7468**System capability**: SystemCapability.Graphics.Drawing 7469 7470**Parameters** 7471 7472| Name| Type | Mandatory| Description | 7473| ------ | ------- | ---- | ------------------------------------------------- | 7474| aa | boolean | Yes | Whether to enable anti-aliasing. The value **true** means to enable anti-aliasing, and **false** means the opposite.| 7475 7476**Error codes** 7477 7478For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7479 7480| ID| Error Message| 7481| ------- | --------------------------------------------| 7482| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7483 7484**Example** 7485 7486```ts 7487import { drawing } from '@kit.ArkGraphics2D'; 7488 7489const brush = new drawing.Brush(); 7490brush.setAntiAlias(true); 7491``` 7492 7493### isAntiAlias<sup>12+</sup> 7494 7495isAntiAlias(): boolean 7496 7497Checks whether anti-aliasing is enabled for this brush. 7498 7499**System capability**: SystemCapability.Graphics.Drawing 7500 7501**Return value** 7502 7503| Type | Description | 7504| ------- | ------------------------- | 7505| boolean | Check result. The value **true** means that anti-aliasing is enabled, and **false** means the opposite.| 7506 7507**Example** 7508 7509```ts 7510import { drawing } from '@kit.ArkGraphics2D'; 7511 7512const brush = new drawing.Brush(); 7513let isAntiAlias = brush.isAntiAlias(); 7514``` 7515 7516### setAlpha 7517 7518setAlpha(alpha: number) : void 7519 7520Sets an alpha value for this brush. 7521 7522**System capability**: SystemCapability.Graphics.Drawing 7523 7524**Parameters** 7525 7526| Name| Type | Mandatory| Description | 7527| ------ | ------ | ---- | ---------------------------------------- | 7528| 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.| 7529 7530**Error codes** 7531 7532For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7533 7534| ID| Error Message| 7535| ------- | --------------------------------------------| 7536| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7537 7538**Example** 7539 7540```ts 7541import { drawing } from '@kit.ArkGraphics2D'; 7542 7543const brush = new drawing.Brush(); 7544brush.setAlpha(128); 7545``` 7546 7547### getAlpha<sup>12+</sup> 7548 7549getAlpha(): number 7550 7551Obtains the alpha value of this brush. 7552 7553**System capability**: SystemCapability.Graphics.Drawing 7554 7555**Return value** 7556 7557| Type | Description | 7558| ------ | ---------------- | 7559| number | Alpha value of the brush. The return value is an integer ranging from 0 to 255.| 7560 7561**Example** 7562 7563```ts 7564import { drawing } from '@kit.ArkGraphics2D'; 7565 7566const brush = new drawing.Brush(); 7567let alpha = brush.getAlpha(); 7568``` 7569 7570### setColorFilter 7571 7572setColorFilter(filter: ColorFilter) : void 7573 7574Sets a color filter for this brush. 7575 7576**System capability**: SystemCapability.Graphics.Drawing 7577 7578**Parameters** 7579 7580| Name| Type | Mandatory| Description | 7581| ------ | --------------------------- | ---- | ------------ | 7582| filter | [ColorFilter](#colorfilter) | Yes | Color filter. If null is passed in, the color filter is cleared.| 7583 7584**Error codes** 7585 7586For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7587 7588| ID| Error Message| 7589| ------- | --------------------------------------------| 7590| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7591 7592**Example** 7593 7594```ts 7595import { drawing } from '@kit.ArkGraphics2D'; 7596 7597const brush = new drawing.Brush(); 7598let colorFilter = drawing.ColorFilter.createLinearToSRGBGamma(); 7599brush.setColorFilter(colorFilter); 7600``` 7601 7602### setMaskFilter<sup>12+</sup> 7603 7604setMaskFilter(filter: MaskFilter): void 7605 7606Adds a mask filter for this brush. 7607 7608**System capability**: SystemCapability.Graphics.Drawing 7609 7610**Parameters** 7611 7612| Name| Type | Mandatory| Description | 7613| ------ | ------------------------- | ---- | --------- | 7614| filter | [MaskFilter](#maskfilter12) | Yes | Mask filter. If null is passed in, the mask filter is cleared.| 7615 7616**Error codes** 7617 7618For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7619 7620| ID| Error Message| 7621| ------- | --------------------------------------------| 7622| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7623 7624**Example** 7625 7626```ts 7627import { RenderNode } from '@kit.ArkUI'; 7628import { common2D, drawing } from '@kit.ArkGraphics2D'; 7629 7630class DrawingRenderNode extends RenderNode { 7631 draw(context : DrawContext) { 7632 const canvas = context.canvas; 7633 const brush = new drawing.Brush(); 7634 let maskFilter = drawing.MaskFilter.createBlurMaskFilter(drawing.BlurType.OUTER, 10); 7635 brush.setMaskFilter(maskFilter); 7636 } 7637} 7638``` 7639 7640### setShaderEffect<sup>12+</sup> 7641 7642setShaderEffect(shaderEffect: ShaderEffect): void 7643 7644Sets the shader effect for this brush. 7645 7646**System capability**: SystemCapability.Graphics.Drawing 7647 7648**Parameters** 7649 7650| Name | Type | Mandatory| Description | 7651| ------- | ------------------------- | ---- | ------------ | 7652| shaderEffect | [ShaderEffect](#shadereffect12) | Yes | **ShaderEffect** object. If null is passed in, the shader effect will be cleared.| 7653 7654**Error codes** 7655 7656For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7657 7658| ID| Error Message| 7659| ------- | --------------------------------------------| 7660| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7661 7662**Example** 7663 7664```ts 7665import { drawing } from '@kit.ArkGraphics2D'; 7666 7667const brush = new drawing.Brush(); 7668let shaderEffect = drawing.ShaderEffect.createLinearGradient({x: 100, y: 100}, {x: 300, y: 300}, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 7669brush.setShaderEffect(shaderEffect); 7670``` 7671 7672### setShadowLayer<sup>12+</sup> 7673 7674setShadowLayer(shadowLayer: ShadowLayer): void 7675 7676Sets a shadow layer for this brush. The shadow layer effect takes effect only when text is drawn. 7677 7678**System capability**: SystemCapability.Graphics.Drawing 7679 7680**Parameters** 7681 7682| Name | Type | Mandatory| Description | 7683| ------- | ------------------------- | ---- | --------- | 7684| shadowLayer | [ShadowLayer](#shadowlayer12) | Yes | Shadow layer. If null is passed in, the shadow layer is cleared.| 7685 7686**Error codes** 7687 7688For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7689 7690| ID| Error Message| 7691| ------- | --------------------------------------------| 7692| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7693 7694**Example** 7695 7696```ts 7697import { RenderNode } from '@kit.ArkUI'; 7698import { common2D, drawing } from '@kit.ArkGraphics2D'; 7699 7700class DrawingRenderNode extends RenderNode { 7701 draw(context : DrawContext) { 7702 const canvas = context.canvas; 7703 let font = new drawing.Font(); 7704 font.setSize(60); 7705 7706 let textBlob = drawing.TextBlob.makeFromString("hello", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 7707 let pen = new drawing.Pen(); 7708 pen.setStrokeWidth(2.0); 7709 7710 let pen_color : common2D.Color = {alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00}; 7711 pen.setColor(pen_color); 7712 canvas.attachPen(pen); 7713 canvas.drawTextBlob(textBlob, 100, 100); 7714 canvas.detachPen(); 7715 7716 let color : common2D.Color = {alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00}; 7717 let shadowLayer = drawing.ShadowLayer.create(3, -3, 3, color); 7718 pen.setShadowLayer(shadowLayer); 7719 canvas.attachPen(pen); 7720 canvas.drawTextBlob(textBlob, 100, 200); 7721 canvas.detachPen(); 7722 7723 let brush = new drawing.Brush(); 7724 let brush_color : common2D.Color = {alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00}; 7725 brush.setColor(brush_color); 7726 canvas.attachBrush(brush); 7727 canvas.drawTextBlob(textBlob, 300, 100); 7728 canvas.detachBrush(); 7729 7730 brush.setShadowLayer(shadowLayer); 7731 canvas.attachBrush(brush); 7732 canvas.drawTextBlob(textBlob, 300, 200); 7733 canvas.detachBrush(); 7734 } 7735} 7736``` 7737 7738### setBlendMode 7739 7740setBlendMode(mode: BlendMode) : void 7741 7742Sets a blend mode for this brush. If this API is not called, the default blend mode is **SRC_OVER**. 7743 7744**System capability**: SystemCapability.Graphics.Drawing 7745 7746**Parameters** 7747 7748| Name| Type | Mandatory| Description | 7749| ------ | ----------------------- | ---- | ---------------- | 7750| mode | [BlendMode](#blendmode) | Yes | Blend mode.| 7751 7752**Error codes** 7753 7754For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7755 7756| ID| Error Message| 7757| ------- | --------------------------------------------| 7758| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7759 7760**Example** 7761 7762```ts 7763import { drawing } from '@kit.ArkGraphics2D'; 7764 7765const brush = new drawing.Brush(); 7766brush.setBlendMode(drawing.BlendMode.SRC); 7767``` 7768 7769### setImageFilter<sup>12+</sup> 7770 7771setImageFilter(filter: ImageFilter | null): void 7772 7773Sets an image filter for this brush. 7774 7775**System capability**: SystemCapability.Graphics.Drawing 7776 7777**Parameters** 7778 7779| Name| Type | Mandatory| Description | 7780| ------ | ------ | ---- | ----------------------- | 7781| filter | [ImageFilter](#imagefilter12) \| null | Yes | Image filter. If null is passed in, the image filter effect of the brush will be cleared.| 7782 7783**Error codes** 7784 7785For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7786 7787| ID| Error Message| 7788| ------- | --------------------------------------------| 7789| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types. | 7790 7791**Example** 7792 7793```ts 7794import {drawing} from '@kit.ArkGraphics2D'; 7795 7796let brush = new drawing.Brush(); 7797let imgFilter = drawing.ImageFilter.createBlurImageFilter(5, 10, drawing.TileMode.DECAL); 7798brush.setImageFilter(imgFilter); 7799brush.setImageFilter(null); 7800``` 7801 7802### getColorFilter<sup>12+</sup> 7803 7804getColorFilter(): ColorFilter 7805 7806Obtains the color filter of this brush. 7807 7808**System capability**: SystemCapability.Graphics.Drawing 7809 7810**Return value** 7811 7812| Type | Description | 7813| --------------------------- | ------------------ | 7814| [ColorFilter](#colorfilter) | Color filter.| 7815 7816**Example** 7817 7818```ts 7819import {drawing} from '@kit.ArkGraphics2D'; 7820 7821let brush = new drawing.Brush(); 7822let setColorFilter = drawing.ColorFilter.createSRGBGammaToLinear(); 7823brush.setColorFilter(setColorFilter); 7824let filter = brush.getColorFilter(); 7825``` 7826 7827### reset<sup>12+</sup> 7828 7829reset(): void 7830 7831Resets this brush to the initial state. 7832 7833**System capability**: SystemCapability.Graphics.Drawing 7834 7835**Example** 7836 7837```ts 7838import { drawing } from '@kit.ArkGraphics2D'; 7839 7840const brush = new drawing.Brush(); 7841brush.reset(); 7842``` 7843 7844## ScaleToFit<sup>12+</sup> 7845 7846Enumerates the modes of scaling a source rectangle into a destination rectangle. 7847 7848**System capability**: SystemCapability.Graphics.Drawing 7849 7850| Name | Value | Description | 7851| ---------------------- | ---- | ------------------------------ | 7852| FILL_SCALE_TO_FIT | 0 | Scales the source rectangle to completely fill the destination rectangle, potentially changing the aspect ratio of the source rectangle. | 7853| 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.| 7854| CENTER_SCALE_TO_FIT | 2 | Scales the source rectangle, preserving its aspect ratio, to align it to the center of the destination rectangle. | 7855| 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. | 7856 7857## Matrix<sup>12+</sup> 7858 7859Implements a matrix. 7860 7861A 3 x 3 matrix is shown as below. 7862 7863 7864 7865Elements 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. 7866If (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: 7867 7868 7869 7870### constructor<sup>12+</sup> 7871 7872constructor() 7873 7874Creates a **Matrix** object. 7875 7876**System capability**: SystemCapability.Graphics.Drawing 7877 7878**Example** 7879 7880```ts 7881import { drawing } from '@kit.ArkGraphics2D'; 7882 7883let matrix = new drawing.Matrix(); 7884``` 7885 7886### setRotation<sup>12+</sup> 7887 7888setRotation(degree: number, px: number, py: number): void 7889 7890Sets this matrix as an identity matrix and rotates it by a given degree around the rotation point (px, py). 7891 7892**System capability**: SystemCapability.Graphics.Drawing 7893 7894**Parameters** 7895 7896| Name | Type | Mandatory | Description | 7897| ----------- | ---------------------------------------- | ---- | ------------------- | 7898| 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.| 7899| px | number | Yes | X coordinate of the rotation point. The value is a floating point number. | 7900| py | number | Yes | Y coordinate of the rotation point. The value is a floating point number. | 7901 7902**Error codes** 7903 7904For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7905 7906| ID| Error Message| 7907| ------- | --------------------------------------------| 7908| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7909 7910**Example** 7911 7912```ts 7913import { drawing } from '@kit.ArkGraphics2D'; 7914 7915let matrix = new drawing.Matrix(); 7916matrix.setRotation(90, 100, 100); 7917``` 7918 7919### setScale<sup>12+</sup> 7920 7921setScale(sx: number, sy: number, px: number, py: number): void 7922 7923Sets this matrix as an identity matrix and scales it with the coefficients (sx, sy) at the scale point (px, py). 7924 7925**System capability**: SystemCapability.Graphics.Drawing 7926 7927**Parameters** 7928 7929| Name | Type | Mandatory | Description | 7930| ----------- | ---------------------------------------- | ---- | ------------------- | 7931| 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. | 7932| 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. | 7933| px | number | Yes | X coordinate of the scale point. The value is a floating point number. | 7934| py | number | Yes | Y coordinate of the scale point. The value is a floating point number. | 7935 7936**Error codes** 7937 7938For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7939 7940| ID| Error Message| 7941| ------- | --------------------------------------------| 7942| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7943 7944**Example** 7945 7946```ts 7947import { drawing } from '@kit.ArkGraphics2D'; 7948 7949let matrix = new drawing.Matrix(); 7950matrix.setScale(100, 100, 150, 150); 7951``` 7952 7953### setTranslation<sup>12+</sup> 7954 7955setTranslation(dx: number, dy: number): void 7956 7957Sets this matrix as an identity matrix and translates it by a given distance (dx, dy). 7958 7959**System capability**: SystemCapability.Graphics.Drawing 7960 7961**Parameters** 7962 7963| Name | Type | Mandatory | Description | 7964| ----------- | ---------------------------------------- | ---- | ------------------- | 7965| 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. | 7966| 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. | 7967 7968**Error codes** 7969 7970For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7971 7972| ID| Error Message| 7973| ------- | --------------------------------------------| 7974| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7975 7976**Example** 7977 7978```ts 7979import { drawing } from '@kit.ArkGraphics2D'; 7980 7981let matrix = new drawing.Matrix(); 7982matrix.setTranslation(100, 100); 7983``` 7984 7985### setMatrix<sup>12+</sup> 7986 7987setMatrix(values: Array\<number>): void 7988 7989Sets parameters for this matrix. 7990 7991**System capability**: SystemCapability.Graphics.Drawing 7992 7993**Parameters** 7994 7995| Name| Type | Mandatory| Description | 7996| ------ | ---------------------------------------------------- | ---- | ---------------- | 7997| 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.| 7998 7999**Error codes** 8000 8001For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8002 8003| ID| Error Message| 8004| ------- | --------------------------------------------| 8005| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 8006 8007**Example** 8008 8009```ts 8010import { drawing } from '@kit.ArkGraphics2D'; 8011 8012let matrix = new drawing.Matrix(); 8013let value : Array<number> = [2, 2, 2, 2, 2, 2, 2, 2, 2]; 8014matrix.setMatrix(value); 8015``` 8016 8017### preConcat<sup>12+</sup> 8018 8019preConcat(matrix: Matrix): void 8020 8021Preconcats the existing matrix with the passed-in matrix. 8022 8023**System capability**: SystemCapability.Graphics.Drawing 8024 8025**Parameters** 8026 8027| Name| Type | Mandatory| Description | 8028| ------ | ---------------------------------------------------- | ---- | ---------------- | 8029| matrix | [Matrix](#matrix12) | Yes | **Matrix** object, which is on the right of a multiplication expression.| 8030 8031**Error codes** 8032 8033For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8034 8035| ID| Error Message| 8036| ------- | --------------------------------------------| 8037| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8038 8039**Example** 8040 8041```ts 8042import { drawing } from '@kit.ArkGraphics2D'; 8043 8044let matrix1 = new drawing.Matrix(); 8045matrix1.setMatrix([2, 1, 3, 1, 2, 1, 3, 1, 2]); 8046let matrix2 = new drawing.Matrix(); 8047matrix2.setMatrix([-2, 1, 3, 1, 0, -1, 3, -1, 2]); 8048matrix1.preConcat(matrix2); 8049``` 8050 8051### isEqual<sup>12+</sup> 8052 8053isEqual(matrix: Matrix): Boolean 8054 8055Checks whether this matrix is equal to another matrix. 8056 8057**System capability**: SystemCapability.Graphics.Drawing 8058 8059**Parameters** 8060 8061| Name| Type | Mandatory| Description | 8062| ------ | ---------------------------------------------------- | ---- | ---------------- | 8063| matrix | [Matrix](#matrix12) | Yes | Matrix to compare.| 8064 8065**Return value** 8066 8067| Type | Description | 8068| --------------------------- | -------------------- | 8069| Boolean | Comparison result of the two matrices. The value **true** means that the two matrices are equal, and **false** means the opposite.| 8070 8071**Error codes** 8072 8073For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8074 8075| ID| Error Message| 8076| ------- | --------------------------------------------| 8077| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8078 8079**Example** 8080 8081```ts 8082import { drawing } from '@kit.ArkGraphics2D'; 8083 8084let matrix1 = new drawing.Matrix(); 8085matrix1.setMatrix([2, 1, 3, 1, 2, 1, 3, 1, 2]); 8086let matrix2 = new drawing.Matrix(); 8087matrix2.setMatrix([-2, 1, 3, 1, 0, -1, 3, -1, 2]); 8088if (matrix1.isEqual(matrix2)) { 8089 console.info("matrix1 and matrix2 are equal."); 8090} else { 8091 console.info("matrix1 and matrix2 are not equal."); 8092} 8093``` 8094 8095### invert<sup>12+</sup> 8096 8097invert(matrix: Matrix): Boolean 8098 8099Inverts this matrix and returns the result. 8100 8101**System capability**: SystemCapability.Graphics.Drawing 8102 8103**Parameters** 8104 8105| Name| Type | Mandatory| Description | 8106| ------ | ---------------------------------------------------- | ---- | ---------------- | 8107| matrix | [Matrix](#matrix12) | Yes | **Matrix** object used to store the inverted matrix.| 8108 8109**Return value** 8110 8111| Type | Description | 8112| --------------------------- | -------------------- | 8113| Boolean | Check result. The value **true** means that the matrix is revertible and the **matrix** object is set to its inverse, and **false** means that the matrix is not revertible and the **matrix** object remains unchanged.| 8114 8115**Error codes** 8116 8117For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8118 8119| ID| Error Message| 8120| ------- | --------------------------------------------| 8121| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8122 8123**Example** 8124 8125```ts 8126import { drawing } from '@kit.ArkGraphics2D'; 8127 8128let matrix1 = new drawing.Matrix(); 8129matrix1.setMatrix([2, 1, 3, 1, 2, 1, 3, 1, 2]); 8130let matrix2 = new drawing.Matrix(); 8131matrix2.setMatrix([-2, 1, 3, 1, 0, -1, 3, -1, 2]); 8132if (matrix1.invert(matrix2)) { 8133 console.info("matrix1 is invertible and matrix2 is set as an inverse matrix of the matrix1."); 8134} else { 8135 console.info("matrix1 is not invertible and matrix2 is not changed."); 8136} 8137``` 8138 8139### isIdentity<sup>12+</sup> 8140 8141isIdentity(): Boolean 8142 8143Checks whether this matrix is an identity matrix. 8144 8145**System capability**: SystemCapability.Graphics.Drawing 8146 8147**Return value** 8148 8149| Type | Description | 8150| --------------------------- | -------------------- | 8151| Boolean | Check result. The value **true** means that the matrix is an identity matrix, and **false** means the opposite.| 8152 8153**Example** 8154 8155```ts 8156import { drawing } from '@kit.ArkGraphics2D'; 8157 8158let matrix = new drawing.Matrix(); 8159if (matrix.isIdentity()) { 8160 console.info("matrix is identity."); 8161} else { 8162 console.info("matrix is not identity."); 8163} 8164``` 8165 8166### getValue<sup>12+</sup> 8167 8168getValue(index: number): number 8169 8170Obtains the value of a given index in this matrix. The index ranges from 0 to 8. 8171 8172**System capability**: SystemCapability.Graphics.Drawing 8173 8174**Parameters** 8175 8176| Name | Type | Mandatory| Description | 8177| --------------- | ------- | ---- | ----------------------------------------------------------- | 8178| index | number | Yes | Index. The value is an integer ranging from 0 to 8.| 8179 8180**Return value** 8181 8182| Type | Description | 8183| --------------------- | -------------- | 8184| number | Value obtained, which is an integer.| 8185 8186**Error codes** 8187 8188For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8189 8190| ID| Error Message| 8191| ------- | --------------------------------------------| 8192| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types;3. Parameter verification failed.| 8193 8194**Example** 8195 8196```ts 8197import {drawing} from "@kit.ArkGraphics2D"; 8198 8199let matrix = new drawing.Matrix(); 8200for (let i = 0; i < 9; i++) { 8201 console.info("matrix "+matrix.getValue(i).toString()); 8202} 8203``` 8204 8205### postRotate<sup>12+</sup> 8206 8207postRotate(degree: number, px: number, py: number): void 8208 8209Post 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). 8210 8211**System capability**: SystemCapability.Graphics.Drawing 8212 8213**Parameters** 8214 8215| Name | Type | Mandatory| Description | 8216| --------------- | ------- | ---- | ----------------------------------------------------------- | 8217| 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.| 8218| px | number | Yes | X coordinate of the rotation point. The value is a floating point number.| 8219| py | number | Yes | Y coordinate of the rotation point. The value is a floating point number.| 8220 8221**Error codes** 8222 8223For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8224 8225| ID| Error Message| 8226| ------- | --------------------------------------------| 8227| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8228 8229**Example** 8230 8231```ts 8232import {drawing} from "@kit.ArkGraphics2D"; 8233 8234let matrix = new drawing.Matrix(); 8235let degree: number = 2; 8236let px: number = 3; 8237let py: number = 4; 8238matrix.postRotate(degree, px, py); 8239console.info("matrix= "+matrix.getAll().toString()); 8240``` 8241 8242### postScale<sup>12+</sup> 8243 8244postScale(sx: number, sy: number, px: number, py: number): void 8245 8246Post 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). 8247 8248**System capability**: SystemCapability.Graphics.Drawing 8249 8250**Parameters** 8251 8252| Name | Type | Mandatory| Description | 8253| --------------- | ------- | ---- | ----------------------------------------------------------- | 8254| 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.| 8255| 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.| 8256| px | number | Yes | X coordinate of the scale point. The value is a floating point number.| 8257| py | number | Yes | Y coordinate of the scale point. The value is a floating point number.| 8258 8259**Error codes** 8260 8261For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8262 8263| ID| Error Message| 8264| ------- | --------------------------------------------| 8265| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8266 8267**Example** 8268 8269```ts 8270import {drawing} from "@kit.ArkGraphics2D"; 8271 8272let matrix = new drawing.Matrix(); 8273let sx: number = 2; 8274let sy: number = 0.5; 8275let px: number = 1; 8276let py: number = 1; 8277matrix.postScale(sx, sy, px, py); 8278console.info("matrix= "+matrix.getAll().toString()); 8279``` 8280 8281### postTranslate<sup>12+</sup> 8282 8283postTranslate(dx: number, dy: number): void 8284 8285Post multiplies this matrix by a matrix that is derived from an identity matrix after it has been translated by a given distance (dx, dy). 8286 8287**System capability**: SystemCapability.Graphics.Drawing 8288 8289**Parameters** 8290 8291| Name | Type | Mandatory| Description | 8292| --------------- | ------- | ---- | ----------------------------------------------------------- | 8293| 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.| 8294| 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.| 8295 8296**Error codes** 8297 8298For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8299 8300| ID| Error Message| 8301| ------- | --------------------------------------------| 8302| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8303 8304**Example** 8305 8306```ts 8307import {drawing} from "@kit.ArkGraphics2D"; 8308 8309let matrix = new drawing.Matrix(); 8310let dx: number = 3; 8311let dy: number = 4; 8312matrix.postTranslate(dx, dy); 8313console.info("matrix= "+matrix.getAll().toString()); 8314``` 8315 8316### preRotate<sup>12+</sup> 8317 8318preRotate(degree: number, px: number, py: number): void 8319 8320Premultiplies 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). 8321 8322**System capability**: SystemCapability.Graphics.Drawing 8323 8324**Parameters** 8325 8326| Name | Type | Mandatory| Description | 8327| --------------- | ------- | ---- | ----------------------------------------------------------- | 8328| 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.| 8329| px | number | Yes | X coordinate of the rotation point. The value is a floating point number.| 8330| py | number | Yes | Y coordinate of the rotation point. The value is a floating point number.| 8331 8332**Error codes** 8333 8334For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8335 8336| ID| Error Message| 8337| ------- | --------------------------------------------| 8338| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8339 8340**Example** 8341 8342```ts 8343import {drawing} from "@kit.ArkGraphics2D"; 8344 8345let matrix = new drawing.Matrix(); 8346let degree: number = 2; 8347let px: number = 3; 8348let py: number = 4; 8349matrix.preRotate(degree, px, py); 8350console.info("matrix= "+matrix.getAll().toString()); 8351``` 8352 8353### preScale<sup>12+</sup> 8354 8355preScale(sx: number, sy: number, px: number, py: number): void 8356 8357Premultiplies 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). 8358 8359**System capability**: SystemCapability.Graphics.Drawing 8360 8361**Parameters** 8362 8363| Name | Type | Mandatory| Description | 8364| --------------- | ------- | ---- | ----------------------------------------------------------- | 8365| 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.| 8366| 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.| 8367| px | number | Yes | X coordinate of the scale point. The value is a floating point number.| 8368| py | number | Yes | Y coordinate of the scale point. The value is a floating point number.| 8369 8370**Error codes** 8371 8372For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8373 8374| ID| Error Message| 8375| ------- | --------------------------------------------| 8376| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8377 8378**Example** 8379 8380```ts 8381import {drawing} from "@kit.ArkGraphics2D"; 8382 8383let matrix = new drawing.Matrix(); 8384let sx: number = 2; 8385let sy: number = 0.5; 8386let px: number = 1; 8387let py: number = 1; 8388matrix.preScale(sx, sy, px, py); 8389console.info("matrix"+matrix.getAll().toString()); 8390``` 8391 8392### preTranslate<sup>12+</sup> 8393 8394preTranslate(dx: number, dy: number): void 8395 8396Premultiplies this matrix by a matrix that is derived from an identity matrix after it has been translated by a given distance (dx, dy). 8397 8398**System capability**: SystemCapability.Graphics.Drawing 8399 8400**Parameters** 8401 8402| Name | Type | Mandatory| Description | 8403| --------------- | ------- | ---- | ----------------------------------------------------------- | 8404| 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.| 8405| 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.| 8406 8407**Error codes** 8408 8409For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8410 8411| ID| Error Message| 8412| ------- | --------------------------------------------| 8413| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8414 8415**Example** 8416 8417```ts 8418import {drawing} from "@kit.ArkGraphics2D"; 8419 8420let matrix = new drawing.Matrix(); 8421let dx: number = 3; 8422let dy: number = 4; 8423matrix.preTranslate(dx, dy); 8424console.info("matrix"+matrix.getAll().toString()); 8425``` 8426 8427### reset<sup>12+</sup> 8428 8429reset(): void 8430 8431Resets this matrix to an identity matrix. 8432 8433**System capability**: SystemCapability.Graphics.Drawing 8434 8435**Example** 8436 8437```ts 8438import {drawing} from "@kit.ArkGraphics2D"; 8439 8440let matrix = new drawing.Matrix(); 8441matrix.postScale(2, 3, 4, 5); 8442matrix.reset(); 8443console.info("matrix= "+matrix.getAll().toString()); 8444``` 8445 8446### mapPoints<sup>12+</sup> 8447 8448mapPoints(src: Array\<common2D.Point>): Array\<common2D.Point> 8449 8450Maps a source point array to a destination point array by means of matrix transformation. 8451 8452**System capability**: SystemCapability.Graphics.Drawing 8453 8454**Parameters** 8455 8456| Name | Type | Mandatory| Description | 8457| --------------- | ------- | ---- | ----------------------------------------------------------- | 8458| src | Array\<[common2D.Point](js-apis-graphics-common2D.md#point)> | Yes | Array of source points.| 8459 8460**Return value** 8461 8462| Type | Description | 8463| --------------------- | -------------- | 8464| Array\<[common2D.Point](js-apis-graphics-common2D.md#point)> | Array of points obtained.| 8465 8466**Error codes** 8467 8468For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8469 8470| ID| Error Message| 8471| ------- | --------------------------------------------| 8472| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8473 8474**Example** 8475 8476```ts 8477import {drawing,common2D} from "@kit.ArkGraphics2D"; 8478 8479let src: Array<common2D.Point> = []; 8480src.push({x: 15, y: 20}); 8481src.push({x: 20, y: 15}); 8482src.push({x: 30, y: 10}); 8483let matrix = new drawing.Matrix(); 8484let dst: Array<common2D.Point> = matrix.mapPoints(src); 8485console.info("matrix= src: "+JSON.stringify(src)); 8486console.info("matrix= dst: "+JSON.stringify(dst)); 8487``` 8488 8489### getAll<sup>12+</sup> 8490 8491getAll(): Array\<number> 8492 8493Obtains all element values of this matrix. 8494 8495**System capability**: SystemCapability.Graphics.Drawing 8496 8497**Return value** 8498 8499| Type | Description | 8500| --------------------- | -------------- | 8501| Array\<number> | Array of matrix values obtained. The length is 9. Each value is a floating point number.| 8502 8503**Example** 8504 8505```ts 8506import {drawing} from "@kit.ArkGraphics2D"; 8507 8508let matrix = new drawing.Matrix(); 8509console.info("matrix "+ matrix.getAll()); 8510``` 8511 8512### mapRect<sup>12+</sup> 8513 8514mapRect(dst: common2D.Rect, src: common2D.Rect): boolean 8515 8516Sets 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. 8517 8518 8519 8520**System capability**: SystemCapability.Graphics.Drawing 8521 8522**Parameters** 8523 8524| Name | Type | Mandatory| Description | 8525| --------------- | ------- | ---- | ----------------------------------------------------------- | 8526| dst | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | **Rectangle** object, which is used to store the bounding rectangle.| 8527| src |[common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Source rectangle.| 8528 8529**Return value** 8530 8531| Type | Description | 8532| --------------------- | -------------- | 8533| boolean | Check result. The value **true** means that the shape retains a rectangular form, and **false** means the opposite.| 8534 8535**Error codes** 8536 8537For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8538 8539| ID| Error Message| 8540| ------- | --------------------------------------------| 8541| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8542 8543**Example** 8544 8545```ts 8546import {drawing,common2D} from "@kit.ArkGraphics2D"; 8547 8548let dst: common2D.Rect = { left: 100, top: 20, right: 130, bottom: 60 }; 8549let src: common2D.Rect = { left: 100, top: 80, right: 130, bottom: 120 }; 8550let matrix = new drawing.Matrix(); 8551if (matrix.mapRect(dst, src)) { 8552 console.info("matrix= dst "+JSON.stringify(dst)); 8553} 8554``` 8555 8556### setRectToRect<sup>12+</sup> 8557 8558setRectToRect(src: common2D.Rect, dst: common2D.Rect, scaleToFit: ScaleToFit): boolean 8559 8560Sets this matrix to a transformation matrix that maps a source rectangle to a destination rectangle. 8561 8562**System capability**: SystemCapability.Graphics.Drawing 8563 8564**Parameters** 8565 8566| Name | Type | Mandatory| Description | 8567| --------------- | ------- | ---- | ----------------------------------------------------------- | 8568| src | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Source rectangle.| 8569| dst | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Destination rectangle.| 8570| scaleToFit | [ScaleToFit](#scaletofit12) | Yes | Mapping mode from the source rectangle to the target rectangle.| 8571 8572**Return value** 8573 8574| Type | Description | 8575| --------------------- | -------------- | 8576| boolean | Check result. The value **true** means that the matrix can represent the mapping, and **false** means the opposite. 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.| 8577 8578**Error codes** 8579 8580For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8581 8582| ID| Error Message| 8583| ------- | --------------------------------------------| 8584| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 8585 8586**Example** 8587 8588```ts 8589import {drawing,common2D} from "@kit.ArkGraphics2D"; 8590 8591let src: common2D.Rect = { left: 100, top: 100, right: 300, bottom: 300 }; 8592let dst: common2D.Rect = { left: 200, top: 200, right: 600, bottom: 600 }; 8593let scaleToFit: drawing.ScaleToFit = drawing.ScaleToFit.FILL_SCALE_TO_FIT 8594let matrix = new drawing.Matrix(); 8595if (matrix.setRectToRect(src, dst, scaleToFit)) { 8596 console.info("matrix"+matrix.getAll().toString()); 8597} 8598``` 8599 8600### setPolyToPoly<sup>12+</sup> 8601 8602setPolyToPoly(src: Array\<common2D.Point>, dst: Array\<common2D.Point>, count: number): boolean 8603 8604Sets 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]. 8605 8606**System capability**: SystemCapability.Graphics.Drawing 8607 8608**Parameters** 8609 8610| Name | Type | Mandatory| Description | 8611| --------------- | ------- | ---- | ----------------------------------------------------------- | 8612| 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**.| 8613| 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**.| 8614| count | number | Yes | Number of points in each array. The value is an integer.| 8615 8616**Return value** 8617 8618| Type | Description | 8619| --------------------- | -------------- | 8620| boolean | Check result. The value **true** means that the setting is successful, and **false** means the opposite.| 8621 8622**Error codes** 8623 8624For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8625 8626| ID| Error Message| 8627| ------- | --------------------------------------------| 8628| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8629 8630**Example** 8631 8632```ts 8633import {drawing,common2D} from "@kit.ArkGraphics2D"; 8634 8635let srcPoints: Array<common2D.Point> = [ {x: 10, y: 20}, {x: 200, y: 150} ]; 8636let dstPoints: Array<common2D.Point> = [{ x:0, y: 10 }, { x:300, y: 600 }]; 8637let matrix = new drawing.Matrix(); 8638if (matrix.setPolyToPoly(srcPoints, dstPoints, 2)) { 8639 console.info("matrix"+matrix.getAll().toString()); 8640} 8641``` 8642 8643## RoundRect<sup>12+</sup> 8644 8645Implements a rounded rectangle. 8646 8647### constructor<sup>12+</sup> 8648 8649constructor(rect: common2D.Rect, xRadii: number, yRadii: number) 8650 8651A 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. 8652 8653**System capability**: SystemCapability.Graphics.Drawing 8654 8655**Parameters** 8656 8657| Name | Type | Mandatory | Description | 8658| ----------- | ---------------------------------------- | ---- | ------------------- | 8659| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangle that encloses the rounded rectangle to create. | 8660| xRadii | number | Yes | Radius of the rounded corner on the X axis. The value is a floating point number. A negative number is invalid. | 8661| yRadii | number | Yes | Radius of the rounded corner on the Y axis. The value is a floating point number. A negative number is invalid. | 8662 8663**Error codes** 8664 8665For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8666 8667| ID| Error Message| 8668| ------- | --------------------------------------------| 8669| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8670 8671**Example** 8672 8673```ts 8674import { common2D, drawing } from '@kit.ArkGraphics2D'; 8675 8676let rect: common2D.Rect = {left : 100, top : 100, right : 500, bottom : 300}; 8677let roundRect = new drawing.RoundRect(rect, 50, 50); 8678``` 8679### setCorner<sup>12+</sup> 8680 8681setCorner(pos: CornerPos, x: number, y: number): void 8682 8683Sets the radii of the specified rounded corner in this rounded rectangle. 8684 8685**System capability**: SystemCapability.Graphics.Drawing 8686 8687**Parameters** 8688 8689| Name | Type | Mandatory| Description | 8690| -------- | -------------------------------------------- | ---- | ------------------------------- | 8691| pos | [CornerPos](#cornerpos12) | Yes | Position of the rounded corner. | 8692| x | number | Yes | Radius of the rounded corner on the X axis. The value is a floating point number. A negative number is invalid.| 8693| y | number | Yes | Radius of the rounded corner on the Y axis. The value is a floating point number. A negative number is invalid.| 8694 8695**Error codes** 8696 8697For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8698 8699| ID| Error Message| 8700| ------- | --------------------------------------------| 8701| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 8702 8703**Example** 8704 8705```ts 8706import { drawing } from '@kit.ArkGraphics2D'; 8707 8708let roundRect : drawing.RoundRect = new drawing.RoundRect({left: 0, top: 0, right: 300, bottom: 300}, 50, 50); 8709roundRect.setCorner(drawing.CornerPos.TOP_LEFT_POS, 150, 150); 8710``` 8711 8712### getCorner<sup>12+</sup> 8713 8714getCorner(pos: CornerPos): common2D.Point 8715 8716Obtains the radii of the specified rounded corner in this rounded rectangle. 8717 8718**System capability**: SystemCapability.Graphics.Drawing 8719 8720**Parameters** 8721 8722| Name | Type | Mandatory| Description | 8723| -------- | -------------------------------------------- | ---- | ------------------------------- | 8724| pos | [CornerPos](#cornerpos12) | Yes | Position of the rounded corner. | 8725 8726**Return value** 8727 8728| Type | Description | 8729| --------------------- | -------------- | 8730| [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.| 8731 8732**Error codes** 8733 8734For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8735 8736| ID| Error Message| 8737| ------- | --------------------------------------------| 8738| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 8739 8740**Example** 8741 8742```ts 8743import { drawing } from '@kit.ArkGraphics2D'; 8744 8745let roundRect : drawing.RoundRect = new drawing.RoundRect({left: 0, top: 0, right: 300, bottom: 300}, 50, 50); 8746let cornerRadius = roundRect.getCorner(drawing.CornerPos.BOTTOM_LEFT_POS); 8747console.info("getCorner---"+cornerRadius.x) 8748console.info("getCorner---"+cornerRadius.y) 8749``` 8750 8751### offset<sup>12+</sup> 8752 8753offset(dx: number, dy: number): void 8754 8755Translates this rounded rectangle by an offset along the X axis and Y axis. 8756 8757**System capability**: SystemCapability.Graphics.Drawing 8758 8759**Parameters** 8760 8761| Name | Type | Mandatory| Description | 8762| -------- | -------------------------------------------- | ---- | ------------------------------- | 8763| 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. | 8764| 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. | 8765 8766**Error codes** 8767 8768For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8769 8770| ID| Error Message| 8771| ------- | --------------------------------------------| 8772| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8773 8774**Example** 8775 8776```ts 8777import { drawing } from '@kit.ArkGraphics2D'; 8778 8779let roundRect : drawing.RoundRect = new drawing.RoundRect({left: 0, top: 0, right: 300, bottom: 300}, 50, 50); 8780roundRect.offset(100, 100); 8781``` 8782 8783## Region<sup>12+</sup> 8784 8785Describes a region, which is used to describe the region where the shape can be drawn. 8786 8787### isPointContained<sup>12+</sup> 8788 8789isPointContained(x: number, y: number) : boolean 8790 8791Checks whether a point is contained in this region. 8792 8793**System capability**: SystemCapability.Graphics.Drawing 8794 8795**Parameters** 8796 8797| Name| Type | Mandatory| Description | 8798| ------ | ------ | ---- | ----------------------- | 8799| 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.| 8800| 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.| 8801 8802**Return value** 8803 8804| Type | Description | 8805| ------- | -------------- | 8806| boolean | Check result. The value **true** means that the point is contained, and **false** means the opposite.| 8807 8808**Error codes** 8809 8810For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8811 8812| ID| Error Message| 8813| ------- | --------------------------------------------| 8814| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8815 8816**Example** 8817 8818```ts 8819import { RenderNode } from '@kit.ArkUI'; 8820import { drawing } from '@kit.ArkGraphics2D'; 8821 8822class DrawingRenderNode extends RenderNode { 8823 draw(context : DrawContext) { 8824 const canvas = context.canvas; 8825 const pen = new drawing.Pen(); 8826 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 8827 pen.setStrokeWidth(10); 8828 canvas.attachPen(pen); 8829 let region = new drawing.Region(); 8830 region.setRect(100, 100, 400, 400); 8831 let flag: boolean = false; 8832 flag = region.isPointContained(200,200); 8833 console.info("region isPointContained : " + flag); 8834 canvas.drawPoint(200,200); 8835 canvas.drawRegion(region); 8836 canvas.detachPen(); 8837 } 8838} 8839``` 8840 8841### isRegionContained<sup>12+</sup> 8842 8843isRegionContained(other: Region) : boolean 8844 8845Checks whether another region is contained in this region. 8846 8847**System capability**: SystemCapability.Graphics.Drawing 8848 8849**Parameters** 8850 8851| Name| Type | Mandatory| Description | 8852| ------ | ------ | ---- | ----------------------- | 8853| other | [Region](#region12) | Yes | **Region** object.| 8854 8855**Return value** 8856 8857| Type | Description | 8858| ------- | -------------- | 8859| boolean | Check result. The value **true** means that the other region is contained, and **false** means the opposite.| 8860 8861**Error codes** 8862 8863For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8864 8865| ID| Error Message| 8866| ------- | --------------------------------------------| 8867| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8868 8869**Example** 8870 8871```ts 8872import { RenderNode } from '@kit.ArkUI'; 8873import { drawing } from '@kit.ArkGraphics2D'; 8874 8875class DrawingRenderNode extends RenderNode { 8876 draw(context : DrawContext) { 8877 const canvas = context.canvas; 8878 const pen = new drawing.Pen(); 8879 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 8880 pen.setStrokeWidth(10); 8881 canvas.attachPen(pen); 8882 let region = new drawing.Region(); 8883 let other = new drawing.Region(); 8884 region.setRect(100, 100, 400, 400); 8885 other.setRect(150, 150, 250 ,250); 8886 let flag: boolean = false; 8887 flag = region.isRegionContained(other); 8888 console.info("region isRegionContained : " + flag); 8889 canvas.drawRegion(region); 8890 canvas.drawRegion(other); 8891 canvas.detachPen(); 8892 } 8893} 8894``` 8895 8896### op<sup>12+</sup> 8897 8898op(region: Region, regionOp: RegionOp) : boolean 8899 8900Performs an operation on this region and another region, and stores the resulting region in this **Region** object. 8901 8902**System capability**: SystemCapability.Graphics.Drawing 8903 8904**Parameters** 8905 8906| Name| Type | Mandatory| Description | 8907| ------ | ------ | ---- | ----------------------- | 8908| region | [Region](#region12) | Yes | **Region** object.| 8909| regionOp | [RegionOp](#regionop12) | Yes | Operation mode of the region.| 8910 8911**Return value** 8912 8913| Type | Description | 8914| ------- | -------------- | 8915| boolean | Check result. The value **true** means that the resulting region is stored in the current **Region** object, and **false** means the opposite.| 8916 8917**Error codes** 8918 8919For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8920 8921| ID| Error Message| 8922| ------- | --------------------------------------------| 8923| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8924 8925**Example** 8926 8927```ts 8928import { RenderNode } from '@kit.ArkUI'; 8929import { drawing } from '@kit.ArkGraphics2D'; 8930 8931class DrawingRenderNode extends RenderNode { 8932 draw(context : DrawContext) { 8933 const canvas = context.canvas; 8934 const pen = new drawing.Pen(); 8935 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 8936 pen.setStrokeWidth(10); 8937 canvas.attachPen(pen); 8938 let region = new drawing.Region(); 8939 region.setRect(200, 200, 400, 400); 8940 let othregion = new drawing.Region(); 8941 othregion.setRect(110, 110, 240, 240); 8942 let flag: boolean = false; 8943 flag = region.op(othregion,drawing.RegionOp.REPLACE); 8944 console.info("region op : " + flag); 8945 canvas.drawRegion(region); 8946 canvas.detachPen(); 8947 } 8948} 8949``` 8950 8951### quickReject<sup>12+</sup> 8952 8953quickReject(left: number, top: number, right: number, bottom: number) : boolean 8954 8955Checks 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. 8956 8957**System capability**: SystemCapability.Graphics.Drawing 8958 8959**Parameters** 8960 8961| Name| Type | Mandatory| Description | 8962| ------ | ------ | ---- | ----------------------- | 8963| 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.| 8964| 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.| 8965| 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.| 8966| 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.| 8967 8968**Return value** 8969 8970| Type | Description | 8971| ------- | -------------- | 8972| boolean | Check result. The value **true** means that the two do not intersect, and **false** means the opposite.| 8973 8974**Error codes** 8975 8976For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8977 8978| ID| Error Message| 8979| ------- | --------------------------------------------| 8980| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8981 8982**Example** 8983 8984```ts 8985import { RenderNode } from '@kit.ArkUI'; 8986import { drawing } from '@kit.ArkGraphics2D'; 8987 8988class DrawingRenderNode extends RenderNode { 8989 draw(context : DrawContext) { 8990 const canvas = context.canvas; 8991 const pen = new drawing.Pen(); 8992 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 8993 pen.setStrokeWidth(10); 8994 canvas.attachPen(pen); 8995 let region = new drawing.Region(); 8996 region.setRect(100, 100, 400, 400); 8997 let flag: boolean = false; 8998 flag = region.quickReject(50, 50, 70, 70); 8999 console.info("region quickReject : " + flag); 9000 canvas.drawRegion(region); 9001 canvas.detachPen(); 9002 } 9003} 9004``` 9005 9006### setPath<sup>12+</sup> 9007 9008setPath(path: Path, clip: Region) : boolean 9009 9010Sets a region that matches the outline of a path within the cropping area. 9011 9012**System capability**: SystemCapability.Graphics.Drawing 9013 9014**Parameters** 9015 9016| Name| Type | Mandatory| Description | 9017| ------ | ------ | ---- | ----------------------- | 9018| path | [Path](#path) | Yes | **Path** object.| 9019| clip | [Region](#region12) | Yes | **Region** object.| 9020 9021**Return value** 9022 9023| Type | Description | 9024| ------- | -------------- | 9025| boolean | Result of the setting operation. The value **true** means that the setting is successful, and **false** means the opposite.| 9026 9027**Error codes** 9028 9029For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 9030 9031| ID| Error Message| 9032| ------- | --------------------------------------------| 9033| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9034 9035**Example** 9036 9037```ts 9038import { RenderNode } from '@kit.ArkUI'; 9039import { drawing } from '@kit.ArkGraphics2D'; 9040 9041class DrawingRenderNode extends RenderNode { 9042 draw(context : DrawContext) { 9043 const canvas = context.canvas; 9044 const pen = new drawing.Pen(); 9045 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 9046 pen.setStrokeWidth(10); 9047 canvas.attachPen(pen); 9048 let region = new drawing.Region(); 9049 let path = new drawing.Path(); 9050 region.setRect(100, 100, 400, 400); 9051 path.arcTo(50, 50, 300, 300, 0, 359); 9052 let flag: boolean = false; 9053 flag = region.setPath(path,region); 9054 console.info("region setPath : " + flag); 9055 canvas.drawRegion(region); 9056 canvas.detachPen(); 9057 } 9058} 9059``` 9060 9061### setRect<sup>12+</sup> 9062 9063setRect(left: number, top: number, right: number, bottom: number) : boolean 9064 9065Sets a rectangle. 9066 9067**System capability**: SystemCapability.Graphics.Drawing 9068 9069**Parameters** 9070 9071| Name| Type | Mandatory| Description | 9072| ------ | ------ | ---- | ----------------------- | 9073| 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.| 9074| 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.| 9075| 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.| 9076| 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.| 9077 9078**Return value** 9079 9080| Type | Description | 9081| ------- | -------------- | 9082| boolean | Result of the setting operation. The value **true** means that the setting is successful, and **false** means the opposite.| 9083 9084**Error codes** 9085 9086For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 9087 9088| ID| Error Message| 9089| ------- | --------------------------------------------| 9090| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9091 9092**Example** 9093 9094```ts 9095import { RenderNode } from '@kit.ArkUI'; 9096import { drawing } from '@kit.ArkGraphics2D'; 9097 9098class DrawingRenderNode extends RenderNode { 9099 draw(context : DrawContext) { 9100 const canvas = context.canvas; 9101 const pen = new drawing.Pen(); 9102 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 9103 pen.setStrokeWidth(10); 9104 canvas.attachPen(pen); 9105 let region = new drawing.Region(); 9106 let flag: boolean = false; 9107 flag = region.setRect(50, 50, 300, 300); 9108 console.info("region setRect : " + flag); 9109 canvas.drawRegion(region); 9110 canvas.detachPen(); 9111 } 9112} 9113``` 9114 9115## TileMode<sup>12+</sup> 9116 9117Enumerates the tile modes of the shader effect. 9118 9119**System capability**: SystemCapability.Graphics.Drawing 9120 9121| Name | Value | Description | 9122| ---------------------- | ---- | ------------------------------ | 9123| CLAMP | 0 | Replicates the edge color if the shader effect draws outside of its original boundary.| 9124| REPEAT | 1 | Repeats the shader effect in both horizontal and vertical directions.| 9125| MIRROR | 2 | Repeats the shader effect in both horizontal and vertical directions, alternating mirror images.| 9126| DECAL | 3 | Renders the shader effect only within the original boundary.| 9127 9128## ShaderEffect<sup>12+</sup> 9129 9130Implements 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. 9131 9132### createColorShader<sup>12+</sup> 9133 9134static createColorShader(color: number): ShaderEffect 9135 9136Creates a **ShaderEffect** object with a single color. 9137 9138**System capability**: SystemCapability.Graphics.Drawing 9139 9140**Parameters** 9141 9142| Name| Type | Mandatory| Description | 9143| ------ | -------------------------------------------------- | ---- | -------------- | 9144| color | number | Yes | Color in the ARGB format. The value is a 32-bit unsigned integer.| 9145 9146**Return value** 9147 9148| Type | Description | 9149| ------- | ------------------------- | 9150| [ShaderEffect](#shadereffect12) | **ShaderEffect** object with a single color.| 9151 9152**Error codes** 9153 9154For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 9155 9156| ID| Error Message| 9157| ------- | --------------------------------------------| 9158| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9159 9160**Example** 9161 9162```ts 9163import { drawing } from '@kit.ArkGraphics2D'; 9164 9165let shaderEffect = drawing.ShaderEffect.createColorShader(0xFFFF0000); 9166``` 9167 9168### createLinearGradient<sup>12+</sup> 9169 9170static createLinearGradient(startPt: common2D.Point, endPt: common2D.Point, colors: Array 9171\<number>, mode: TileMode, pos?: Array\<number> | null, matrix?: Matrix | null): ShaderEffect 9172 9173Creates a **ShaderEffect** object that generates a linear gradient between two points. 9174 9175**System capability**: SystemCapability.Graphics.Drawing 9176 9177**Parameters** 9178 9179| Name| Type | Mandatory| Description | 9180| ------ | -------------------------------------------------- | ---- | -------------- | 9181| startPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | Start point.| 9182| endPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | End point.| 9183| colors | Array\<number> | Yes | Array of colors to distribute between the two points. The values in the array are 32-bit (ARGB) unsigned integers.| 9184| mode | [TileMode](#tilemode12) | Yes | Tile mode of the shader effect.| 9185| 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.| 9186| 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.| 9187 9188 9189 9190The 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. 9191 9192**Return value** 9193 9194| Type | Description | 9195| ------- | ------------------------- | 9196| [ShaderEffect](#shadereffect12) | **ShaderEffect** object created.| 9197 9198**Error codes** 9199 9200For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 9201 9202| ID| Error Message| 9203| ------- | --------------------------------------------| 9204| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 9205 9206**Example** 9207 9208```ts 9209import { common2D,drawing } from '@kit.ArkGraphics2D'; 9210 9211let startPt: common2D.Point = { x: 100, y: 100 }; 9212let endPt: common2D.Point = { x: 300, y: 300 }; 9213let shaderEffect = drawing.ShaderEffect.createLinearGradient(startPt, endPt, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 9214``` 9215 9216### createRadialGradient<sup>12+</sup> 9217 9218static createRadialGradient(centerPt: common2D.Point, radius: number, colors: Array\<number>, mode: TileMode, pos?: Array\<number> | null, matrix?: Matrix | null): ShaderEffect; 9219 9220Creates a **ShaderEffect** object that generates a radial gradient based on the center and radius of a circle. A radial gradient refers to the color transition that spreads out gradually from the center of a circle. 9221 9222**System capability**: SystemCapability.Graphics.Drawing 9223 9224**Parameters** 9225 9226| Name| Type | Mandatory| Description | 9227| ------ | -------------------------------------------------- | ---- | -------------- | 9228| centerPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | Center of the circle.| 9229| radius | number | Yes | Radius of the gradient. A negative number is invalid. The value is a floating point number.| 9230| 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.| 9231| mode | [TileMode](#tilemode12) | Yes | Tile mode of the shader effect.| 9232| 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.| 9233| 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.| 9234 9235 9236 9237The 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. 9238 9239**Return value** 9240 9241| Type | Description | 9242| ------- | ------------------------- | 9243| [ShaderEffect](#shadereffect12) | **ShaderEffect** object created.| 9244 9245**Error codes** 9246 9247For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 9248 9249| ID| Error Message| 9250| ------- | --------------------------------------------| 9251| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 9252 9253**Example** 9254 9255```ts 9256import { common2D,drawing } from '@kit.ArkGraphics2D'; 9257 9258let centerPt: common2D.Point = { x: 100, y: 100 }; 9259let shaderEffect = drawing.ShaderEffect.createRadialGradient(centerPt, 100, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 9260``` 9261 9262### createSweepGradient<sup>12+</sup> 9263 9264static createSweepGradient(centerPt: common2D.Point, colors: Array\<number>, 9265 mode: TileMode, startAngle: number, endAngle: number, pos?: Array\<number> | null, 9266 matrix?: Matrix | null): ShaderEffect; 9267 9268Creates a **ShaderEffect** object that generates a color sweep gradient around a given center point, either in a clockwise or counterclockwise direction. 9269 9270**System capability**: SystemCapability.Graphics.Drawing 9271 9272**Parameters** 9273 9274| Name| Type | Mandatory| Description | 9275| ------ | -------------------------------------------------- | ---- | -------------- | 9276| centerPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | Center of the circle.| 9277| 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.| 9278| mode | [TileMode](#tilemode12) | Yes | Tile mode of the shader effect.| 9279| 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.| 9280| 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.| 9281| 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.| 9282| 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.| 9283 9284 9285 9286The 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. 9287 9288**Return value** 9289 9290| Type | Description | 9291| ------- | ------------------------- | 9292| [ShaderEffect](#shadereffect12) | **ShaderEffect** object created.| 9293 9294**Error codes** 9295 9296For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 9297 9298| ID| Error Message| 9299| ------- | --------------------------------------------| 9300| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 9301 9302**Example** 9303 9304```ts 9305import { common2D,drawing } from '@kit.ArkGraphics2D'; 9306 9307let centerPt: common2D.Point = { x: 100, y: 100 }; 9308let shaderEffect = drawing.ShaderEffect.createSweepGradient(centerPt, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT, 100, 200); 9309``` 9310 9311### createConicalGradient<sup>12+</sup> 9312 9313static createConicalGradient(startPt: common2D.Point, startRadius: number, endPt: common2D.Point, endRadius: number, colors: Array\<number>, mode: TileMode, 9314pos?: Array\<number> | null, matrix?: Matrix | null): ShaderEffect; 9315 9316Creates a **ShaderEffect** object that generates a conical gradient between two given circles. 9317 9318**System capability**: SystemCapability.Graphics.Drawing 9319 9320**Parameters** 9321 9322| Name| Type | Mandatory| Description | 9323| ------ | -------------------------------------------------- | ---- | -------------- | 9324| startPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes |Center of the start circle of the gradient.| 9325| startRadius | number | Yes | Radius of the start circle of the gradient. A negative number is invalid. The value is a floating point number.| 9326| endPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | Center of the end circle of the gradient.| 9327| endRadius | number | Yes | Radius of the end circle of the gradient. A negative value is invalid. The value is a floating point number.| 9328| 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.| 9329| mode | [TileMode](#tilemode12) | Yes | Tile mode of the shader effect.| 9330| 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.| 9331| 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.| 9332 9333 9334 9335The 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. 9336 9337**Return value** 9338 9339| Type | Description | 9340| ------- | ------------------------- | 9341| [ShaderEffect](#shadereffect12) | **ShaderEffect** object created.| 9342 9343**Error codes** 9344 9345For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 9346 9347| ID| Error Message| 9348| ------- | --------------------------------------------| 9349| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 9350 9351**Example** 9352 9353```ts 9354import { common2D,drawing } from '@kit.ArkGraphics2D'; 9355 9356let startPt: common2D.Point = { x: 100, y: 100 }; 9357let endPt: common2D.Point = {x: 200, y: 200}; 9358let shaderEffect = drawing.ShaderEffect.createConicalGradient(startPt, 100, endPt, 50, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 9359``` 9360 9361## Tool<sup>15+</sup> 9362 9363A utility class that provides only static methods to convert data structs defined in other modules and [common2D](js-apis-graphics-common2D.md). 9364 9365### makeColorFromResourceColor<sup>15+</sup> 9366 9367static makeColorFromResourceColor(resourceColor: ResourceColor): common2D.Color 9368 9369Converts a color value of the **ResourceColor** type to a **common2D.Color** object. 9370 9371**System capability**: SystemCapability.Graphics.Drawing 9372 9373**Parameters** 9374 9375| Name| Type | Mandatory| Description | 9376| ------ | -------------------------------------------------- | ---- | -------------- | 9377| 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**.)| 9378 9379**Return value** 9380 9381| Type | Description | 9382| ------- | ------------------------- | 9383| [common2D.Color](js-apis-graphics-common2D.md#color) | **Common2D.Color** object. If the conversion fails, a null pointer is returned.| 9384 9385**Error codes** 9386 9387For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 9388 9389| ID| Error Message| 9390| ------- | --------------------------------------------| 9391| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9392 9393**Example** 9394 9395```ts 9396import { drawing, common2D } from '@kit.ArkGraphics2D'; 9397 9398// Color 9399let color1: common2D.Color = drawing.Tool.makeColorFromResourceColor(Color.Blue); 9400 9401// Number 9402let color2: common2D.Color = drawing.Tool.makeColorFromResourceColor(0xffc0cb); 9403let color3: common2D.Color = drawing.Tool.makeColorFromResourceColor(0x11ffa500); 9404 9405// String 9406let color4: common2D.Color = drawing.Tool.makeColorFromResourceColor('#ff0000'); 9407let color5: common2D.Color = drawing.Tool.makeColorFromResourceColor('#110000ff'); 9408let color6: common2D.Color = drawing.Tool.makeColorFromResourceColor('#00f'); 9409let color7: common2D.Color = drawing.Tool.makeColorFromResourceColor('#100f'); 9410let color8: common2D.Color = drawing.Tool.makeColorFromResourceColor('rgb(255, 100, 255)'); 9411let color9: common2D.Color = drawing.Tool.makeColorFromResourceColor('rgba(255, 100, 255, 0.5)'); 9412 9413// Resource 9414let color10: common2D.Color = drawing.Tool.makeColorFromResourceColor($r('sys.color.ohos_id_color_secondary')); 9415let color11: common2D.Color = drawing.Tool.makeColorFromResourceColor($r('app.color.appColorTest')); 9416let color12: common2D.Color = drawing.Tool.makeColorFromResourceColor($r('app.string.appColorTest')); 9417let color13: common2D.Color = drawing.Tool.makeColorFromResourceColor($r('app.integer.appColorTest')); 9418 9419// Use color 9420let brush = new drawing.Brush(); 9421brush.setColor(color1); 9422``` 9423 9424## RegionOp<sup>12+</sup> 9425 9426Enumerates the operations for combining two regions. 9427 9428**System capability**: SystemCapability.Graphics.Drawing 9429 9430| Name | Value | Description | Diagram | 9431| --------------------- | ---- | ------------------------------ | -------- | 9432| DIFFERENCE | 0 | Difference operation. | | 9433| INTERSECT | 1 | Intersect operation.| | 9434| UNION | 2 | Union operation. | | 9435| XOR | 3 | XOR operation. | | 9436| REVERSE_DIFFERENCE | 4 | Reverse difference operation. | | 9437| REPLACE | 5 | Replace operation. | | 9438 9439> **NOTE** 9440> 9441> 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. 9442 9443## CornerPos<sup>12+</sup> 9444 9445Enumerates the corner positions of a rounded rectangle. 9446 9447**System capability**: SystemCapability.Graphics.Drawing 9448 9449| Name | Value | Description | 9450| --------------------- | ---- | ------------------------------ | 9451| TOP_LEFT_POS | 0 | Top left corner of the rounded rectangle. | 9452| TOP_RIGHT_POS | 1 | Top right corner of the rounded rectangle.| 9453| BOTTOM_RIGHT_POS | 2 | Bottom right corner of the rounded rectangle. | 9454| BOTTOM_LEFT_POS | 3 | Bottom left corner of the rounded rectangle. | 9455
