1# @ohos.graphics.drawing (Drawing) 2 3The Drawing module provides basic drawing capabilities, such as drawing rectangles, circles, points, straight lines, custom paths, and fonts. 4 5> **NOTE** 6> 7> - The initial APIs of this module are supported since API version 11. Newly added APIs will be marked with a superscript to indicate their earliest API version. 8> 9> - This module uses the physical pixel unit, px. 10> 11> - The module operates under a single-threaded model. The caller needs to manage thread safety and context state transitions. 12 13## Modules to Import 14 15```ts 16import { drawing } from '@kit.ArkGraphics2D'; 17``` 18 19## BlendMode 20 21Enumerates the blend modes. In blend mode, each operation generates a new color from two colors (source color and destination color). These operations are the same for the red, green, and blue color channels (the alpha channel follows a different rule). For simplicity, the following description uses the alpha channel as an example rather than naming each channel individually. 22 23For brevity, the following abbreviations are used: 24 25- **s**: source. 26- **d**: destination. 27- **sa**: source alpha. 28- **da**: destination alpha. 29 30The following abbreviations are used in the calculation result: 31 32- **r**: used when the calculation method is the same for the four channels (alpha, red, green, and blue channels). 33- **ra**: used when only the alpha channel is manipulated. 34- **rc**: used when the other three color channels are manipulated. 35 36The table below shows the effect of each blend mode, where the yellow rectangle is the source and the blue circle is the destination. 37 38**System capability**: SystemCapability.Graphics.Drawing 39 40| Name | Value | Description | Diagram | 41| ----------- | ---- | ------------------------------------------------------------ | -------- | 42| CLEAR | 0 | r = 0, sets the the destination pixels to fully transparent. |  | 43| SRC | 1 | r = s (all channels of the result equal those of the source), replaces the destination pixels with the source pixels.|  | 44| DST | 2 | r = d (all channels of the result equal those of the destination), keeps the destination pixels unchanged.|  | 45| SRC_OVER | 3 | r = s + (1 - sa) * d, draws the source pixels over the destination pixels, considering the source's transparency.|  | 46| DST_OVER | 4 | r = d + (1 - da) * s, draws the destination pixels over the source pixels, considering the destination's transparency.|  | 47| SRC_IN | 5 | r = s * da, retains only the intersection of the source pixels with the opaque parts of the destination.|  | 48| DST_IN | 6 | r = d * sa, retains only the intersection of the destination pixels with the opaque parts of the source.|  | 49| SRC_OUT | 7 | r = s * (1 - da), retains the parts of the source pixels that do not overlap with the destination.|  | 50| DST_OUT | 8 | r = d * (1 - sa), retains the parts of the destination pixels that do not overlap with the source.|  | 51| SRC_ATOP | 9 | r = s * da + d * (1 - sa), covers the destination pixels with the source pixels, showing the source only in the opaque parts of the destination.|  | 52| DST_ATOP | 10 | r = d * sa + s * (1 - da), covers the source pixels with the destination pixels, showing the destination only in the opaque parts of the source.|  | 53| XOR | 11 | r = s * (1 - da) + d * (1 - sa), shows only the non-overlapping parts of the source and destination pixels.|  | 54| PLUS | 12 | r = min(s + d, 1), adds the color values of the source and destination pixels. |  | 55| MODULATE | 13 | r = s * d, multiplies the color values of the source and destination pixels. |  | 56| SCREEN | 14 | r = s + d - s * d, inverts the color values of the source and destination pixels, multiplies them, and then inverts the result, typically producing a brighter outcome.|  | 57| OVERLAY | 15 | Selectively applies **MULTIPLY** or **SCREEN** based on the brightness of the destination pixels, enhancing contrast.|  | 58| DARKEN | 16 | rc = s + d - max(s * da, d * sa), ra = s + (1 - sa) * d, takes the darker color values between the source and destination pixels.|  | 59| LIGHTEN | 17 | rc = s + d - min(s * da, d * sa), ra = s + (1 - sa) * d, takes the lighter color values between the source and destination pixels.|  | 60| COLOR_DODGE | 18 | Brightens the destination pixels by reducing contrast to reflect the source pixels. |  | 61| COLOR_BURN | 19 | Darkens the destination pixels by increasing contrast to reflect the source pixels. |  | 62| HARD_LIGHT | 20 | Selectively applies **MULTIPLY** or **SCREEN** based on the brightness of the source pixels. |  | 63| SOFT_LIGHT | 21 | Softly brightens or darkens the destination pixels based on the brightness of the source pixels. |  | 64| DIFFERENCE | 22 | rc = s + d - 2 * (min(s * da, d * sa)), ra = s + (1 - sa) * d, calculates the difference between the color values of the source and destination pixels.|  | 65| EXCLUSION | 23 | rc = s + d - two(s * d), ra = s + (1 - sa) * d, similar to **DIFFERENCE** but with lower contrast.|  | 66| MULTIPLY | 24 | r = s * (1 - da) + d * (1 - sa) + s * d, multiplies the color values of the source and destination pixels, typically resulting in a darker outcome.|  | 67| HUE | 25 | Uses the hue of the source pixels and the saturation and brightness of the destination pixels. |  | 68| SATURATION | 26 | Uses the saturation of the source pixels and the hue and brightness of the destination pixels. |  | 69| COLOR | 27 | Uses the hue and saturation of the source pixels and the brightness of the destination pixels. |  | 70| LUMINOSITY | 28 | Uses the brightness of the source pixels and the hue and saturation of the destination pixels. |  | 71 72## PathMeasureMatrixFlags<sup>12+</sup> 73 74Enumerates the types of matrix information obtained during path measurement. 75 76**System capability**: SystemCapability.Graphics.Drawing 77 78| Name | Value | Description | 79| ----------- | ---- | ------------------------------------------------------------ | 80| GET_POSITION_MATRIX | 0 | Matrix corresponding to the position information. | 81| GET_TANGENT_MATRIX | 1 | Matrix corresponding to the tangent information.| 82| GET_POSITION_AND_TANGENT_MATRIX | 2 | Matrix corresponding to the position and tangent information.| 83 84## SrcRectConstraint<sup>12+</sup> 85 86Enumerates the constraint types of the source rectangle. 87 88**System capability**: SystemCapability.Graphics.Drawing 89 90| Name | Value | Description | 91| ----------- | ---- | ------------------------------------------------------------ | 92| STRICT | 0 | The sampling range is strictly confined to the source rectangle, resulting in a slow sampling speed. | 93| FAST | 1 | The sampling range is not limited to the source rectangle and can extend beyond it, allowing for a high sampling speed.| 94 95## ShadowFlag<sup>12+</sup> 96 97Enumerates the flags used to control shadow drawing to create various shadow effects. 98 99**System capability**: SystemCapability.Graphics.Drawing 100 101| Name | Value | Description | 102| -------------------------- | ---- | ------------------ | 103| NONE | 0 | None of the flags are enabled. | 104| TRANSPARENT_OCCLUDER | 1 | The occluder is transparent. | 105| GEOMETRIC_ONLY | 2 | Only the geometric shadow effect is used. | 106| ALL | 3 | All the flags are enabled.| 107 108## PathOp<sup>12+</sup> 109 110Enumerates the operation modes available for a path. 111 112**System capability**: SystemCapability.Graphics.Drawing 113 114| Name | Value | Description | 115| ---------------------- | ---- | ------------------------------ | 116| DIFFERENCE | 0 | Difference operation.| 117| INTERSECT | 1 | Intersection operation.| 118| UNION | 2 | Union operation.| 119| XOR | 3 | XOR operation.| 120| REVERSE_DIFFERENCE | 4 | Reverse difference operation.| 121 122## Path 123 124A compound geometric path consisting of line segments, arcs, quadratic Bezier curves, and cubic Bezier curves. 125 126### constructor<sup>12+</sup> 127 128constructor() 129 130Constructs a path. 131 132**System capability**: SystemCapability.Graphics.Drawing 133 134**Example** 135 136```ts 137import { drawing } from '@kit.ArkGraphics2D'; 138let path: drawing.Path = new drawing.Path(); 139``` 140 141### constructor<sup>12+</sup> 142 143constructor(path: Path) 144 145Constructs a copy of an existing path. 146 147**System capability**: SystemCapability.Graphics.Drawing 148 149**Parameters** 150 151| Name | Type | Mandatory| Description | 152| -------- | -------------------------------------------- | ---- | ------------------------------- | 153| path | [Path](#path) | Yes | Path to copy. | 154 155**Example** 156 157```ts 158import { drawing } from '@kit.ArkGraphics2D'; 159let path: drawing.Path = new drawing.Path(); 160path.moveTo(0, 0); 161path.lineTo(0, 700); 162path.lineTo(700, 0); 163path.close(); 164let path1: drawing.Path = new drawing.Path(path); 165``` 166 167### moveTo 168 169moveTo(x: number, y: number) : void 170 171Sets the start point of this path. 172 173**System capability**: SystemCapability.Graphics.Drawing 174 175**Parameters** 176 177| Name| Type | Mandatory| Description | 178| ------ | ------ | ---- | ----------------------- | 179| x | number | Yes | X coordinate of the start point. The value is a floating point number.| 180| y | number | Yes | Y coordinate of the start point. The value is a floating point number.| 181 182**Error codes** 183 184For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 185 186| ID| Error Message| 187| ------- | --------------------------------------------| 188| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 189 190**Example** 191 192```ts 193import { drawing } from '@kit.ArkGraphics2D'; 194let path = new drawing.Path(); 195path.moveTo(10,10); 196``` 197 198### lineTo 199 200lineTo(x: number, y: number) : void 201 202Draws 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. 203 204**System capability**: SystemCapability.Graphics.Drawing 205 206**Parameters** 207 208| Name| Type | Mandatory| Description | 209| ------ | ------ | ---- | ----------------------- | 210| x | number | Yes | X coordinate of the target point. The value is a floating point number.| 211| y | number | Yes | Y coordinate of the target point. The value is a floating point number.| 212 213**Error codes** 214 215For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 216 217| ID| Error Message| 218| ------- | --------------------------------------------| 219| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 220 221**Example** 222 223```ts 224import { drawing } from '@kit.ArkGraphics2D'; 225let path = new drawing.Path(); 226path.moveTo(10,10); 227path.lineTo(10, 15); 228``` 229 230### arcTo 231 232arcTo(x1: number, y1: number, x2: number, y2: number, startDeg: number, sweepDeg: number): void 233 234Draws an arc to this path. This is done by using angle arc mode. In this mode, a rectangle that encloses an ellipse is specified first, and then a start angle and a sweep angle are specified. The arc is a portion of the ellipse defined by the start angle and the sweep angle. By default, a line segment from the last point of the path to the start point of the arc is also added. 235 236**System capability**: SystemCapability.Graphics.Drawing 237 238**Parameters** 239 240| Name | Type | Mandatory| Description | 241| -------- | ------ | ---- | -------------------------- | 242| x1 | number | Yes | X coordinate of the upper left corner of the rectangle. The value is a floating point number.| 243| y1 | number | Yes | Y coordinate of the upper left corner of the rectangle. The value is a floating point number.| 244| x2 | number | Yes | X coordinate of the lower right corner of the rectangle. The value is a floating point number.| 245| y2 | number | Yes | Y coordinate of the lower right corner of the rectangle. The value is a floating point number.| 246| startDeg | number | Yes | Start angle. The start direction (0°) of the angle is the positive direction of the X axis.| 247| 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.| 248 249**Error codes** 250 251For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 252 253| ID| Error Message| 254| ------- | --------------------------------------------| 255| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 256 257**Example** 258 259```ts 260import { drawing } from '@kit.ArkGraphics2D'; 261let path = new drawing.Path(); 262path.moveTo(10,10); 263path.arcTo(10, 15, 10, 10, 10, 10); 264``` 265 266### quadTo 267 268quadTo(ctrlX: number, ctrlY: number, endX: number, endY: number): void 269 270Draws 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. 271 272**System capability**: SystemCapability.Graphics.Drawing 273 274**Parameters** 275 276| Name| Type | Mandatory| Description | 277| ------ | ------ | ---- | --------------------- | 278| ctrlX | number | Yes | X coordinate of the control point. The value is a floating point number.| 279| ctrlY | number | Yes | Y coordinate of the control point. The value is a floating point number.| 280| endX | number | Yes | X coordinate of the target point. The value is a floating point number.| 281| endY | number | Yes | Y coordinate of the target point. The value is a floating point number.| 282 283**Error codes** 284 285For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 286 287| ID| Error Message| 288| ------- | --------------------------------------------| 289| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 290 291**Example** 292 293```ts 294import { drawing } from '@kit.ArkGraphics2D'; 295let path = new drawing.Path(); 296path.moveTo(10,10); 297path.quadTo(10, 15, 10, 10); 298``` 299 300### conicTo<sup>12+</sup> 301 302conicTo(ctrlX: number, ctrlY: number, endX: number, endY: number, weight: number): void 303 304Draws 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. 305 306**System capability**: SystemCapability.Graphics.Drawing 307 308**Parameters** 309 310| Name| Type | Mandatory| Description | 311| ------ | ------ | ---- | --------------------- | 312| ctrlX | number | Yes | X coordinate of the control point. The value is a floating point number.| 313| ctrlY | number | Yes | Y coordinate of the control point. The value is a floating point number.| 314| endX | number | Yes | X coordinate of the target point. The value is a floating point number.| 315| endY | number | Yes | Y coordinate of the target point. The value is a floating point number.| 316| weight | number | Yes | Weight of the curve, which determines its shape. The larger the value, the closer of the curve to the control point. If the value is less than or equal to 0, this API is equivalent to [lineTo](#lineto), that is, adding a line segment from the last point of the path to the target point. If the value is 1, this API is equivalent to [quadTo](#quadto). The value is a floating point number.| 317 318**Error codes** 319 320For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 321 322| ID| Error Message| 323| ------- | --------------------------------------------| 324| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 325 326**Example** 327 328```ts 329import { drawing } from '@kit.ArkGraphics2D'; 330 331const path = new drawing.Path(); 332path.conicTo(200, 400, 100, 200, 0); 333``` 334 335### cubicTo 336 337cubicTo(ctrlX1: number, ctrlY1: number, ctrlX2: number, ctrlY2: number, endX: number, endY: number): void 338 339Draws 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. 340 341**System capability**: SystemCapability.Graphics.Drawing 342 343**Parameters** 344 345| Name| Type | Mandatory| Description | 346| ------ | ------ | ---- | --------------------------- | 347| ctrlX1 | number | Yes | X coordinate of the first control point. The value is a floating point number.| 348| ctrlY1 | number | Yes | Y coordinate of the first control point. The value is a floating point number.| 349| ctrlX2 | number | Yes | X coordinate of the second control point. The value is a floating point number.| 350| ctrlY2 | number | Yes | Y coordinate of the second control point. The value is a floating point number.| 351| endX | number | Yes | X coordinate of the target point. The value is a floating point number.| 352| endY | number | Yes | Y coordinate of the target point. The value is a floating point number.| 353 354**Error codes** 355 356For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 357 358| ID| Error Message| 359| ------- | --------------------------------------------| 360| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 361 362**Example** 363 364```ts 365import { drawing } from '@kit.ArkGraphics2D'; 366let path = new drawing.Path(); 367path.moveTo(10,10); 368path.cubicTo(100, 100, 80, 150, 300, 150); 369``` 370 371### rMoveTo<sup>12+</sup> 372 373rMoveTo(dx : number, dy : number): void 374 375Sets the start position relative to the last point of this path. If the path is empty, the start point (0, 0) is used. 376 377**System capability**: SystemCapability.Graphics.Drawing 378 379**Parameters** 380 381| Name| Type | Mandatory| Description | 382| ------ | ------ | ---- | ----------------------- | 383| 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.| 384| 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.| 385 386**Error codes** 387 388For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 389 390| ID| Error Message| 391| ------- | --------------------------------------------| 392| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 393 394**Example** 395 396```ts 397import { drawing } from '@kit.ArkGraphics2D'; 398 399const path = new drawing.Path(); 400path.rMoveTo(10, 10); 401``` 402 403### rLineTo<sup>12+</sup> 404 405rLineTo(dx : number, dy : number): void 406 407Draws 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. 408 409**System capability**: SystemCapability.Graphics.Drawing 410 411**Parameters** 412 413| Name| Type | Mandatory| Description | 414| ------ | ------ | ---- | ----------------------- | 415| 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.| 416| 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.| 417 418**Error codes** 419 420For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 421 422| ID| Error Message| 423| ------- | --------------------------------------------| 424| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 425 426**Example** 427 428```ts 429import { drawing } from '@kit.ArkGraphics2D'; 430 431const path = new drawing.Path(); 432path.rLineTo(400, 200); 433``` 434 435### rQuadTo<sup>12+</sup> 436 437rQuadTo(dx1: number, dy1: number, dx2: number, dy2: number): void 438 439Draws 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. 440 441**System capability**: SystemCapability.Graphics.Drawing 442 443**Parameters** 444 445| Name| Type | Mandatory| Description | 446| ------ | ------ | ---- | --------------------- | 447| 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.| 448| 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.| 449| 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.| 450| 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.| 451 452**Error codes** 453 454For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 455 456| ID| Error Message| 457| ------- | --------------------------------------------| 458| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 459 460**Example** 461 462```ts 463import { drawing } from '@kit.ArkGraphics2D'; 464 465const path = new drawing.Path(); 466path.rQuadTo(100, 0, 0, 200); 467``` 468 469### rConicTo<sup>12+</sup> 470 471rConicTo(ctrlX: number, ctrlY: number, endX: number, endY: number, weight: number): void 472 473Draws 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. 474 475**System capability**: SystemCapability.Graphics.Drawing 476 477**Parameters** 478 479| Name| Type | Mandatory| Description | 480| ------ | ------ | ---- | --------------------- | 481| 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.| 482| 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.| 483| 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.| 484| 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.| 485| 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.| 486 487**Error codes** 488 489For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 490 491| ID| Error Message| 492| ------- | --------------------------------------------| 493| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 494 495**Example** 496 497```ts 498import { drawing } from '@kit.ArkGraphics2D'; 499 500const path = new drawing.Path(); 501path.rConicTo(200, 400, 100, 200, 0); 502``` 503 504### rCubicTo<sup>12+</sup> 505 506rCubicTo(ctrlX1: number, ctrlY1: number, ctrlX2: number, ctrlY2: number, endX: number, endY: number): void 507 508Draws 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. 509 510**System capability**: SystemCapability.Graphics.Drawing 511 512**Parameters** 513 514| Name| Type | Mandatory| Description | 515| ------ | ------ | ---- | --------------------------- | 516| 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.| 517| 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.| 518| 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.| 519| 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.| 520| 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.| 521| 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.| 522 523**Error codes** 524 525For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 526 527| ID| Error Message| 528| ------- | --------------------------------------------| 529| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 530 531**Example** 532 533```ts 534import { drawing } from '@kit.ArkGraphics2D'; 535 536const path = new drawing.Path(); 537path.rCubicTo(200, 0, 0, 200, -20, 0); 538``` 539 540### addArc<sup>12+</sup> 541 542addArc(rect: common2D.Rect, startAngle: number, sweepAngle: number): void 543 544Adds an arc to this path. 545When **startAngle** and **sweepAngle** meet the following conditions, an oval instead of an arc is added: 5461. The result of **startAngle** modulo 90 is close to 0. 5472. The value of **sweepAngle** is not in the range of (-360, 360). 548In other cases, this API adds an arc by applying the result of **sweepAngle** modulo 360 to the path. 549 550**System capability**: SystemCapability.Graphics.Drawing 551 552**Parameters** 553 554| Name | Type | Mandatory | Description | 555| ----------- | ---------------------------------------- | ---- | ------------------- | 556| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangular boundary that encapsulates the oval including the arc. | 557| 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.| 558| 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.| 559 560**Error codes** 561 562For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 563 564| ID| Error Message| 565| ------- | --------------------------------------------| 566| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 567 568**Example** 569 570```ts 571import { common2D, drawing } from '@kit.ArkGraphics2D'; 572 573let path = new drawing.Path(); 574const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 575path.addArc(rect, 90, 180); 576``` 577 578### addCircle<sup>12+</sup> 579 580addCircle(x: number, y: number, radius: number, pathDirection?: PathDirection): void 581 582Adds a circle to this path in the specified direction. The start point of the circle is (x + radius, y). 583 584**System capability**: SystemCapability.Graphics.Drawing 585 586**Parameters** 587 588| Name | Type | Mandatory | Description | 589| ----------- | ---------------------------------------- | ---- | ------------------- | 590| x | number | Yes | X coordinate of the center of the circle. The value is a floating point number.| 591| y | number | Yes | Y coordinate of the center of the circle. The value is a floating point number.| 592| 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.| 593| pathDirection | [PathDirection](#pathdirection12) | No | Direction of the path. The default direction is clockwise.| 594 595**Error codes** 596 597For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 598 599| ID| Error Message| 600| ------- | --------------------------------------------| 601| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed. | 602 603**Example** 604 605```ts 606 607import { drawing } from '@kit.ArkGraphics2D'; 608 609let path = new drawing.Path(); 610path.addCircle(100, 200, 50, drawing.PathDirection.CLOCKWISE); 611``` 612 613### addOval<sup>12+</sup> 614 615addOval(rect: common2D.Rect, start: number, pathDirection?: PathDirection): void 616 617Adds an oval to this path in the specified direction, where the **common2D.Rect** object specifies the outer tangent rectangle of the oval. 618 619**System capability**: SystemCapability.Graphics.Drawing 620 621**Parameters** 622 623| Name | Type | Mandatory | Description | 624| ----------- | ---------------------------------------- | ---- | ------------------- | 625| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangular boundary of the oval. | 626| 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.| 627| pathDirection | [PathDirection](#pathdirection12) | No | Direction of the path. The default direction is clockwise.| 628 629**Error codes** 630 631For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 632 633| ID| Error Message| 634| ------- | --------------------------------------------| 635| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 636 637**Example** 638 639```ts 640import { common2D, drawing } from '@kit.ArkGraphics2D'; 641 642let path = new drawing.Path(); 643const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 644path.addOval(rect, 5, drawing.PathDirection.CLOCKWISE); 645``` 646 647### addRect<sup>12+</sup> 648 649addRect(rect: common2D.Rect, pathDirection?: PathDirection): void 650 651Adds a rectangle to this path in the specified direction. The start point is the upper left corner of the rectangle. 652 653**System capability**: SystemCapability.Graphics.Drawing 654 655**Parameters** 656 657| Name | Type | Mandatory | Description | 658| ----------- | ---------------------------------------- | ---- | ------------------- | 659| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangle. | 660| pathDirection | [PathDirection](#pathdirection12) | No | Direction of the path. The default direction is clockwise.| 661 662**Error codes** 663 664For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 665 666| ID| Error Message| 667| ------- | --------------------------------------------| 668| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 669 670**Example** 671 672```ts 673import { common2D, drawing } from '@kit.ArkGraphics2D'; 674 675let path = new drawing.Path(); 676const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 677path.addRect(rect, drawing.PathDirection.CLOCKWISE); 678``` 679 680### addRoundRect<sup>12+</sup> 681 682addRoundRect(roundRect: RoundRect, pathDirection?: PathDirection): void 683 684Adds 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. 685 686**System capability**: SystemCapability.Graphics.Drawing 687 688**Parameters** 689 690| Name | Type | Mandatory | Description | 691| ----------- | ---------------------------------------- | ---- | ------------------- | 692| roundRect | [RoundRect](#roundrect12) | Yes | Rounded rectangle. | 693| pathDirection | [PathDirection](#pathdirection12) | No | Direction of the path. The default direction is clockwise.| 694 695**Error codes** 696 697For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 698 699| ID| Error Message| 700| ------- | --------------------------------------------| 701| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 702 703**Example** 704 705```ts 706import { common2D, drawing } from '@kit.ArkGraphics2D'; 707 708let path = new drawing.Path(); 709const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 710let roundRect = new drawing.RoundRect(rect, 50, 50); 711path.addRoundRect(roundRect, drawing.PathDirection.CLOCKWISE); 712``` 713 714### addPath<sup>12+</sup> 715 716addPath(path: Path, matrix?: Matrix | null): void 717 718Transforms the points in a path by a matrix and stores the resulting path in the current **Path** object. 719 720**System capability**: SystemCapability.Graphics.Drawing 721 722**Parameters** 723 724| Name | Type | Mandatory | Description | 725| ----------- | ---------------------------------------- | ---- | ------------------- | 726| path | [Path](#path) | Yes | Source **Path** object. | 727| matrix | [Matrix](#matrix12)\|null | No | **Matrix** object. The default value is an identity matrix.| 728 729**Error codes** 730 731For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 732 733| ID| Error Message| 734| ------- | --------------------------------------------| 735| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 736 737**Example** 738 739```ts 740import { common2D, drawing } from '@kit.ArkGraphics2D'; 741 742let path = new drawing.Path(); 743let matrix = new drawing.Matrix(); 744const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 745let roundRect = new drawing.RoundRect(rect, 50, 50); 746path.addRoundRect(roundRect, drawing.PathDirection.CLOCKWISE); 747let dstPath = new drawing.Path(); 748dstPath.addPath(path, matrix); 749``` 750 751### transform<sup>12+</sup> 752 753transform(matrix: Matrix): void 754 755Transforms the points in this path by a matrix. 756 757**System capability**: SystemCapability.Graphics.Drawing 758 759**Parameters** 760 761| Name | Type | Mandatory | Description | 762| ----------- | ---------------------------------------- | ---- | ------------------- | 763| matrix | [Matrix](#matrix12) | Yes | **Matrix** object.| 764 765**Error codes** 766 767For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 768 769| ID| Error Message| 770| ------- | --------------------------------------------| 771| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 772 773**Example** 774 775```ts 776import { common2D, drawing } from '@kit.ArkGraphics2D'; 777 778let path = new drawing.Path(); 779let matrix = new drawing.Matrix(); 780matrix.setScale(1.5, 1.5, 10, 10); 781const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 782let roundRect = new drawing.RoundRect(rect, 50, 50); 783path.addRoundRect(roundRect, drawing.PathDirection.CLOCKWISE); 784path.transform(matrix); 785``` 786 787### contains<sup>12+</sup> 788 789contains(x: number, y: number): boolean 790 791Checks whether a coordinate point is included in this path. For details, see [PathFillType](#pathfilltype12). 792 793**System capability**: SystemCapability.Graphics.Drawing 794 795**Parameters** 796 797| Name| Type | Mandatory| Description | 798| ------ | ------ | ---- | ----------------------- | 799| x | number | Yes | X coordinate. The value is a floating point number.| 800| y | number | Yes | Y coordinate. The value is a floating point number.| 801 802**Return value** 803 804| Type | Description | 805| ------- | -------------- | 806| boolean | Check result. The value **true** means that the coordinate point is included in the path, and **false** means the opposite.| 807 808**Error codes** 809 810For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 811 812| ID| Error Message| 813| ------- | --------------------------------------------| 814| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 815 816**Example** 817 818```ts 819import { common2D, drawing } from '@kit.ArkGraphics2D'; 820 821const path = new drawing.Path(); 822let rect : common2D.Rect = {left: 50, top: 50, right: 250, bottom: 250}; 823path.addRect(rect, drawing.PathDirection.CLOCKWISE); 824console.info("test contains: " + path.contains(0, 0)); 825console.info("test contains: " + path.contains(60, 60)); 826``` 827 828### setFillType<sup>12+</sup> 829 830setFillType(pathFillType: PathFillType): void 831 832Sets 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. 833 834**System capability**: SystemCapability.Graphics.Drawing 835 836**Parameters** 837 838| Name | Type | Mandatory | Description | 839| ----------- | ---------------------------------------- | ---- | ------------------- | 840| pathFillType | [PathFillType](#pathfilltype12) | Yes | Fill type of the path.| 841 842**Error codes** 843 844For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 845 846| ID| Error Message| 847| ------- | --------------------------------------------| 848| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 849 850**Example** 851 852```ts 853import { drawing } from '@kit.ArkGraphics2D'; 854 855const path = new drawing.Path(); 856path.setFillType(drawing.PathFillType.WINDING); 857``` 858 859### getBounds<sup>12+</sup> 860 861getBounds(): common2D.Rect 862 863Obtains the minimum bounding rectangle that encloses this path. 864 865**System capability**: SystemCapability.Graphics.Drawing 866 867**Return value** 868 869| Type | Description | 870| -------------------------------------------------- | ---------------------- | 871| [common2D.Rect](js-apis-graphics-common2D.md#rect) | Minimum bounding rectangle.| 872 873**Example** 874 875```ts 876import { common2D, drawing } from '@kit.ArkGraphics2D'; 877 878const path = new drawing.Path(); 879path.lineTo(50, 40) 880let rect : common2D.Rect = {left: 0, top: 0, right: 0, bottom: 0}; 881rect = path.getBounds(); 882console.info("test rect.left: " + rect.left); 883console.info("test rect.top: " + rect.top); 884console.info("test rect.right: " + rect.right); 885console.info("test rect.bottom: " + rect.bottom); 886``` 887 888### addPolygon<sup>12+</sup> 889 890addPolygon(points: Array\<common2D.Point>, close: boolean): void 891 892Adds a polygon to this path. 893 894**System capability**: SystemCapability.Graphics.Drawing 895 896**Parameters** 897 898| Name| Type | Mandatory| Description | 899| ------ | ------ | ---- | ----------------------- | 900| points | Array\<[common2D.Point](js-apis-graphics-common2D.md#point)> | Yes | Array that holds the vertex coordinates of the polygon.| 901| 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.| 902 903**Error codes** 904 905For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 906 907| ID| Error Message| 908| ------- | --------------------------------------------| 909| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 910 911**Example** 912 913```ts 914import { common2D, drawing } from '@kit.ArkGraphics2D'; 915 916let pointsArray = new Array<common2D.Point>(); 917const point1: common2D.Point = { x: 200, y: 200 }; 918const point2: common2D.Point = { x: 400, y: 200 }; 919const point3: common2D.Point = { x: 100, y: 400 }; 920const point4: common2D.Point = { x: 300, y: 400 }; 921pointsArray.push(point1); 922pointsArray.push(point2); 923pointsArray.push(point3); 924pointsArray.push(point4); 925const path = new drawing.Path(); 926path.addPolygon(pointsArray, false); 927``` 928 929### offset<sup>12+</sup> 930 931offset(dx: number, dy: number): Path 932 933Offsets this path by specified distances along the X axis and Y axis and stores the resulting path in the **Path** object returned. 934 935**System capability**: SystemCapability.Graphics.Drawing 936 937**Parameters** 938 939| Name| Type | Mandatory| Description | 940| ------ | ------ | ---- | ----------------------- | 941| 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.| 942| 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.| 943 944**Return value** 945 946| Type | Description | 947| ------ | ------------------ | 948| [Path](#path) | New path generated.| 949 950**Error codes** 951 952For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 953 954| ID| Error Message| 955| ------- | --------------------------------------------| 956| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 957 958**Example** 959 960```ts 961import { drawing } from '@kit.ArkGraphics2D'; 962 963const path = new drawing.Path(); 964path.moveTo(200, 200); 965path.lineTo(300, 300); 966const dst = path.offset(200, 200); 967``` 968 969### op<sup>12+</sup> 970 971op(path: Path, pathOp: PathOp): boolean 972 973Combines this path with the passed-in path based on the specified operation mode. 974 975**System capability**: SystemCapability.Graphics.Drawing 976 977**Parameters** 978 979| Name| Type | Mandatory| Description | 980| ------ | ------ | ---- | ----------------------- | 981| path | [Path](#path) | Yes | Path object, which will be combined with the current path.| 982| pathOp | [PathOp](#pathop12) | Yes | Operation mode. | 983 984**Return value** 985 986| Type | Description | 987| ------ | ------------------ | 988| boolean | Result of the path combination result. The value **true** means that the path combination is successful, and **false** means the opposite.| 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(); 1004const path2 = new drawing.Path(); 1005path.addCircle(100, 200, 100, drawing.PathDirection.CLOCKWISE); 1006console.info("get pathOp: ", path2.op(path, drawing.PathOp.DIFFERENCE)); 1007``` 1008 1009### close 1010 1011close(): void 1012 1013Draws a line segment from the current point to the start point of this path. 1014 1015**System capability**: SystemCapability.Graphics.Drawing 1016 1017**Example** 1018 1019```ts 1020import { drawing } from '@kit.ArkGraphics2D'; 1021let path = new drawing.Path(); 1022path.moveTo(10,10); 1023path.cubicTo(10, 10, 10, 10, 15, 15); 1024path.close(); 1025``` 1026 1027### reset 1028 1029reset(): void 1030 1031Resets the path data. 1032 1033**System capability**: SystemCapability.Graphics.Drawing 1034 1035**Example** 1036 1037```ts 1038import { drawing } from '@kit.ArkGraphics2D'; 1039let path = new drawing.Path(); 1040path.moveTo(10,10); 1041path.cubicTo(10, 10, 10, 10, 15, 15); 1042path.reset(); 1043``` 1044 1045### getLength<sup>12+</sup> 1046 1047getLength(forceClosed: boolean): number 1048 1049Obtains the path length. 1050 1051**System capability**: SystemCapability.Graphics.Drawing 1052 1053**Parameters** 1054 1055| Name| Type | Mandatory| Description | 1056| ----- | ------ | ---- | --------- | 1057| 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.| 1058 1059**Return value** 1060 1061| Type | Description| 1062| ------ | ---- | 1063| number | Path length.| 1064 1065**Example** 1066 1067```ts 1068import { drawing } from '@kit.ArkGraphics2D' 1069let path = new drawing.Path(); 1070path.arcTo(20, 20, 180, 180, 180, 90); 1071let len = path.getLength(false); 1072console.info("path length = " + len); 1073``` 1074 1075### getPositionAndTangent<sup>12+</sup> 1076 1077getPositionAndTangent(forceClosed: boolean, distance: number, position: common2D.Point, tangent: common2D.Point): boolean 1078 1079Obtains the coordinates and tangent at a distance from the start point of this path. 1080 1081**System capability**: SystemCapability.Graphics.Drawing 1082 1083**Parameters** 1084 1085| Name | Type | Mandatory| Description | 1086| -------- | -------------------------------------------- | ---- | ------------------------------- | 1087| 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. | 1088| 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. | 1089| position | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | Coordinates obtained. | 1090| 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. | 1091 1092**Return value** 1093 1094| Type | Description | 1095| --------------------- | -------------- | 1096| 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.| 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 { common2D, drawing } from '@kit.ArkGraphics2D'; 1110let path: drawing.Path = new drawing.Path(); 1111path.moveTo(0, 0); 1112path.lineTo(0, 700); 1113path.lineTo(700, 0); 1114let position: common2D.Point = { x: 0.0, y: 0.0 }; 1115let tangent: common2D.Point = { x: 0.0, y: 0.0 }; 1116if (path.getPositionAndTangent(false, 0.1, position, tangent)) { 1117 console.info("getPositionAndTangent-----position: "+ position.x); 1118 console.info("getPositionAndTangent-----position: "+ position.y); 1119 console.info("getPositionAndTangent-----tangent: "+ tangent.x); 1120 console.info("getPositionAndTangent-----tangent: "+ tangent.y); 1121} 1122``` 1123 1124### isClosed<sup>12+</sup> 1125 1126isClosed(): boolean 1127 1128Checks whether a path is closed. 1129 1130**System capability**: SystemCapability.Graphics.Drawing 1131 1132**Return value** 1133 1134| Type | Description | 1135| --------------------- | -------------- | 1136| boolean | Check result. The value **true** means that the path is closed, and **false** means the opposite.| 1137 1138**Example** 1139 1140```ts 1141import { drawing } from '@kit.ArkGraphics2D'; 1142let path: drawing.Path = new drawing.Path(); 1143path.moveTo(0, 0); 1144path.lineTo(0, 700); 1145if (path.isClosed()) { 1146 console.info("path is closed."); 1147} else { 1148 console.info("path is not closed."); 1149} 1150``` 1151 1152### getMatrix<sup>12+</sup> 1153 1154getMatrix(forceClosed: boolean, distance: number, matrix: Matrix, flags: PathMeasureMatrixFlags): boolean 1155 1156Obtains a transformation matrix at a distance from the start point of this path. 1157 1158**System capability**: SystemCapability.Graphics.Drawing 1159 1160**Parameters** 1161 1162| Name | Type | Mandatory| Description | 1163| -------- | -------------------------------------------- | ---- | ------------------------------- | 1164| 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. | 1165| 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. | 1166| matrix | [Matrix](#matrix12) | Yes | **Matrix** object used to store the matrix obtained. | 1167| flags | [PathMeasureMatrixFlags](#pathmeasurematrixflags12) | Yes | Type of the matrix information obtained. | 1168 1169**Return value** 1170 1171| Type | Description | 1172| --------------------- | -------------- | 1173| boolean | Check result. The value **true** means that a transformation matrix is obtained, and **false** means the opposite.| 1174 1175**Error codes** 1176 1177For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1178 1179| ID| Error Message| 1180| ------- | --------------------------------------------| 1181| 401 | Parameter error. Possible causes: Mandatory parameters are left unspecified. | 1182 1183**Example** 1184 1185```ts 1186import { drawing } from '@kit.ArkGraphics2D'; 1187let path: drawing.Path = new drawing.Path(); 1188let matrix = new drawing.Matrix(); 1189if(path.getMatrix(false, 10, matrix, drawing.PathMeasureMatrixFlags.GET_TANGENT_MATRIX)) { 1190 console.info("path.getMatrix return true"); 1191} else { 1192 console.info("path.getMatrix return false"); 1193} 1194``` 1195 1196### buildFromSvgString<sup>12+</sup> 1197 1198buildFromSvgString(str: string): boolean 1199 1200Parses the path represented by an SVG string. 1201 1202**System capability**: SystemCapability.Graphics.Drawing 1203 1204**Parameters** 1205 1206| Name | Type | Mandatory| Description | 1207| -------- | -------------------------------------------- | ---- | ------------------------------- | 1208| str | string | Yes | String in SVG format, which is used to describe the path. | 1209 1210**Return value** 1211 1212| Type | Description | 1213| --------------------- | -------------- | 1214| boolean | Check result. The value **true** means that the parsing is successful, and **false** means the opposite.| 1215 1216**Error codes** 1217 1218For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1219 1220| ID| Error Message| 1221| ------- | --------------------------------------------| 1222| 401 | Parameter error. Possible causes: Mandatory parameters are left unspecified. | 1223 1224**Example** 1225 1226```ts 1227import { drawing } from '@kit.ArkGraphics2D'; 1228let path: drawing.Path = new drawing.Path(); 1229let svgStr: string = "M150 100 L75 300 L225 300 Z"; 1230if(path.buildFromSvgString(svgStr)) { 1231 console.info("buildFromSvgString return true"); 1232} else { 1233 console.info("buildFromSvgString return false"); 1234} 1235``` 1236 1237## Canvas 1238 1239A carrier that carries the drawn content and drawing status. 1240 1241> **NOTE** 1242> 1243> By default, the canvas has a black brush with anti-aliasing enabled but no any other style. This default brush takes effect only when no brush or pen is proactively set in the canvas. 1244 1245### constructor 1246 1247constructor(pixelmap: image.PixelMap) 1248 1249A constructor used to create a **Canvas** object. 1250 1251**System capability**: SystemCapability.Graphics.Drawing 1252 1253**Parameters** 1254 1255| Name | Type | Mandatory| Description | 1256| -------- | -------------------------------------------- | ---- | -------------- | 1257| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap used to create the object.| 1258 1259**Error codes** 1260 1261For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1262 1263| ID| Error Message| 1264| ------- | --------------------------------------------| 1265| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1266 1267**Example** 1268 1269```ts 1270import { drawing } from '@kit.ArkGraphics2D'; 1271import { image } from '@kit.ImageKit'; 1272const color = new ArrayBuffer(96); 1273let opts : image.InitializationOptions = { 1274 editable: true, 1275 pixelFormat: 3, 1276 size: { 1277 height: 4, 1278 width: 6 1279 } 1280} 1281image.createPixelMap(color, opts).then((pixelMap) => { 1282 const canvas = new drawing.Canvas(pixelMap); 1283}) 1284``` 1285 1286### drawRect 1287 1288drawRect(rect: common2D.Rect): void 1289 1290Draws a rectangle. By default, black is used for filling. 1291 1292**System capability**: SystemCapability.Graphics.Drawing 1293 1294**Parameters** 1295 1296| Name| Type | Mandatory| Description | 1297| ------ | -------------------------------------------------- | ---- | -------------- | 1298| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangle to draw.| 1299 1300**Error codes** 1301 1302For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1303 1304| ID| Error Message| 1305| ------- | --------------------------------------------| 1306| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1307 1308**Example** 1309 1310```ts 1311import { RenderNode } from '@kit.ArkUI'; 1312import { common2D, drawing } from '@kit.ArkGraphics2D'; 1313class DrawingRenderNode extends RenderNode { 1314 draw(context : DrawContext) { 1315 const canvas = context.canvas; 1316 const pen = new drawing.Pen(); 1317 pen.setStrokeWidth(5); 1318 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1319 canvas.attachPen(pen); 1320 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 1321 canvas.detachPen(); 1322 } 1323} 1324``` 1325 1326### drawRect<sup>12+</sup> 1327 1328drawRect(left: number, top: number, right: number, bottom: number): void 1329 1330Draws a rectangle. By default, black is used for filling. This API provides better performance than [drawRect](#drawrect) and is recommended. 1331 1332**System capability**: SystemCapability.Graphics.Drawing 1333 1334**Parameters** 1335 1336| Name| Type | Mandatory| Description | 1337| ------ | ------ | ---- | -------------- | 1338| left | number | Yes | X coordinate of the upper left corner of the rectangle. The value is a floating point number.| 1339| top | number | Yes | Y coordinate of the upper left corner of the rectangle. The value is a floating point number.| 1340| right | number | Yes | X coordinate of the lower right corner of the rectangle. The value is a floating point number.| 1341| bottom | number | Yes | Y coordinate of the lower right corner of the rectangle. The value is a floating point number.| 1342 1343**Error codes** 1344 1345For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1346 1347| ID| Error Message| 1348| ------- | --------------------------------------------| 1349| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1350 1351**Example** 1352 1353```ts 1354import { RenderNode } from '@kit.ArkUI'; 1355import { drawing } from '@kit.ArkGraphics2D'; 1356class DrawingRenderNode extends RenderNode { 1357 1358 draw(context : DrawContext) { 1359 const canvas = context.canvas; 1360 const pen = new drawing.Pen(); 1361 pen.setStrokeWidth(5); 1362 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1363 canvas.attachPen(pen); 1364 canvas.drawRect(0, 0, 10, 10); 1365 canvas.detachPen(); 1366 } 1367} 1368``` 1369 1370### drawRoundRect<sup>12+</sup> 1371 1372drawRoundRect(roundRect: RoundRect): void 1373 1374Draws a rounded rectangle. 1375 1376**System capability**: SystemCapability.Graphics.Drawing 1377 1378**Parameters** 1379 1380| Name | Type | Mandatory| Description | 1381| ---------- | ----------------------- | ---- | ------------ | 1382| roundRect | [RoundRect](#roundrect12) | Yes | Rounded rectangle.| 1383 1384**Error codes** 1385 1386For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1387 1388| ID| Error Message| 1389| ------- | --------------------------------------------| 1390| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1391 1392**Example** 1393 1394```ts 1395import { RenderNode } from '@kit.ArkUI'; 1396import { common2D, drawing } from '@kit.ArkGraphics2D'; 1397class DrawingRenderNode extends RenderNode { 1398 draw(context : DrawContext) { 1399 const canvas = context.canvas; 1400 let rect: common2D.Rect = { left : 100, top : 100, right : 400, bottom : 500 }; 1401 let roundRect = new drawing.RoundRect(rect, 10, 10); 1402 canvas.drawRoundRect(roundRect); 1403 } 1404} 1405``` 1406 1407### drawNestedRoundRect<sup>12+</sup> 1408 1409drawNestedRoundRect(outer: RoundRect, inner: RoundRect): void 1410 1411Draws two nested rounded rectangles. The outer rectangle boundary must contain the inner rectangle boundary. Otherwise, there is no drawing effect. 1412 1413**System capability**: SystemCapability.Graphics.Drawing 1414 1415**Parameters** 1416 1417| Name | Type | Mandatory| Description | 1418| ------ | ----------------------- | ---- | ------------ | 1419| outer | [RoundRect](#roundrect12) | Yes | Outer rounded rectangle.| 1420| inner | [RoundRect](#roundrect12) | Yes | Inner rounded rectangle.| 1421 1422**Error codes** 1423 1424For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1425 1426| ID| Error Message| 1427| ------- | --------------------------------------------| 1428| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1429 1430**Example** 1431 1432```ts 1433import { RenderNode } from '@kit.ArkUI'; 1434import { common2D, drawing } from '@kit.ArkGraphics2D'; 1435class DrawingRenderNode extends RenderNode { 1436 draw(context : DrawContext) { 1437 const canvas = context.canvas; 1438 let inRect: common2D.Rect = { left : 200, top : 200, right : 400, bottom : 500 }; 1439 let outRect: common2D.Rect = { left : 100, top : 100, right : 400, bottom : 500 }; 1440 let outRoundRect = new drawing.RoundRect(outRect, 10, 10); 1441 let inRoundRect = new drawing.RoundRect(inRect, 10, 10); 1442 canvas.drawNestedRoundRect(outRoundRect, inRoundRect); 1443 canvas.drawRoundRect(outRoundRect); 1444 } 1445} 1446``` 1447 1448### drawBackground<sup>12+</sup> 1449 1450drawBackground(brush: Brush): void 1451 1452Uses a brush to fill the drawable area of the canvas. 1453 1454**System capability**: SystemCapability.Graphics.Drawing 1455 1456**Parameters** 1457 1458| Name| Type | Mandatory| Description | 1459| ------ | --------------- | ---- | ---------- | 1460| brush | [Brush](#brush) | Yes | **Brush** object.| 1461 1462**Error codes** 1463 1464For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1465 1466| ID| Error Message| 1467| ------- | --------------------------------------------| 1468| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1469 1470**Example** 1471 1472```ts 1473import { RenderNode } from '@kit.ArkUI'; 1474import { common2D, drawing } from '@kit.ArkGraphics2D'; 1475class DrawingRenderNode extends RenderNode { 1476 draw(context : DrawContext) { 1477 const canvas = context.canvas; 1478 const brush = new drawing.Brush(); 1479 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 1480 brush.setColor(color); 1481 canvas.drawBackground(brush); 1482 } 1483} 1484``` 1485 1486### drawShadow<sup>12+</sup> 1487 1488drawShadow(path: Path, planeParams: common2D.Point3d, devLightPos: common2D.Point3d, lightRadius: number, ambientColor: common2D.Color, spotColor: common2D.Color, flag: ShadowFlag) : void 1489 1490Draws a spot shadow and uses a given path to outline the ambient shadow. 1491 1492**System capability**: SystemCapability.Graphics.Drawing 1493 1494**Parameters** 1495 1496| Name | Type | Mandatory | Description | 1497| ------------ | ---------------------------------------- | ---- | ---------- | 1498| path | [Path](#path) | Yes | **Path** object, which is used to outline the shadow.| 1499| 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.| 1500| devLightPos | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | Yes | Position of the light relative to the canvas.| 1501| lightRadius | number | Yes | Radius of the light. The value is a floating point number. | 1502| ambientColor | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color of the ambient shadow.| 1503| spotColor | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color of the spot shadow.| 1504| flag | [ShadowFlag](#shadowflag12) | Yes | Shadow flag. | 1505 1506**Error codes** 1507 1508For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1509 1510| ID| Error Message| 1511| ------- | --------------------------------------------| 1512| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 1513 1514**Example** 1515 1516```ts 1517import { RenderNode } from '@kit.ArkUI'; 1518import { common2D, drawing } from '@kit.ArkGraphics2D'; 1519class DrawingRenderNode extends RenderNode { 1520 draw(context : DrawContext) { 1521 const canvas = context.canvas; 1522 const path = new drawing.Path(); 1523 path.addCircle(100, 200, 100, drawing.PathDirection.CLOCKWISE); 1524 let pen = new drawing.Pen(); 1525 pen.setAntiAlias(true); 1526 let pen_color : common2D.Color = { alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00 }; 1527 pen.setColor(pen_color); 1528 pen.setStrokeWidth(10.0); 1529 canvas.attachPen(pen); 1530 let brush = new drawing.Brush(); 1531 let brush_color : common2D.Color = { alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00 }; 1532 brush.setColor(brush_color); 1533 canvas.attachBrush(brush); 1534 let point1 : common2D.Point3d = {x: 100, y: 80, z:80}; 1535 let point2 : common2D.Point3d = {x: 200, y: 10, z:40}; 1536 let color1 : common2D.Color = {alpha: 0xFF, red:0, green:0, blue:0xFF}; 1537 let color2 : common2D.Color = {alpha: 0xFF, red:0xFF, green:0, blue:0}; 1538 let shadowFlag : drawing.ShadowFlag = drawing.ShadowFlag.ALL; 1539 canvas.drawShadow(path, point1, point2, 30, color1, color2, shadowFlag); 1540 } 1541} 1542``` 1543 1544### getLocalClipBounds<sup>12+</sup> 1545 1546getLocalClipBounds(): common2D.Rect 1547 1548Obtains the bounds of the cropping region of the canvas. 1549 1550**System capability**: SystemCapability.Graphics.Drawing 1551 1552**Return value** 1553 1554| Type | Description | 1555| ---------------------------------------- | -------- | 1556| [common2D.Rect](js-apis-graphics-common2D.md#rect) | Bounds of the cropping region.| 1557 1558**Example** 1559 1560```ts 1561import { RenderNode } from '@kit.ArkUI'; 1562import { common2D, drawing } from '@kit.ArkGraphics2D'; 1563class DrawingRenderNode extends RenderNode { 1564 draw(context : DrawContext) { 1565 const canvas = context.canvas; 1566 let clipRect: common2D.Rect = { 1567 left : 150, top : 150, right : 300, bottom : 400 1568 }; 1569 canvas.clipRect(clipRect,drawing.ClipOp.DIFFERENCE, true); 1570 console.info("test rect.left: " + clipRect.left); 1571 console.info("test rect.top: " + clipRect.top); 1572 console.info("test rect.right: " + clipRect.right); 1573 console.info("test rect.bottom: " + clipRect.bottom); 1574 canvas.getLocalClipBounds(); 1575 } 1576} 1577``` 1578 1579### getTotalMatrix<sup>12+</sup> 1580 1581getTotalMatrix(): Matrix 1582 1583Obtains the canvas matrix. 1584 1585**System capability**: SystemCapability.Graphics.Drawing 1586 1587**Return value** 1588 1589| Type | Description | 1590| ----------------- | -------- | 1591| [Matrix](#matrix12) |Canvas matrix.| 1592 1593**Example** 1594 1595```ts 1596import { RenderNode } from '@kit.ArkUI'; 1597import { drawing } from '@kit.ArkGraphics2D'; 1598class DrawingRenderNode extends RenderNode { 1599 draw(context : DrawContext) { 1600 const canvas = context.canvas; 1601 let matrix = new drawing.Matrix(); 1602 matrix.setMatrix([5, 0, 0, 0, 1, 1, 0, 0, 1]); 1603 canvas.setMatrix(matrix); 1604 let matrixResult =canvas.getTotalMatrix(); 1605 } 1606} 1607``` 1608 1609### drawCircle 1610 1611drawCircle(x: number, y: number, radius: number): void 1612 1613Draws a circle. If the radius is less than or equal to zero, nothing is drawn. By default, black is used for filling. 1614 1615**System capability**: SystemCapability.Graphics.Drawing 1616 1617**Parameters** 1618 1619| Name| Type | Mandatory| Description | 1620| ------ | ------ | ---- | ------------------- | 1621| x | number | Yes | X coordinate of the center of the circle. The value is a floating point number.| 1622| y | number | Yes | Y coordinate of the center of the circle. The value is a floating point number.| 1623| radius | number | Yes | Radius of the circle. The value is a floating point number greater than 0.| 1624 1625**Error codes** 1626 1627For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1628 1629| ID| Error Message| 1630| ------- | --------------------------------------------| 1631| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 1632 1633**Example** 1634 1635```ts 1636import { RenderNode } from '@kit.ArkUI'; 1637import { drawing } from '@kit.ArkGraphics2D'; 1638class DrawingRenderNode extends RenderNode { 1639 draw(context : DrawContext) { 1640 const canvas = context.canvas; 1641 const pen = new drawing.Pen(); 1642 pen.setStrokeWidth(5); 1643 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1644 canvas.attachPen(pen); 1645 canvas.drawCircle(10, 10, 2); 1646 canvas.detachPen(); 1647 } 1648} 1649``` 1650 1651### drawImage 1652 1653drawImage(pixelmap: image.PixelMap, left: number, top: number, samplingOptions?: SamplingOptions): void 1654 1655Draws an image. The coordinates of the upper left corner of the image are (left, top). 1656 1657**System capability**: SystemCapability.Graphics.Drawing 1658 1659**Parameters** 1660 1661| Name | Type | Mandatory| Description | 1662| -------- | -------------------------------------------- | ---- | ------------------------------- | 1663| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap. | 1664| left | number | Yes | X coordinate of the upper left corner of the image. The value is a floating point number.| 1665| top | number | Yes | Y coordinate of the upper left corner of the image. The value is a floating point number.| 1666| samplingOptions<sup>12+</sup> | [SamplingOptions](#samplingoptions12) | No | Sampling options. By default, the **SamplingOptions** object created using the no-argument constructor is used.| 1667 1668**Error codes** 1669 1670For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1671 1672| ID| Error Message| 1673| ------- | --------------------------------------------| 1674| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1675 1676**Example** 1677 1678```ts 1679import { RenderNode } from '@kit.ArkUI'; 1680import { image } from '@kit.ImageKit'; 1681import { drawing } from '@kit.ArkGraphics2D'; 1682class DrawingRenderNode extends RenderNode { 1683 pixelMap: image.PixelMap | null = null; 1684 1685 async draw(context : DrawContext) { 1686 const canvas = context.canvas; 1687 let options = new drawing.SamplingOptions(drawing.FilterMode.FILTER_MODE_NEAREST); 1688 if (this.pixelMap != null) { 1689 canvas.drawImage(this.pixelMap, 0, 0, options); 1690 } 1691 } 1692} 1693``` 1694 1695### drawImageRect<sup>12+</sup> 1696 1697drawImageRect(pixelmap: image.PixelMap, dstRect: common2D.Rect, samplingOptions?: SamplingOptions): void 1698 1699Draws an image onto a specified area of the canvas. 1700 1701**System capability**: SystemCapability.Graphics.Drawing 1702 1703**Parameters** 1704 1705| Name | Type | Mandatory| Description | 1706| -------- | -------------------------------------------- | ---- | ------------------------------- | 1707| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap. | 1708| 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.| 1709| samplingOptions | [SamplingOptions](#samplingoptions12) | No | Sampling options. By default, the **SamplingOptions** object created using the no-argument constructor is used.| 1710 1711**Error codes** 1712 1713For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1714 1715| ID| Error Message| 1716| ------- | --------------------------------------------| 1717| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1718 1719**Example** 1720 1721```ts 1722import { RenderNode } from '@kit.ArkUI'; 1723import { image } from '@kit.ImageKit'; 1724import { common2D, drawing } from '@kit.ArkGraphics2D'; 1725class DrawingRenderNode extends RenderNode { 1726pixelMap: image.PixelMap | null = null; 1727 draw(context : DrawContext) { 1728 const canvas = context.canvas; 1729 let pen = new drawing.Pen(); 1730 canvas.attachPen(pen); 1731 let rect: common2D.Rect = { left: 0, top: 0, right: 200, bottom: 200 }; 1732 canvas.drawImageRect(this.pixelMap, rect); 1733 canvas.detachPen(); 1734 } 1735} 1736``` 1737 1738### drawImageRectWithSrc<sup>12+</sup> 1739 1740drawImageRectWithSrc(pixelmap: image.PixelMap, srcRect: common2D.Rect, dstRect: common2D.Rect, samplingOptions?: SamplingOptions, constraint?: SrcRectConstraint): void 1741 1742Draws a portion of an image onto a specified area of the canvas. 1743 1744**System capability**: SystemCapability.Graphics.Drawing 1745 1746**Parameters** 1747 1748| Name | Type | Mandatory| Description | 1749| -------- | -------------------------------------------- | ---- | ------------------------------- | 1750| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap. | 1751| srcRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | **Rectangle** object, which specifies the portion of the image to draw.| 1752| 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.| 1753| samplingOptions | [SamplingOptions](#samplingoptions12) | No | Sampling options. By default, the **SamplingOptions** object created using the no-argument constructor is used.| 1754| constraint | [SrcRectConstraint](#srcrectconstraint12) | No | Constraint type of the source rectangle. The default value is **STRICT**.| 1755 1756**Error codes** 1757 1758For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1759 1760| ID| Error Message| 1761| ------- | --------------------------------------------| 1762| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1763 1764**Example** 1765 1766```ts 1767import { RenderNode } from '@kit.ArkUI'; 1768import { image } from '@kit.ImageKit'; 1769import { common2D, drawing } from '@kit.ArkGraphics2D'; 1770class DrawingRenderNode extends RenderNode { 1771pixelMap: image.PixelMap | null = null; 1772 draw(context : DrawContext) { 1773 const canvas = context.canvas; 1774 let pen = new drawing.Pen(); 1775 canvas.attachPen(pen); 1776 let srcRect: common2D.Rect = { left: 0, top: 0, right: 100, bottom: 100 }; 1777 let dstRect: common2D.Rect = { left: 100, top: 100, right: 200, bottom: 200 }; 1778 canvas.drawImageRectWithSrc(this.pixelMap, srcRect, dstRect); 1779 canvas.detachPen(); 1780 } 1781} 1782``` 1783 1784### drawColor 1785 1786drawColor(color: common2D.Color, blendMode?: BlendMode): void 1787 1788Draws the background color. 1789 1790**System capability**: SystemCapability.Graphics.Drawing 1791 1792**Parameters** 1793 1794| Name | Type | Mandatory| Description | 1795| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 1796| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. Each color channel is an integer ranging from 0 to 255. | 1797| blendMode | [BlendMode](#blendmode) | No | Blend mode. The default mode is **SRC_OVER**.| 1798 1799**Error codes** 1800 1801For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1802 1803| ID| Error Message| 1804| ------- | --------------------------------------------| 1805| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 1806 1807**Example** 1808 1809```ts 1810import { RenderNode } from '@kit.ArkUI'; 1811import { common2D, drawing } from '@kit.ArkGraphics2D'; 1812class DrawingRenderNode extends RenderNode { 1813 draw(context : DrawContext) { 1814 const canvas = context.canvas; 1815 let color: common2D.Color = { 1816 alpha : 255, 1817 red: 0, 1818 green: 10, 1819 blue: 10 1820 } 1821 canvas.drawColor(color, drawing.BlendMode.CLEAR); 1822 } 1823} 1824``` 1825 1826### drawColor<sup>12+</sup> 1827 1828drawColor(alpha: number, red: number, green: number, blue: number, blendMode?: BlendMode): void 1829 1830Draws the background color. This API provides better performance than [drawColor](#drawcolor) and is recommended. 1831 1832**System capability**: SystemCapability.Graphics.Drawing 1833 1834**Parameters** 1835 1836| Name | Type | Mandatory| Description | 1837| --------- | ----------------------- | ---- | ------------------------------------------------- | 1838| 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.| 1839| 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. | 1840| 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. | 1841| 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. | 1842| blendMode | [BlendMode](#blendmode) | No | Blend mode. The default mode is **SRC_OVER**. | 1843 1844**Error codes** 1845 1846For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1847 1848| ID| Error Message| 1849| ------- | --------------------------------------------| 1850| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 1851 1852**Example** 1853 1854```ts 1855import { RenderNode } from '@kit.ArkUI'; 1856import { drawing } from '@kit.ArkGraphics2D'; 1857class DrawingRenderNode extends RenderNode { 1858 draw(context : DrawContext) { 1859 const canvas = context.canvas; 1860 canvas.drawColor(255, 0, 10, 10, drawing.BlendMode.CLEAR); 1861 } 1862} 1863``` 1864 1865### drawPixelMapMesh<sup>12+</sup> 1866 1867drawPixelMapMesh(pixelmap: image.PixelMap, meshWidth: number, meshHeight: number, vertices: Array\<number>, vertOffset: number, colors: Array\<number>, colorOffset: number): void 1868 1869Draws a PixelMap based on a mesh, where mesh vertices are evenly distributed across the PixelMap. 1870 1871**System capability**: SystemCapability.Graphics.Drawing 1872 1873**Parameters** 1874 1875| Name | Type | Mandatory| Description | 1876| ----------- | ------------- | ---- | ------------------------------- | 1877| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | PixelMap to draw.| 1878| meshWidth | number | Yes | Number of columns in the mesh. The value is an integer greater than 0.| 1879| meshHeight | number | Yes | Number of rows in the mesh. The value is an integer greater than 0.| 1880| 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.| 1881| vertOffset | number | Yes | Number of vert elements to skip before drawing. The value is an integer greater than or equal to 0.| 1882| 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.| 1883| colorOffset | number | Yes | Number of color elements to skip before drawing. The value is an integer greater than or equal to 0.| 1884 1885**Error codes** 1886 1887For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1888 1889| ID| Error Message| 1890| ------- | --------------------------------------------| 1891| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1892 1893**Example** 1894 1895```ts 1896import { RenderNode } from '@kit.ArkUI'; 1897import { image } from '@kit.ImageKit'; 1898import { drawing } from '@kit.ArkGraphics2D'; 1899class DrawingRenderNode extends RenderNode { 1900 pixelMap: image.PixelMap | null = null; 1901 1902 async draw(context : DrawContext) { 1903 const canvas = context.canvas; 1904 if (this.pixelMap != null) { 1905 const brush = new drawing.Brush(); // Only brush is supported. There is no drawing effect when pen is used. 1906 canvas.attachBrush(brush); 1907 let verts : Array<number> = [0, 0, 50, 0, 410, 0, 0, 180, 50, 180, 410, 180, 0, 360, 50, 360, 410, 360]; // 18 1908 canvas.drawPixelMapMesh(this.pixelMap, 2, 2, verts, 0, null, 0); 1909 canvas.detachBrush(); 1910 } 1911 } 1912} 1913``` 1914 1915### clear<sup>12+</sup> 1916 1917clear(color: common2D.Color): void 1918 1919Clears the canvas with a given color. 1920 1921**System capability**: SystemCapability.Graphics.Drawing 1922 1923**Parameters** 1924 1925| Name | Type | Mandatory| Description | 1926| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 1927| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. Each color channel is an integer ranging from 0 to 255. | 1928 1929**Error codes** 1930 1931For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 1932 1933| ID| Error Message| 1934| ------- | --------------------------------------------| 1935| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1936 1937**Example** 1938 1939```ts 1940import { RenderNode } from '@kit.ArkUI'; 1941import { common2D, drawing } from '@kit.ArkGraphics2D'; 1942class DrawingRenderNode extends RenderNode { 1943 draw(context : DrawContext) { 1944 const canvas = context.canvas; 1945 let color: common2D.Color = {alpha: 255, red: 255, green: 0, blue: 0}; 1946 canvas.clear(color); 1947 } 1948} 1949``` 1950 1951### getWidth<sup>12+</sup> 1952 1953getWidth(): number 1954 1955Obtains the canvas width. 1956 1957**System capability**: SystemCapability.Graphics.Drawing 1958 1959**Return value** 1960 1961| Type | Mandatory| Description | 1962| ------ | ---- | -------------- | 1963| number | Yes | Canvas width. The value is a floating point number.| 1964 1965**Example** 1966 1967```ts 1968import { RenderNode } from '@kit.ArkUI'; 1969import { drawing } from '@kit.ArkGraphics2D'; 1970class DrawingRenderNode extends RenderNode { 1971 draw(context : DrawContext) { 1972 const canvas = context.canvas; 1973 let width = canvas.getWidth(); 1974 console.info('get canvas width:' + width); 1975 } 1976} 1977``` 1978 1979### getHeight<sup>12+</sup> 1980 1981getHeight(): number 1982 1983Obtains the canvas height. 1984 1985**System capability**: SystemCapability.Graphics.Drawing 1986 1987**Return value** 1988 1989| Type | Mandatory| Description | 1990| ------ | ---- | -------------- | 1991| number | Yes | Canvas height. The value is a floating point number.| 1992 1993**Example** 1994 1995```ts 1996import { RenderNode } from '@kit.ArkUI'; 1997import { drawing } from '@kit.ArkGraphics2D'; 1998class DrawingRenderNode extends RenderNode { 1999 draw(context : DrawContext) { 2000 const canvas = context.canvas; 2001 let height = canvas.getHeight(); 2002 console.log('get canvas height:' + height); 2003 } 2004} 2005``` 2006 2007### drawOval<sup>12+</sup> 2008 2009drawOval(oval: common2D.Rect): void 2010 2011Draws an oval on the canvas. The shape and position of the oval are defined by the rectangle parameters that specify the oval boundary. 2012 2013**System capability**: SystemCapability.Graphics.Drawing 2014 2015**Parameters** 2016 2017| Name| Type | Mandatory| Description | 2018| ------ | -------------------------------------------------- | ---- | -------------- | 2019| oval | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangle. The oval inscribed within the rectangle is the oval to draw.| 2020 2021**Error codes** 2022 2023For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2024 2025| ID| Error Message| 2026| ------- | --------------------------------------------| 2027| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2028 2029**Example** 2030 2031```ts 2032import { RenderNode } from '@kit.ArkUI'; 2033import { common2D, drawing } from '@kit.ArkGraphics2D'; 2034class DrawingRenderNode extends RenderNode { 2035 draw(context : DrawContext) { 2036 const canvas = context.canvas; 2037 const pen = new drawing.Pen(); 2038 pen.setStrokeWidth(5); 2039 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 2040 pen.setColor(color); 2041 canvas.attachPen(pen); 2042 const rect: common2D.Rect = {left:100, top:50, right:400, bottom:500}; 2043 canvas.drawOval(rect); 2044 canvas.detachPen(); 2045 } 2046} 2047``` 2048 2049### drawArc<sup>12+</sup> 2050 2051drawArc(arc: common2D.Rect, startAngle: number, sweepAngle: number): void 2052 2053Draws 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. 2054 2055**System capability**: SystemCapability.Graphics.Drawing 2056 2057**Parameters** 2058 2059| Name| Type | Mandatory| Description | 2060| ------ | -------------------------------------------------- | ---- | -------------- | 2061| arc | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangular boundary that encapsulates the oval including the arc.| 2062| 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.| 2063| 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.| 2064 2065**Error codes** 2066 2067For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2068 2069| ID| Error Message| 2070| ------- | --------------------------------------------| 2071| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2072 2073**Example** 2074 2075```ts 2076import { RenderNode } from '@kit.ArkUI'; 2077import { common2D, drawing } from '@kit.ArkGraphics2D'; 2078class DrawingRenderNode extends RenderNode { 2079 draw(context : DrawContext) { 2080 const canvas = context.canvas; 2081 const pen = new drawing.Pen(); 2082 pen.setStrokeWidth(5); 2083 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 2084 pen.setColor(color); 2085 canvas.attachPen(pen); 2086 const rect: common2D.Rect = {left:100, top:50, right:400, bottom:200}; 2087 canvas.drawArc(rect, 90, 180); 2088 canvas.detachPen(); 2089 } 2090} 2091``` 2092 2093### drawPoint 2094 2095drawPoint(x: number, y: number): void 2096 2097Draws a point. 2098 2099**System capability**: SystemCapability.Graphics.Drawing 2100 2101**Parameters** 2102 2103| Name| Type | Mandatory| Description | 2104| ------ | ------ | ---- | ------------------- | 2105| x | number | Yes | X coordinate of the point. The value is a floating point number.| 2106| y | number | Yes | Y coordinate of the point. The value is a floating point number.| 2107 2108**Error codes** 2109 2110For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2111 2112| ID| Error Message| 2113| ------- | --------------------------------------------| 2114| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2115 2116**Example** 2117 2118```ts 2119import { RenderNode } from '@kit.ArkUI'; 2120import { drawing } from '@kit.ArkGraphics2D'; 2121class DrawingRenderNode extends RenderNode { 2122 draw(context : DrawContext) { 2123 const canvas = context.canvas; 2124 const pen = new drawing.Pen(); 2125 pen.setStrokeWidth(5); 2126 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2127 canvas.attachPen(pen); 2128 canvas.drawPoint(10, 10); 2129 canvas.detachPen(); 2130 } 2131} 2132``` 2133 2134### drawPoints<sup>12+</sup> 2135 2136drawPoints(points: Array\<common2D.Point>, mode?: PointMode): void 2137 2138Draws a group of points, line segments, or polygons on the canvas, with the specified drawing mode. An array is used to hold these points. 2139 2140**System capability**: SystemCapability.Graphics.Drawing 2141 2142**Parameters** 2143 2144| Name | Type | Mandatory | Description | 2145| ---- | ---------------------------------------- | ---- | --------- | 2146| points | Array\<[common2D.Point](js-apis-graphics-common2D.md#point)> | Yes | Array that holds the points to draw. The length cannot be 0. | 2147| mode | [PointMode](#pointmode12) | No | Mode in which the points are drawn. The default value is **drawing.PointMode.POINTS**.| 2148 2149**Error codes** 2150 2151For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2152 2153| ID| Error Message| 2154| ------- | --------------------------------------------| 2155| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 2156 2157**Example** 2158 2159```ts 2160import { RenderNode } from '@kit.ArkUI'; 2161import { common2D, drawing } from '@kit.ArkGraphics2D'; 2162class DrawingRenderNode extends RenderNode { 2163 draw(context : DrawContext) { 2164 const canvas = context.canvas; 2165 const pen = new drawing.Pen(); 2166 pen.setStrokeWidth(30); 2167 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 2168 pen.setColor(color); 2169 canvas.attachPen(pen); 2170 canvas.drawPoints([{x: 100, y: 200}, {x: 150, y: 230}, {x: 200, y: 300}], drawing.PointMode.POINTS); 2171 canvas.detachPen(); 2172 } 2173} 2174``` 2175 2176### drawPath 2177 2178drawPath(path: Path): void 2179 2180Draws a custom path, which contains a set of path outlines. Each path outline can be open or closed. 2181 2182**System capability**: SystemCapability.Graphics.Drawing 2183 2184**Parameters** 2185 2186| Name| Type | Mandatory| Description | 2187| ------ | ------------- | ---- | ------------------ | 2188| path | [Path](#path) | Yes | **Path** object to draw.| 2189 2190**Error codes** 2191 2192For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2193 2194| ID| Error Message| 2195| ------- | --------------------------------------------| 2196| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2197 2198**Example** 2199 2200```ts 2201import { RenderNode } from '@kit.ArkUI'; 2202import { drawing } from '@kit.ArkGraphics2D'; 2203class DrawingRenderNode extends RenderNode { 2204 draw(context : DrawContext) { 2205 const canvas = context.canvas; 2206 const pen = new drawing.Pen(); 2207 pen.setStrokeWidth(5); 2208 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2209 let path = new drawing.Path(); 2210 path.moveTo(10,10); 2211 path.cubicTo(10, 10, 10, 10, 15, 15); 2212 path.close(); 2213 canvas.attachPen(pen); 2214 canvas.drawPath(path); 2215 canvas.detachPen(); 2216 } 2217} 2218``` 2219 2220### drawLine 2221 2222drawLine(x0: number, y0: number, x1: number, y1: number): void 2223 2224Draws 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. 2225 2226**System capability**: SystemCapability.Graphics.Drawing 2227 2228**Parameters** 2229 2230| Name| Type | Mandatory| Description | 2231| ------ | ------ | ---- | ----------------------- | 2232| x0 | number | Yes | X coordinate of the start point of the line segment. The value is a floating point number.| 2233| y0 | number | Yes | Y coordinate of the start point of the line segment. The value is a floating point number.| 2234| x1 | number | Yes | X coordinate of the end point of the line segment. The value is a floating point number.| 2235| y1 | number | Yes | Y coordinate of the end point of the line segment. The value is a floating point number.| 2236 2237**Error codes** 2238 2239For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2240 2241| ID| Error Message| 2242| ------- | --------------------------------------------| 2243| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2244 2245**Example** 2246 2247```ts 2248import { RenderNode } from '@kit.ArkUI'; 2249import { drawing } from '@kit.ArkGraphics2D'; 2250class DrawingRenderNode extends RenderNode { 2251 draw(context : DrawContext) { 2252 const canvas = context.canvas; 2253 const pen = new drawing.Pen(); 2254 pen.setStrokeWidth(5); 2255 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2256 canvas.attachPen(pen); 2257 canvas.drawLine(0, 0, 20, 20); 2258 canvas.detachPen(); 2259 } 2260} 2261``` 2262 2263### drawTextBlob 2264 2265drawTextBlob(blob: TextBlob, x: number, y: number): void 2266 2267Draws a text blob. If the typeface used to construct **blob** does not support a character, that character will not be drawn. 2268 2269**System capability**: SystemCapability.Graphics.Drawing 2270 2271**Parameters** 2272 2273| Name| Type | Mandatory| Description | 2274| ------ | --------------------- | ---- | ------------------------------------------ | 2275| blob | [TextBlob](#textblob) | Yes | **TextBlob** object. | 2276| 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.| 2277| 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.| 2278 2279 2280 2281**Error codes** 2282 2283For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2284 2285| ID| Error Message| 2286| ------- | --------------------------------------------| 2287| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2288 2289**Example** 2290 2291```ts 2292import { RenderNode } from '@kit.ArkUI'; 2293import { drawing } from '@kit.ArkGraphics2D'; 2294class DrawingRenderNode extends RenderNode { 2295 draw(context : DrawContext) { 2296 const canvas = context.canvas; 2297 const brush = new drawing.Brush(); 2298 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2299 const font = new drawing.Font(); 2300 font.setSize(20); 2301 const textBlob = drawing.TextBlob.makeFromString("Hello, drawing", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 2302 canvas.attachBrush(brush); 2303 canvas.drawTextBlob(textBlob, 20, 20); 2304 canvas.detachBrush(); 2305 } 2306} 2307``` 2308 2309### drawSingleCharacter<sup>12+</sup> 2310 2311drawSingleCharacter(text: string, font: Font, x: number, y: number): void 2312 2313Draws 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. 2314 2315**System capability**: SystemCapability.Graphics.Drawing 2316 2317**Parameters** 2318 2319| Name| Type | Mandatory| Description | 2320| ------ | ------------------- | ---- | ----------- | 2321| text | string | Yes | Single character to draw. The length of the string must be 1. | 2322| font | [Font](#font) | Yes | **Font** object. | 2323| 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.| 2324| 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.| 2325 2326 2327 2328**Error codes** 2329 2330For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2331 2332| ID| Error Message| 2333| ------- | --------------------------------------------| 2334| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2335 2336**Example** 2337 2338```ts 2339import { RenderNode } from '@kit.ArkUI'; 2340import { drawing } from '@kit.ArkGraphics2D'; 2341 2342class DrawingRenderNode extends RenderNode { 2343 draw(context : DrawContext) { 2344 const canvas = context.canvas; 2345 const brush = new drawing.Brush(); 2346 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2347 const font = new drawing.Font(); 2348 font.setSize(20); 2349 canvas.attachBrush(brush); 2350 canvas.drawSingleCharacter ("Hello", font, 100, 100); 2351 canvas.drawSingleCharacter ("drawing", font, 120, 100); 2352 canvas.detachBrush(); 2353 } 2354} 2355``` 2356 2357### drawRegion<sup>12+</sup> 2358 2359drawRegion(region: Region): void 2360 2361Draws a region. 2362 2363**System capability**: SystemCapability.Graphics.Drawing 2364 2365**Parameters** 2366 2367| Name| Type | Mandatory| Description | 2368| ------ | ------------------- | ---- | ----------- | 2369| region | [Region](#region12) | Yes | Region to draw. | 2370 2371**Error codes** 2372 2373For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2374 2375| ID| Error Message| 2376| ------- | --------------------------------------------| 2377| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2378 2379**Example** 2380 2381```ts 2382import { RenderNode } from '@kit.ArkUI'; 2383class DrawingRenderNode extends RenderNode { 2384 draw(context : DrawContext) { 2385 const canvas = context.canvas; 2386 const pen = new drawing.Pen(); 2387 let region = new drawing.Region(); 2388 pen.setStrokeWidth(10); 2389 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 2390 canvas.attachPen(pen); 2391 region.setRect(100, 100, 400, 400); 2392 canvas.drawRegion(region); 2393 canvas.detachPen(); 2394 } 2395} 2396``` 2397 2398### attachPen 2399 2400attachPen(pen: Pen): void 2401 2402Attaches a pen to a canvas so that the canvas can use the style and color of the pen to outline a shape. 2403 2404> **NOTE** 2405> 2406> 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. 2407 2408**System capability**: SystemCapability.Graphics.Drawing 2409 2410**Parameters** 2411 2412| Name| Type | Mandatory| Description | 2413| ------ | ----------- | ---- | ---------- | 2414| pen | [Pen](#pen) | Yes | **Pen** object.| 2415 2416**Error codes** 2417 2418For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2419 2420| ID| Error Message| 2421| ------- | --------------------------------------------| 2422| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2423 2424**Example** 2425 2426```ts 2427import { RenderNode } from '@kit.ArkUI'; 2428import { drawing } from '@kit.ArkGraphics2D'; 2429class DrawingRenderNode extends RenderNode { 2430 draw(context : DrawContext) { 2431 const canvas = context.canvas; 2432 const pen = new drawing.Pen(); 2433 pen.setStrokeWidth(5); 2434 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2435 canvas.attachPen(pen); 2436 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 2437 canvas.detachPen(); 2438 } 2439} 2440``` 2441 2442### attachBrush 2443 2444attachBrush(brush: Brush): void 2445 2446Attaches a brush to a canvas so that the canvas can use the style and color of the brush to fill in a shape. 2447 2448> **NOTE** 2449> 2450> 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. 2451 2452**System capability**: SystemCapability.Graphics.Drawing 2453 2454**Parameters** 2455 2456| Name| Type | Mandatory| Description | 2457| ------ | --------------- | ---- | ---------- | 2458| brush | [Brush](#brush) | Yes | **Brush** object.| 2459 2460**Error codes** 2461 2462For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2463 2464| ID| Error Message| 2465| ------- | --------------------------------------------| 2466| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2467 2468**Example** 2469 2470```ts 2471import { RenderNode } from '@kit.ArkUI'; 2472import { drawing } from '@kit.ArkGraphics2D'; 2473class DrawingRenderNode extends RenderNode { 2474 draw(context : DrawContext) { 2475 const canvas = context.canvas; 2476 const brush = new drawing.Brush(); 2477 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2478 canvas.attachBrush(brush); 2479 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 2480 canvas.detachBrush(); 2481 } 2482} 2483``` 2484 2485### detachPen 2486 2487detachPen(): void 2488 2489Detaches the pen from a canvas so that the canvas can no longer use the style and color of the pen to outline a shape. 2490 2491**System capability**: SystemCapability.Graphics.Drawing 2492 2493**Example** 2494 2495```ts 2496import { RenderNode } from '@kit.ArkUI'; 2497import { drawing } from '@kit.ArkGraphics2D'; 2498class DrawingRenderNode extends RenderNode { 2499 draw(context : DrawContext) { 2500 const canvas = context.canvas; 2501 const pen = new drawing.Pen(); 2502 pen.setStrokeWidth(5); 2503 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2504 canvas.attachPen(pen); 2505 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 2506 canvas.detachPen(); 2507 } 2508} 2509``` 2510 2511### detachBrush 2512 2513detachBrush(): void 2514 2515Detaches the brush from a canvas so that the canvas can no longer use the style and color of the brush to fill in a shape. 2516 2517**System capability**: SystemCapability.Graphics.Drawing 2518 2519**Example** 2520 2521```ts 2522import { RenderNode } from '@kit.ArkUI'; 2523import { drawing } from '@kit.ArkGraphics2D'; 2524class DrawingRenderNode extends RenderNode { 2525 draw(context : DrawContext) { 2526 const canvas = context.canvas; 2527 const brush = new drawing.Brush(); 2528 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2529 canvas.attachBrush(brush); 2530 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 2531 canvas.detachBrush(); 2532 } 2533} 2534``` 2535 2536### clipPath<sup>12+</sup> 2537 2538clipPath(path: Path, clipOp?: ClipOp, doAntiAlias?: boolean): void 2539 2540Clips a path. 2541 2542**System capability**: SystemCapability.Graphics.Drawing 2543 2544**Parameters** 2545 2546| Name | Type | Mandatory| Description | 2547| ------------ | ----------------- | ---- | ------------------------------------| 2548| path | [Path](#path) | Yes | **Path** object. | 2549| clipOp | [ClipOp](#clipop12) | No | Clip mode. The default value is **INTERSECT**. | 2550| 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**.| 2551 2552**Error codes** 2553 2554For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2555 2556| ID| Error Message| 2557| ------- | --------------------------------------------| 2558| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2559 2560**Example** 2561 2562```ts 2563import { RenderNode } from '@kit.ArkUI'; 2564import { common2D, drawing } from '@kit.ArkGraphics2D'; 2565class DrawingRenderNode extends RenderNode { 2566 draw(context : DrawContext) { 2567 const canvas = context.canvas; 2568 let path = new drawing.Path(); 2569 path.moveTo(10, 10); 2570 path.cubicTo(100, 100, 80, 150, 300, 150); 2571 path.close(); 2572 canvas.clipPath(path, drawing.ClipOp.INTERSECT, true); 2573 canvas.clear({alpha: 255, red: 255, green: 0, blue: 0}); 2574 } 2575} 2576``` 2577 2578### clipRect<sup>12+</sup> 2579 2580clipRect(rect: common2D.Rect, clipOp?: ClipOp, doAntiAlias?: boolean): void 2581 2582Clips a rectangle. 2583 2584**System capability**: SystemCapability.Graphics.Drawing 2585 2586**Parameters** 2587 2588| Name | Type | Mandatory | Description | 2589| ----------- | ---------------------------------------- | ---- | ------------------- | 2590| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangle. | 2591| clipOp | [ClipOp](#clipop12) | No | Clip mode. The default value is **INTERSECT**. | 2592| 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**.| 2593 2594**Error codes** 2595 2596For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2597 2598| ID| Error Message| 2599| ------- | --------------------------------------------| 2600| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2601 2602**Example** 2603 2604```ts 2605import { RenderNode } from '@kit.ArkUI'; 2606import { common2D, drawing } from '@kit.ArkGraphics2D'; 2607class DrawingRenderNode extends RenderNode { 2608 draw(context : DrawContext) { 2609 const canvas = context.canvas; 2610 canvas.clipRect({left : 10, right : 500, top : 300, bottom : 900}, drawing.ClipOp.DIFFERENCE, true); 2611 canvas.clear({alpha: 255, red: 255, green: 0, blue: 0}); 2612 } 2613} 2614``` 2615 2616### save<sup>12+</sup> 2617 2618save(): number 2619 2620Saves the current canvas status (canvas matrix) to the top of the stack. This API must be used in pair with [restore](#restore12). 2621 2622**System capability**: SystemCapability.Graphics.Drawing 2623 2624**Return value** 2625 2626| Type | Description | 2627| ------ | ------------------ | 2628| number | Number of canvas statuses. The value is a positive integer.| 2629 2630**Example** 2631 2632```ts 2633import { RenderNode } from '@kit.ArkUI'; 2634import { common2D, drawing } from '@kit.ArkGraphics2D'; 2635class DrawingRenderNode extends RenderNode { 2636 draw(context : DrawContext) { 2637 const canvas = context.canvas; 2638 let rect: common2D.Rect = {left: 10, right: 200, top: 100, bottom: 300}; 2639 canvas.drawRect(rect); 2640 let saveCount = canvas.save(); 2641 } 2642} 2643``` 2644 2645### saveLayer<sup>12+</sup> 2646 2647saveLayer(rect?: common2D.Rect | null, brush?: Brush | null): number 2648 2649Saves 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. 2650 2651**System capability**: SystemCapability.Graphics.Drawing 2652 2653**Parameters** 2654 2655| Name | Type | Mandatory | Description | 2656| ---- | ------ | ---- | ----------------- | 2657| 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.| 2658| brush | [Brush](#brush)\|null | No | **Brush** object. The alpha value, filter effect, and blend mode of the brush are applied when the bitmap is drawn. If null is passed in, no effect is applied.| 2659 2660**Return value** 2661 2662| Type | Description | 2663| ------ | ------------------ | 2664| number | Number of canvas statuses that have been saved. The value is a positive integer.| 2665 2666**Error codes** 2667 2668For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2669 2670| ID| Error Message| 2671| ------- | --------------------------------------------| 2672| 401 | Parameter error. Possible causes: Mandatory parameters are left unspecified. | 2673 2674**Example** 2675 2676```ts 2677import { RenderNode } from '@kit.ArkUI'; 2678import { common2D, drawing } from '@kit.ArkGraphics2D'; 2679class DrawingRenderNode extends RenderNode { 2680 draw(context : DrawContext) { 2681 const canvas = context.canvas; 2682 canvas.saveLayer(null, null); 2683 const brushRect = new drawing.Brush(); 2684 const colorRect: common2D.Color = {alpha: 255, red: 255, green: 255, blue: 0}; 2685 brushRect.setColor(colorRect); 2686 canvas.attachBrush(brushRect); 2687 const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 2688 canvas.drawRect(rect); 2689 2690 const brush = new drawing.Brush(); 2691 brush.setBlendMode(drawing.BlendMode.DST_OUT); 2692 canvas.saveLayer(rect, brush); 2693 2694 const brushCircle = new drawing.Brush(); 2695 const colorCircle: common2D.Color = {alpha: 255, red: 0, green: 0, blue: 255}; 2696 brushCircle.setColor(colorCircle); 2697 canvas.attachBrush(brushCircle); 2698 canvas.drawCircle(500, 500, 200); 2699 canvas.restore(); 2700 canvas.restore(); 2701 canvas.detachBrush(); 2702 } 2703} 2704``` 2705 2706### scale<sup>12+</sup> 2707 2708scale(sx: number, sy: number): void 2709 2710Scales the canvas. 2711 2712**System capability**: SystemCapability.Graphics.Drawing 2713 2714**Parameters** 2715 2716| Name | Type | Mandatory | Description | 2717| ---- | ------ | ---- | ----------------- | 2718| sx | number | Yes | Scale ratio on the X axis. The value is a floating point number.| 2719| sy | number | Yes | Scale ratio on the Y axis. The value is a floating point number.| 2720 2721**Error codes** 2722 2723For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2724 2725| ID| Error Message| 2726| ------- | --------------------------------------------| 2727| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2728 2729**Example** 2730 2731```ts 2732import { RenderNode } from '@kit.ArkUI'; 2733import { common2D, drawing } from '@kit.ArkGraphics2D'; 2734class DrawingRenderNode extends RenderNode { 2735 draw(context : DrawContext) { 2736 const canvas = context.canvas; 2737 const pen = new drawing.Pen(); 2738 pen.setStrokeWidth(5); 2739 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2740 canvas.attachPen(pen); 2741 canvas.scale(2, 0.5); 2742 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 2743 canvas.detachPen(); 2744 } 2745} 2746``` 2747 2748### skew<sup>12+</sup> 2749 2750skew(sx: number, sy: number) : void 2751 2752Skews the canvas in both the horizontal and vertical directions. 2753 2754**System capability**: SystemCapability.Graphics.Drawing 2755 2756**Parameters** 2757 2758| Name | Type | Mandatory | Description | 2759| ---- | ------ | ---- | ----------------- | 2760| 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. | 2761| 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. | 2762 2763**Error codes** 2764 2765For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2766 2767| ID| Error Message| 2768| ------- | --------------------------------------------| 2769| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2770 2771**Example** 2772 2773```ts 2774import { RenderNode } from '@kit.ArkUI'; 2775import { common2D, drawing } from '@kit.ArkGraphics2D'; 2776class DrawingRenderNode extends RenderNode { 2777 draw(context : DrawContext) { 2778 const canvas = context.canvas; 2779 const pen = new drawing.Pen(); 2780 pen.setStrokeWidth(5); 2781 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2782 canvas.attachPen(pen); 2783 canvas.skew(0.1, 0.1); 2784 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 2785 canvas.detachPen(); 2786 } 2787} 2788``` 2789 2790### rotate<sup>12+</sup> 2791 2792rotate(degrees: number, sx: number, sy: number) : void 2793 2794Rotates the canvas by a certain angle. 2795 2796**System capability**: SystemCapability.Graphics.Drawing 2797 2798**Parameters** 2799 2800| Name | Type | Mandatory | Description | 2801| ---- | ------ | ------ | ------------------------ | 2802| 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. | 2803| sx | number | Yes | X coordinate of the rotation center. The value is a floating point number.| 2804| sy | number | Yes | Y coordinate of the rotation center. The value is a floating point number.| 2805 2806**Error codes** 2807 2808For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2809 2810| ID| Error Message| 2811| ------- | --------------------------------------------| 2812| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2813 2814**Example** 2815 2816```ts 2817import { RenderNode } from '@kit.ArkUI'; 2818import { common2D, drawing } from '@kit.ArkGraphics2D'; 2819class DrawingRenderNode extends RenderNode { 2820 draw(context : DrawContext) { 2821 const canvas = context.canvas; 2822 const pen = new drawing.Pen(); 2823 pen.setStrokeWidth(5); 2824 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2825 canvas.attachPen(pen); 2826 canvas.rotate(30, 100, 100); 2827 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 2828 canvas.detachPen(); 2829 } 2830} 2831``` 2832 2833### translate<sup>12+</sup> 2834 2835translate(dx: number, dy: number): void 2836 2837Translates the canvas by a given distance. 2838 2839**System capability**: SystemCapability.Graphics.Drawing 2840 2841**Parameters** 2842 2843| Name| Type | Mandatory| Description | 2844| ----- | ------ | ---- | ------------------- | 2845| dx | number | Yes | Distance to translate on the X axis. The value is a floating point number. | 2846| dy | number | Yes | Distance to translate on the Y axis. The value is a floating point number. | 2847 2848**Error codes** 2849 2850For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2851 2852| ID| Error Message| 2853| ------- | --------------------------------------------| 2854| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2855 2856**Example** 2857 2858```ts 2859import { RenderNode } from '@kit.ArkUI'; 2860import { common2D, drawing } from '@kit.ArkGraphics2D'; 2861class DrawingRenderNode extends RenderNode { 2862 draw(context : DrawContext) { 2863 const canvas = context.canvas; 2864 const pen = new drawing.Pen(); 2865 pen.setStrokeWidth(5); 2866 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2867 canvas.attachPen(pen); 2868 canvas.translate(10, 10); 2869 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 2870 canvas.detachPen(); 2871 } 2872} 2873``` 2874 2875### getSaveCount<sup>12+</sup> 2876 2877getSaveCount(): number 2878 2879Obtains the number of canvas statuses (canvas matrices) saved in the stack. 2880 2881**System capability**: SystemCapability.Graphics.Drawing 2882 2883**Return value** 2884 2885| Type | Description | 2886| ------ | ------------------------------------ | 2887| number | Number of canvas statuses that have been saved. The value is a positive integer.| 2888 2889**Example** 2890 2891```ts 2892import { RenderNode } from '@kit.ArkUI'; 2893import { common2D, drawing } from '@kit.ArkGraphics2D'; 2894class DrawingRenderNode extends RenderNode { 2895 draw(context : DrawContext) { 2896 const canvas = context.canvas; 2897 const pen = new drawing.Pen(); 2898 pen.setStrokeWidth(5); 2899 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2900 canvas.attachPen(pen); 2901 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 300}); 2902 canvas.save(); 2903 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 2904 canvas.getSaveCount(); 2905 canvas.detachPen(); 2906 } 2907} 2908``` 2909 2910### restoreToCount<sup>12+</sup> 2911 2912restoreToCount(count: number): void 2913 2914Restores to a given number of canvas statuses (canvas matrices). 2915 2916**System capability**: SystemCapability.Graphics.Drawing 2917 2918**Parameters** 2919 2920| Name | Type | Mandatory | Description | 2921| ----- | ------ | ---- | ----------------------------- | 2922| 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.| 2923 2924**Error codes** 2925 2926For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 2927 2928| ID| Error Message| 2929| ------- | --------------------------------------------| 2930| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2931 2932**Example** 2933 2934```ts 2935import { RenderNode } from '@kit.ArkUI'; 2936import { common2D, drawing } from '@kit.ArkGraphics2D'; 2937class DrawingRenderNode extends RenderNode { 2938 draw(context : DrawContext) { 2939 const canvas = context.canvas; 2940 const pen = new drawing.Pen(); 2941 pen.setStrokeWidth(5); 2942 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2943 canvas.attachPen(pen); 2944 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 300}); 2945 canvas.save(); 2946 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 500}); 2947 canvas.save(); 2948 canvas.drawRect({left: 100, right: 300, top: 100, bottom: 500}); 2949 canvas.save(); 2950 canvas.restoreToCount(2); 2951 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 2952 canvas.detachPen(); 2953 } 2954} 2955``` 2956 2957### restore<sup>12+</sup> 2958 2959restore(): void 2960 2961Restores the canvas status (canvas matrix) saved on the top of the stack. 2962 2963**System capability**: SystemCapability.Graphics.Drawing 2964 2965**Example** 2966 2967```ts 2968import { RenderNode } from '@kit.ArkUI'; 2969import { common2D, drawing } from '@kit.ArkGraphics2D'; 2970class DrawingRenderNode extends RenderNode { 2971 draw(context : DrawContext) { 2972 const canvas = context.canvas; 2973 const pen = new drawing.Pen(); 2974 pen.setStrokeWidth(5); 2975 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2976 canvas.attachPen(pen); 2977 canvas.restore(); 2978 canvas.detachPen(); 2979 } 2980} 2981``` 2982 2983### concatMatrix<sup>12+</sup> 2984 2985concatMatrix(matrix: Matrix): void 2986 2987Preconcats the existing matrix of the canvas with the passed-in matrix. The drawing operation triggered before this API is called is not affected. 2988 2989**System capability**: SystemCapability.Graphics.Drawing 2990 2991**Parameters** 2992 2993| Name | Type | Mandatory | Description | 2994| ------ | ----------------- | ---- | ----- | 2995| matrix | [Matrix](#matrix12) | Yes | **Matrix** object.| 2996 2997**Error codes** 2998 2999For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3000 3001| ID| Error Message| 3002| ------- | --------------------------------------------| 3003| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3004 3005**Example** 3006 3007```ts 3008import { RenderNode } from '@kit.ArkUI'; 3009import { drawing } from '@kit.ArkGraphics2D'; 3010class DrawingRenderNode extends RenderNode { 3011 draw(context : DrawContext) { 3012 const canvas = context.canvas; 3013 let matrix = new drawing.Matrix(); 3014 matrix.setMatrix([5, 0, 0, 0, 1, 2, 0, 0, 1]); 3015 canvas.concatMatrix(matrix); 3016 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 500}); 3017 } 3018} 3019``` 3020 3021### setMatrix<sup>12+</sup> 3022 3023setMatrix(matrix: Matrix): void 3024 3025Sets a matrix for the canvas. 3026 3027**System capability**: SystemCapability.Graphics.Drawing 3028 3029**Parameters** 3030 3031| Name | Type | Mandatory | Description | 3032| ------ | ----------------- | ---- | ----- | 3033| matrix | [Matrix](#matrix12) | Yes | **Matrix** object.| 3034 3035**Error codes** 3036 3037For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3038 3039| ID| Error Message| 3040| ------- | --------------------------------------------| 3041| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3042 3043**Example** 3044 3045```ts 3046import { RenderNode } from '@kit.ArkUI'; 3047import { drawing } from '@kit.ArkGraphics2D'; 3048class DrawingRenderNode extends RenderNode { 3049 draw(context : DrawContext) { 3050 const canvas = context.canvas; 3051 let matrix = new drawing.Matrix() 3052 matrix.setMatrix([5, 0, 0, 0, 1, 1, 0, 0, 1]); 3053 canvas.setMatrix(matrix); 3054 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 500}); 3055 } 3056} 3057``` 3058 3059### isClipEmpty<sup>12+</sup> 3060 3061isClipEmpty(): boolean 3062 3063Checks whether the region that can be drawn is empty after clipping. 3064 3065**System capability**: SystemCapability.Graphics.Drawing 3066 3067**Return value** 3068 3069| Type | Description | 3070| --------------------- | -------------- | 3071| boolean | Check result. The value **true** means that the region is empty, and **false** means the opposite.| 3072 3073**Example** 3074 3075```ts 3076import { RenderNode } from '@kit.ArkUI'; 3077import { drawing } from '@kit.ArkGraphics2D'; 3078class DrawingRenderNode extends RenderNode { 3079 draw(context : DrawContext) { 3080 const canvas = context.canvas; 3081 if (canvas.isClipEmpty()) { 3082 console.info("canvas.isClipEmpty() returned true"); 3083 } else { 3084 console.info("canvas.isClipEmpty() returned false"); 3085 } 3086 } 3087} 3088``` 3089 3090### clipRegion<sup>12+</sup> 3091 3092clipRegion(region: Region, clipOp?: ClipOp): void 3093 3094Clips a region on the canvas. 3095 3096**System capability**: SystemCapability.Graphics.Drawing 3097 3098**Parameters** 3099 3100| Name | Type | Mandatory| Description | 3101| --------------- | ------- | ---- | ----------------------------------------------------------- | 3102| region | [Region](#region12) | Yes | **Region** object, which indicates the range to clip.| 3103| clipOp | [ClipOp](#clipop12) | No | Clipping mode. The default value is **INTERSECT**.| 3104 3105**Error codes** 3106 3107For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3108 3109| ID| Error Message| 3110| ------- | --------------------------------------------| 3111| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3112 3113**Example** 3114 3115```ts 3116import { RenderNode } from '@kit.ArkUI'; 3117import { drawing } from '@kit.ArkGraphics2D'; 3118class DrawingRenderNode extends RenderNode { 3119 draw(context : DrawContext) { 3120 const canvas = context.canvas; 3121 let region : drawing.Region = new drawing.Region(); 3122 region.setRect(0, 0, 500, 500); 3123 canvas.clipRegion(region); 3124 let color: common2D.Color = {alpha: 255, red: 255, green: 0, blue: 0}; 3125 canvas.clear(color); 3126 } 3127} 3128``` 3129 3130### clipRoundRect<sup>12+</sup> 3131 3132clipRoundRect(roundRect: RoundRect, clipOp?: ClipOp, doAntiAlias?: boolean): void 3133 3134Clips a rounded rectangle on the canvas. 3135 3136**System capability**: SystemCapability.Graphics.Drawing 3137 3138**Parameters** 3139 3140| Name | Type | Mandatory| Description | 3141| --------------- | ------- | ---- | ----------------------------------------------------------- | 3142| roundRect | [RoundRect](#roundrect12) | Yes | **RoundRect** object, which indicates the range to clip.| 3143| clipOp | [ClipOp](#clipop12) | No | Clipping mode. The default value is **INTERSECT**.| 3144| 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**.| 3145 3146**Error codes** 3147 3148For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3149 3150| ID| Error Message| 3151| ------- | --------------------------------------------| 3152| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3153 3154**Example** 3155 3156```ts 3157import { RenderNode } from '@kit.ArkUI'; 3158import { common2D, drawing } from '@kit.ArkGraphics2D'; 3159class DrawingRenderNode extends RenderNode { 3160 draw(context : DrawContext) { 3161 const canvas = context.canvas; 3162 let rect: common2D.Rect = { left: 10, top: 100, right: 200, bottom: 300 }; 3163 let roundRect = new drawing.RoundRect(rect, 10, 10); 3164 canvas.clipRoundRect(roundRect); 3165 let color: common2D.Color = {alpha: 255, red: 255, green: 0, blue: 0}; 3166 canvas.clear(color); 3167 } 3168} 3169``` 3170 3171### resetMatrix<sup>12+</sup> 3172 3173resetMatrix(): void 3174 3175Resets the matrix of this canvas to an identity matrix. 3176 3177**System capability**: SystemCapability.Graphics.Drawing 3178 3179**Example** 3180 3181```ts 3182import { RenderNode } from '@kit.ArkUI'; 3183import { drawing } from '@kit.ArkGraphics2D'; 3184class DrawingRenderNode extends RenderNode { 3185 draw(context : DrawContext) { 3186 const canvas = context.canvas; 3187 canvas.scale(4, 6); 3188 canvas.resetMatrix(); 3189 } 3190} 3191``` 3192 3193## ImageFilter<sup>12+</sup> 3194 3195Implements an image filter. 3196 3197### createBlurImageFilter<sup>12+</sup> 3198 3199static createBlurImageFilter(sigmaX: number, sigmaY: number, tileMode: TileMode, imageFilter?: ImageFilter | null ): ImageFilter 3200 3201Creates an image filter with a given blur effect. 3202 3203**System capability**: SystemCapability.Graphics.Drawing 3204 3205**Parameters** 3206 3207| Name | Type | Mandatory| Description | 3208| --------------- | ------- | ---- | ----------------------------------------------------------- | 3209| sigmaX | number | Yes | Standard deviation of the Gaussian blur along the X axis. The value must be a floating point number greater than 0.| 3210| sigmaY | number | Yes | Standard deviation of the Gaussian blur along the Y axis. The value must be a floating point number greater than 0.| 3211| tileMode | [TileMode](#tilemode12)| Yes | Tile mode to apply to the edges.| 3212| 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.| 3213 3214**Return value** 3215 3216| Type | Description | 3217| --------------------- | -------------- | 3218| [ImageFilter](#imagefilter12) | Image filter created.| 3219 3220**Error codes** 3221 3222For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3223 3224| ID| Error Message| 3225| ------- | --------------------------------------------| 3226| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 3227 3228**Example** 3229 3230```ts 3231import { drawing } from '@kit.ArkGraphics2D'; 3232let imgFilter = drawing.ImageFilter.createBlurImageFilter(5, 10, drawing.TileMode.CLAMP); 3233``` 3234 3235### createFromColorFilter<sup>12+</sup> 3236 3237static createFromColorFilter(colorFilter: ColorFilter, imageFilter?: ImageFilter | null): ImageFilter 3238 3239Creates an image filter object with a given color filter effect. 3240 3241**System capability**: SystemCapability.Graphics.Drawing 3242 3243**Parameters** 3244 3245| Name | Type | Mandatory| Description | 3246| --------------- | ------- | ---- | ----------------------------------------------------------- | 3247| colorFilter | [ColorFilter](#colorfilter) | Yes | Color filter.| 3248| 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.| 3249 3250**Return value** 3251 3252| Type | Description | 3253| --------------------- | -------------- | 3254| [ImageFilter](#imagefilter12) | Image filter created.| 3255 3256**Error codes** 3257 3258For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3259 3260| ID| Error Message| 3261| ------- | --------------------------------------------| 3262| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3263 3264**Example** 3265 3266```ts 3267import { drawing } from '@kit.ArkGraphics2D'; 3268let imgFilter = drawing.ImageFilter.createBlurImageFilter(5, 10, drawing.TileMode.CLAMP); 3269let clolorfilter = drawing.ColorFilter.createSRGBGammaToLinear(); 3270let imgFilter1 = drawing.ImageFilter.createFromColorFilter(clolorfilter, imgFilter); 3271``` 3272 3273## TextBlobRunBuffer 3274 3275Describes a series of consecutive glyphs with the same attributes in a text blob. 3276 3277**System capability**: SystemCapability.Graphics.Drawing 3278 3279| Name | Type | Readable| Writable| Description | 3280| --------- | ------ | ---- | ---- | ------------------------- | 3281| 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.| 3282| positionX | number | Yes | Yes | X coordinate of the start point of the text blob. The value is a floating point number.| 3283| positionY | number | Yes | Yes | Y coordinate of the start point of the text blob. The value is a floating point number.| 3284 3285## TextEncoding 3286 3287Enumerates the text encoding types. 3288 3289**System capability**: SystemCapability.Graphics.Drawing 3290 3291| Name | Value | Description | 3292| ---------------------- | ---- | ------------------------------ | 3293| TEXT_ENCODING_UTF8 | 0 | One byte is used to indicate UTF-8 or ASCII characters. | 3294| TEXT_ENCODING_UTF16 | 1 | Two bytes are used to indicate most Unicode characters.| 3295| TEXT_ENCODING_UTF32 | 2 | Four bytes are used to indicate all Unicode characters. | 3296| TEXT_ENCODING_GLYPH_ID | 3 | Two bytes are used to indicate the glyph index. | 3297 3298## ClipOp<sup>12+</sup> 3299Enumerates the canvas clipping modes. 3300 3301 3302**System capability**: SystemCapability.Graphics.Drawing 3303 3304| Name | Value | Description | Diagram | 3305| ------------------ | ---- | ---------------- | -------- | 3306| DIFFERENCE | 0 | Clips a specified area. That is, the difference set is obtained.|  | 3307| INTERSECT | 1 | Retains a specified area. That is, the intersection is obtained.|  | 3308 3309> **NOTE** 3310> 3311> 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. 3312 3313## FilterMode<sup>12+</sup> 3314 3315Enumerates the filter modes. 3316 3317**System capability**: SystemCapability.Graphics.Drawing 3318 3319| Name | Value | Description | 3320| ------------------- | ---- | ------- | 3321| FILTER_MODE_NEAREST | 0 | Nearest filter mode.| 3322| FILTER_MODE_LINEAR | 1 | Linear filter mode.| 3323 3324## PathDirection<sup>12+</sup> 3325 3326Enumerates the directions of a closed contour. 3327 3328**System capability**: SystemCapability.Graphics.Drawing 3329 3330| Name | Value | Description | 3331| ------------------- | ---- | ------- | 3332| CLOCKWISE | 0 | Adds a closed contour clockwise.| 3333| COUNTER_CLOCKWISE | 1 | Adds a closed contour counterclockwise.| 3334 3335## PathFillType<sup>12+</sup> 3336 3337Enumerates the fill types of a path. 3338 3339**System capability**: SystemCapability.Graphics.Drawing 3340 3341| Name | Value | Description | 3342| ------------------- | ---- | ------- | 3343| 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.| 3344| 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.| 3345| INVERSE_WINDING | 2 | Same as **WINDING**, but draws outside of the path, rather than inside.| 3346| INVERSE_EVEN_ODD | 3 | Same as **EVEN_ODD**, but draws outside of the path, rather than inside.| 3347 3348> **NOTE** 3349> 3350>  3351> 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. 3352 3353## PointMode<sup>12+</sup> 3354 3355Enumerates the modes for drawing multiple points in an array. 3356 3357**System capability**: SystemCapability.Graphics.Drawing 3358 3359| Name | Value | Description | 3360| ------------------ | ---- | ------------- | 3361| POINTS | 0 | Draws each point separately. | 3362| LINES | 1 | Draws every two points as a line segment. | 3363| POLYGON | 2 | Draws an array of points as an open polygon.| 3364 3365## FontEdging<sup>12+</sup> 3366 3367Enumerates the font edging types. 3368 3369**System capability**: SystemCapability.Graphics.Drawing 3370 3371| Name | Value | Description | 3372| ------------------- | ---- | ------- | 3373| ALIAS | 0 | No anti-aliasing processing is used.| 3374| ANTI_ALIAS | 1 | Uses anti-aliasing to smooth the jagged edges.| 3375| SUBPIXEL_ANTI_ALIAS | 2 | Uses sub-pixel anti-aliasing to provide a smoother effect for jagged edges.| 3376 3377## FontHinting<sup>12+</sup> 3378 3379Enumerates the font hinting types. 3380 3381**System capability**: SystemCapability.Graphics.Drawing 3382 3383| Name | Value | Description | 3384| ------------------- | ---- | ------- | 3385| NONE | 0 | No font hinting is used.| 3386| SLIGHT | 1 | Slight font hinting is used to improve contrast.| 3387| NORMAL | 2 | Normal font hinting is used to improve contrast.| 3388| FULL | 3 | Full font hinting is used to improve contrast.| 3389 3390## TextBlob 3391 3392Defines a block consisting of one or more characters with the same font. 3393 3394### makeFromPosText<sup>12+</sup> 3395 3396static makeFromPosText(text: string, len: number, points: common2D.Point[], font: Font): TextBlob 3397 3398Creates 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. 3399 3400**System capability**: SystemCapability.Graphics.Drawing 3401 3402**Parameters** 3403 3404| Name | Type | Mandatory| Description | 3405| -------- | ----------------------------- | ---- | -------------------------------------- | 3406| text | string | Yes | Content to be used for drawing the text blob. | 3407| len | number | Yes | Number of fonts. The value is an integer and is obtained from [countText](#counttext12).| 3408| 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**.| 3409| font | [Font](#font) | Yes | **Font** object.| 3410 3411**Return value** 3412 3413| Type | Description | 3414| --------------------- | -------------- | 3415| [TextBlob](#textblob) | **TextBlob** object.| 3416 3417 3418**Error codes** 3419 3420For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3421 3422| ID| Error Message| 3423| ------- | --------------------------------------------| 3424| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types. | 3425 3426**Example** 3427 3428```ts 3429import { RenderNode } from '@kit.ArkUI'; 3430import { drawing,common2D} from '@kit.ArkGraphics2D'; 3431 3432class DrawingRenderNode extends RenderNode { 3433 draw(context : DrawContext) { 3434 const canvas = context.canvas; 3435 let text : string = 'makeFromPosText'; 3436 let font : drawing.Font = new drawing.Font(); 3437 font.setSize(100); 3438 let length = font.countText(text); 3439 let points : common2D.Point[] = []; 3440 for (let i = 0; i !== length; ++i) { 3441 points.push({ x: i * 35, y: i * 35 }); 3442 } 3443 let textblob : drawing.TextBlob =drawing.TextBlob.makeFromPosText(text, points.length, points, font); 3444 canvas.drawTextBlob(textblob, 100, 100); 3445 } 3446} 3447``` 3448 3449### uniqueID<sup>12+</sup> 3450 3451uniqueID(): number 3452 3453Obtains the unique identifier of a text blob. The identifier is a non-zero value. 3454 3455**System capability**: SystemCapability.Graphics.Drawing 3456 3457**Return value** 3458 3459| Type | Description | 3460| --------------------- | -------------- | 3461| number | Unique identifier of the text blob.| 3462 3463**Example** 3464 3465```ts 3466import {drawing} from "@kit.ArkGraphics2D" 3467let text : string = 'TextBlobUniqueId'; 3468let font : drawing.Font = new drawing.Font(); 3469font.setSize(100); 3470let textBlob = drawing.TextBlob.makeFromString(text, font, 0); 3471let id = textBlob.uniqueID(); 3472console.info("uniqueID---------------" +id); 3473``` 3474 3475### makeFromString 3476 3477static makeFromString(text: string, font: Font, encoding?: TextEncoding): TextBlob 3478 3479Converts a value of the string type into a **TextBlob** object. 3480 3481**System capability**: SystemCapability.Graphics.Drawing 3482 3483**Parameters** 3484 3485| Name | Type | Mandatory| Description | 3486| -------- | ----------------------------- | ---- | -------------------------------------- | 3487| text | string | Yes | Content to be used for drawing the text blob. | 3488| font | [Font](#font) | Yes | **Font** object. | 3489| 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**.| 3490 3491**Return value** 3492 3493| Type | Description | 3494| --------------------- | -------------- | 3495| [TextBlob](#textblob) | **TextBlob** object.| 3496 3497**Error codes** 3498 3499For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3500 3501| ID| Error Message| 3502| ------- | --------------------------------------------| 3503| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3504 3505**Example** 3506 3507```ts 3508import { RenderNode } from '@kit.ArkUI'; 3509import { drawing } from '@kit.ArkGraphics2D'; 3510class DrawingRenderNode extends RenderNode { 3511 draw(context : DrawContext) { 3512 const canvas = context.canvas; 3513 const brush = new drawing.Brush(); 3514 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3515 const font = new drawing.Font(); 3516 font.setSize(20); 3517 const textBlob = drawing.TextBlob.makeFromString("drawing", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 3518 canvas.attachBrush(brush); 3519 canvas.drawTextBlob(textBlob, 20, 20); 3520 canvas.detachBrush(); 3521 } 3522} 3523``` 3524 3525### makeFromRunBuffer 3526 3527static makeFromRunBuffer(pos: Array\<TextBlobRunBuffer>, font: Font, bounds?: common2D.Rect): TextBlob 3528 3529Creates a **Textblob** object based on the RunBuffer information. 3530 3531**System capability**: SystemCapability.Graphics.Drawing 3532 3533**Parameters** 3534 3535| Name| Type | Mandatory| Description | 3536| ------ | -------------------------------------------------- | ---- | ------------------------------ | 3537| pos | Array\<[TextBlobRunBuffer](#textblobrunbuffer)> | Yes | **TextBlobRunBuffer** array. | 3538| font | [Font](#font) | Yes | **Font** object. | 3539| bounds | [common2D.Rect](js-apis-graphics-common2D.md#rect) | No | Bounding box. If this parameter is not set, there is no bounding box.| 3540 3541**Return value** 3542 3543| Type | Description | 3544| --------------------- | -------------- | 3545| [TextBlob](#textblob) | **TextBlob** object.| 3546 3547**Error codes** 3548 3549For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3550 3551| ID| Error Message| 3552| ------- | --------------------------------------------| 3553| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3554 3555**Example** 3556 3557```ts 3558import { RenderNode } from '@kit.ArkUI'; 3559import { common2D, drawing } from '@kit.ArkGraphics2D'; 3560class DrawingRenderNode extends RenderNode { 3561 draw(context : DrawContext) { 3562 const canvas = context.canvas; 3563 const font = new drawing.Font(); 3564 font.setSize(20); 3565 let runBuffer : Array<drawing.TextBlobRunBuffer> = [ 3566 { glyph: 65, positionX: 0, positionY: 0 }, 3567 { glyph: 227, positionX: 14.9, positionY: 0 }, 3568 { glyph: 283, positionX: 25.84, positionY: 0 }, 3569 { glyph: 283, positionX: 30.62, positionY: 0 }, 3570 { glyph: 299, positionX: 35.4, positionY: 0} 3571 ]; 3572 const textBlob = drawing.TextBlob.makeFromRunBuffer(runBuffer, font, null); 3573 const brush = new drawing.Brush(); 3574 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3575 canvas.attachBrush(brush); 3576 canvas.drawTextBlob(textBlob, 20, 20); 3577 canvas.detachBrush(); 3578 } 3579} 3580``` 3581 3582### bounds 3583 3584bounds(): common2D.Rect 3585 3586Obtains the rectangular bounding box of the text blob. 3587 3588**System capability**: SystemCapability.Graphics.Drawing 3589 3590**Return value** 3591 3592| Type | Description | 3593| -------------------------------------------------- | ---------------------- | 3594| [common2D.Rect](js-apis-graphics-common2D.md#rect) | Rectangular bounding box.| 3595 3596**Example** 3597 3598```ts 3599import { common2D, drawing } from '@kit.ArkGraphics2D'; 3600const font = new drawing.Font(); 3601font.setSize(20); 3602const textBlob = drawing.TextBlob.makeFromString("drawing", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 3603let bounds = textBlob.bounds(); 3604``` 3605 3606## Typeface 3607 3608Describes the typeface such as SimSun and Kaiti. 3609 3610### getFamilyName 3611 3612getFamilyName(): string 3613 3614Obtains the name of the typeface, that is, the name of the font family. 3615 3616**System capability**: SystemCapability.Graphics.Drawing 3617 3618**Return value** 3619 3620| Type | Description | 3621| ------ | -------------------- | 3622| string | Typeface name.| 3623 3624**Example** 3625 3626```ts 3627import { drawing } from '@kit.ArkGraphics2D'; 3628const font = new drawing.Font(); 3629let typeface = font.getTypeface(); 3630let familyName = typeface.getFamilyName(); 3631``` 3632 3633### makeFromFile<sup>12+</sup> 3634 3635static makeFromFile(filePath: string): Typeface 3636 3637Constructs a typeface from a file. 3638 3639**System capability**: SystemCapability.Graphics.Drawing 3640 3641**Parameters** 3642 3643| Name | Type | Mandatory | Description | 3644| ----------- | ---------------------------------------- | ---- | ------------------- | 3645| 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).| 3646 3647**Return value** 3648 3649| Type | Description | 3650| ------ | -------------------- | 3651| [Typeface](#typeface) | **Typeface** object.| 3652 3653**Error codes** 3654 3655For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3656 3657| ID| Error Message| 3658| ------- | --------------------------------------------| 3659| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3660 3661**Example** 3662 3663```ts 3664import { RenderNode } from '@kit.ArkUI'; 3665import { drawing } from '@kit.ArkGraphics2D'; 3666class TextRenderNode extends RenderNode { 3667 async draw(context: DrawContext) { 3668 const canvas = context.canvas; 3669 let font = new drawing.Font(); 3670 let str = "/system/fonts/HarmonyOS_Sans_Italic.ttf"; 3671 const mytypeface = drawing.Typeface.makeFromFile(str); 3672 font.setTypeface(mytypeface); 3673 const textBlob = drawing.TextBlob.makeFromString("Hello World", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 3674 canvas.drawTextBlob(textBlob, 60, 100); 3675 } 3676} 3677``` 3678 3679## Font 3680 3681Describes the attributes, such as the size, used for drawing text. 3682 3683### isSubpixel<sup>12+</sup> 3684 3685isSubpixel(): boolean 3686 3687Checks whether sub-pixel rendering is used for this font. 3688 3689**System capability**: SystemCapability.Graphics.Drawing 3690 3691**Return value** 3692 3693| Type | Description | 3694| ------ | -------------------- | 3695| boolean | Check result. The value **true** means that sub-pixel rendering is used, and **false** means the opposite.| 3696 3697**Example** 3698 3699```ts 3700import {drawing} from '@kit.ArkGraphics2D'; 3701let font: drawing.Font = new drawing.Font(); 3702font.enableSubpixel(true) 3703console.info("values=" + font.isSubpixel()); 3704``` 3705 3706### isLinearMetrics<sup>12+</sup> 3707 3708isLinearMetrics(): boolean 3709 3710Checks whether linear scaling is used for this font. 3711 3712**System capability**: SystemCapability.Graphics.Drawing 3713 3714**Return value** 3715 3716| Type | Description | 3717| ------ | -------------------- | 3718| boolean | Check result. The value **true** means that linear scaling is used, and **false** means the opposite.| 3719 3720**Example** 3721 3722```ts 3723import {drawing} from '@kit.ArkGraphics2D'; 3724let font: drawing.Font = new drawing.Font(); 3725font.enableLinearMetrics(true) 3726console.info("values=" + font.isLinearMetrics()); 3727``` 3728 3729### getSkewX<sup>12+</sup> 3730 3731getSkewX(): number 3732 3733Obtains the horizontal skew factor of this font. 3734 3735**System capability**: SystemCapability.Graphics.Drawing 3736 3737**Return value** 3738 3739| Type | Description | 3740| ------ | -------------------- | 3741| number | Horizontal skew factor.| 3742 3743**Example** 3744 3745```ts 3746import {drawing} from '@kit.ArkGraphics2D'; 3747let font: drawing.Font = new drawing.Font(); 3748font.setSkewX(-1) 3749console.info("values=" + font.getSkewX()); 3750``` 3751 3752### isEmbolden<sup>12+</sup> 3753 3754isEmbolden(): boolean 3755 3756Checks whether the bold effect is set for this font. 3757 3758**System capability**: SystemCapability.Graphics.Drawing 3759 3760**Return value** 3761 3762| Type | Description | 3763| ------ | -------------------- | 3764| boolean | Check result. The value **true** means that the bold effect is set, and **false** means the opposite.| 3765 3766**Example** 3767 3768```ts 3769import {drawing} from '@kit.ArkGraphics2D'; 3770let font: drawing.Font = new drawing.Font(); 3771font.enableEmbolden(true); 3772console.info("values=" + font.isEmbolden()); 3773``` 3774 3775### getScaleX<sup>12+</sup> 3776 3777getScaleX(): number 3778 3779Obtains the horizontal scale ratio of this font. 3780 3781**System capability**: SystemCapability.Graphics.Drawing 3782 3783**Return value** 3784 3785| Type | Description | 3786| ------ | -------------------- | 3787| number | Horizontal scale ratio.| 3788 3789**Example** 3790 3791```ts 3792import {drawing} from '@kit.ArkGraphics2D'; 3793let font: drawing.Font = new drawing.Font(); 3794font.setScaleX(2); 3795console.info("values=" + font.getScaleX()); 3796``` 3797 3798### getHinting<sup>12+</sup> 3799 3800getHinting(): FontHinting 3801 3802Obtains the font hinting effect. 3803 3804**System capability**: SystemCapability.Graphics.Drawing 3805 3806**Return value** 3807 3808| Type | Description | 3809| ------ | -------------------- | 3810| [FontHinting](#fonthinting12) | Font hinting effect.| 3811 3812**Example** 3813 3814```ts 3815import {drawing} from '@kit.ArkGraphics2D'; 3816let font: drawing.Font = new drawing.Font(); 3817console.info("values=" + font.getHinting()); 3818``` 3819 3820### getEdging<sup>12+</sup> 3821 3822getEdging(): FontEdging 3823 3824Obtains the font edging effect. 3825 3826**System capability**: SystemCapability.Graphics.Drawing 3827 3828**Return value** 3829 3830| Type | Description | 3831| ------ | -------------------- | 3832| [FontEdging](#fontedging12) | Font edging effect.| 3833 3834**Example** 3835 3836```ts 3837import {drawing} from '@kit.ArkGraphics2D'; 3838let font: drawing.Font = new drawing.Font(); 3839console.info("values=" + font.getEdging()); 3840``` 3841 3842### enableSubpixel 3843 3844enableSubpixel(isSubpixel: boolean): void 3845 3846Enables subpixel font rendering. 3847 3848**System capability**: SystemCapability.Graphics.Drawing 3849 3850**Parameters** 3851 3852| Name | Type | Mandatory| Description | 3853| ---------- | ------- | ---- | ------------------------------------------------------------ | 3854| isSubpixel | boolean | Yes | Whether to enable subpixel font rendering. The value **true** means to enable subpixel font rendering, and **false** means the opposite.| 3855 3856**Error codes** 3857 3858For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3859 3860| ID| Error Message| 3861| ------- | --------------------------------------------| 3862| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3863 3864**Example** 3865 3866```ts 3867import { drawing } from '@kit.ArkGraphics2D'; 3868let font = new drawing.Font(); 3869font.enableSubpixel(true); 3870``` 3871 3872### enableEmbolden 3873 3874enableEmbolden(isEmbolden: boolean): void 3875 3876Enables emboldened fonts. 3877 3878**System capability**: SystemCapability.Graphics.Drawing 3879 3880**Parameters** 3881 3882| Name | Type | Mandatory| Description | 3883| ---------- | ------- | ---- | ----------------------------------------------------- | 3884| isEmbolden | boolean | Yes | Whether to enable emboldened fonts. The value **true** means to enable emboldened fonts, and **false** means the opposite.| 3885 3886**Error codes** 3887 3888For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3889 3890| ID| Error Message| 3891| ------- | --------------------------------------------| 3892| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3893 3894**Example** 3895 3896```ts 3897import { drawing } from '@kit.ArkGraphics2D'; 3898let font = new drawing.Font(); 3899font.enableEmbolden(true); 3900``` 3901 3902### enableLinearMetrics 3903 3904enableLinearMetrics(isLinearMetrics: boolean): void 3905 3906Enables linear font scaling. 3907 3908**System capability**: SystemCapability.Graphics.Drawing 3909 3910**Parameters** 3911 3912| Name | Type | Mandatory| Description | 3913| --------------- | ------- | ---- | ----------------------------------------------------------- | 3914| isLinearMetrics | boolean | Yes | Whether to enable linear font scaling. The value **true** means to enable linear font scaling, and **false** means the opposite.| 3915 3916**Error codes** 3917 3918For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3919 3920| ID| Error Message| 3921| ------- | --------------------------------------------| 3922| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3923 3924**Example** 3925 3926```ts 3927import { drawing } from '@kit.ArkGraphics2D'; 3928let font = new drawing.Font(); 3929font.enableLinearMetrics(true); 3930``` 3931 3932### setSize 3933 3934setSize(textSize: number): void 3935 3936Sets the text size. 3937 3938**System capability**: SystemCapability.Graphics.Drawing 3939 3940**Parameters** 3941 3942| Name | Type | Mandatory| Description | 3943| -------- | ------ | ---- | ---------------- | 3944| textSize | number | Yes | Text size. The value is a floating point number. If a negative number is passed in, the size is set to 0. If the size is 0, the text drawn will not be displayed.| 3945 3946**Error codes** 3947 3948For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 3949 3950| ID| Error Message| 3951| ------- | --------------------------------------------| 3952| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 3953 3954**Example** 3955 3956```ts 3957import { drawing } from '@kit.ArkGraphics2D'; 3958let font = new drawing.Font(); 3959font.setSize(5); 3960``` 3961 3962### getSize 3963 3964getSize(): number 3965 3966Obtains the text size. 3967 3968**System capability**: SystemCapability.Graphics.Drawing 3969 3970**Return value** 3971 3972| Type | Description | 3973| ------ | ---------------- | 3974| number | Text size. The value is a floating point number.| 3975 3976**Example** 3977 3978```ts 3979import { drawing } from '@kit.ArkGraphics2D'; 3980let font = new drawing.Font(); 3981font.setSize(5); 3982let fontSize = font.getSize(); 3983``` 3984 3985### setTypeface 3986 3987setTypeface(typeface: Typeface): void 3988 3989Sets the typeface. 3990 3991**System capability**: SystemCapability.Graphics.Drawing 3992 3993**Parameters** 3994 3995| Name | Type | Mandatory| Description | 3996| -------- | --------------------- | ---- | ------ | 3997| typeface | [Typeface](#typeface) | Yes | **Typeface** object.| 3998 3999**Error codes** 4000 4001For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4002 4003| ID| Error Message| 4004| ------- | --------------------------------------------| 4005| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4006 4007**Example** 4008 4009```ts 4010import { drawing } from '@kit.ArkGraphics2D'; 4011let font = new drawing.Font(); 4012font.setTypeface(new drawing.Typeface()); 4013``` 4014 4015### getTypeface 4016 4017getTypeface(): Typeface 4018 4019Obtains the typeface. 4020 4021**System capability**: SystemCapability.Graphics.Drawing 4022 4023**Return value** 4024 4025| Type | Description | 4026| --------------------- | ------ | 4027| [Typeface](#typeface) | **Typeface** object.| 4028 4029**Example** 4030 4031```ts 4032import { drawing } from '@kit.ArkGraphics2D'; 4033let font = new drawing.Font(); 4034let typeface = font.getTypeface(); 4035``` 4036 4037### getMetrics 4038 4039getMetrics(): FontMetrics 4040 4041Obtains the font metrics of the typeface. 4042 4043**System capability**: SystemCapability.Graphics.Drawing 4044 4045**Return value** 4046 4047| Type | Description | 4048| --------------------------- | ----------------- | 4049| [FontMetrics](#fontmetrics) | Font metrics.| 4050 4051**Example** 4052 4053```ts 4054import { drawing } from '@kit.ArkGraphics2D'; 4055let font = new drawing.Font(); 4056let metrics = font.getMetrics(); 4057``` 4058 4059### measureText 4060 4061measureText(text: string, encoding: TextEncoding): number 4062 4063Measures the text width. 4064 4065> **NOTE** 4066> 4067> 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). 4068 4069**System capability**: SystemCapability.Graphics.Drawing 4070 4071**Parameters** 4072 4073| Name | Type | Mandatory| Description | 4074| -------- | ----------------------------- | ---- | ---------- | 4075| text | string | Yes | Text content.| 4076| encoding | [TextEncoding](#textencoding) | Yes | Encoding format.| 4077 4078**Return value** 4079 4080| Type | Description | 4081| ------ | ---------------- | 4082| number | Width of the text. The value is a floating point number.| 4083 4084**Error codes** 4085 4086For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4087 4088| ID| Error Message| 4089| ------- | --------------------------------------------| 4090| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4091 4092**Example** 4093 4094```ts 4095import { drawing } from '@kit.ArkGraphics2D'; 4096let font = new drawing.Font(); 4097font.measureText("drawing", drawing.TextEncoding.TEXT_ENCODING_UTF8); 4098``` 4099 4100### measureSingleCharacter<sup>12+</sup> 4101 4102measureSingleCharacter(text: string): number 4103 4104Measures 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. 4105 4106**System capability**: SystemCapability.Graphics.Drawing 4107 4108**Parameters** 4109 4110| Name| Type | Mandatory| Description | 4111| ------ | ------------------- | ---- | ----------- | 4112| text | string | Yes | Single character to measure. The length of the string must be 1. | 4113 4114**Return value** 4115 4116| Type | Description | 4117| ------ | ---------------- | 4118| number | Width of the character. The value is a floating point number.| 4119 4120**Error codes** 4121 4122For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4123 4124| ID| Error Message| 4125| ------- | --------------------------------------------| 4126| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 4127 4128**Example** 4129 4130```ts 4131import { RenderNode } from '@kit.ArkUI'; 4132import { drawing } from '@kit.ArkGraphics2D'; 4133 4134class DrawingRenderNode extends RenderNode { 4135 draw(context : DrawContext) { 4136 const canvas = context.canvas; 4137 const font = new drawing.Font(); 4138 font.setSize(20); 4139 let width = font.measureSingleCharacter ("Hello"); 4140 } 4141} 4142``` 4143 4144### setScaleX<sup>12+</sup> 4145 4146setScaleX(scaleX: number): void 4147 4148Sets a horizontal scale factor for this font. 4149 4150**System capability**: SystemCapability.Graphics.Drawing 4151 4152**Parameters** 4153 4154| Name | Type | Mandatory| Description | 4155| -------- | ----------------------------- | ---- | ---------- | 4156| scaleX | number | Yes | Horizontal scale factor. The value is a floating point number.| 4157 4158**Error codes** 4159 4160For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4161 4162| ID| Error Message| 4163| ------- | --------------------------------------------| 4164| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4165 4166**Example** 4167 4168```ts 4169import { RenderNode } from '@kit.ArkUI'; 4170import { common2D, drawing } from '@kit.ArkGraphics2D'; 4171class DrawingRenderNode extends RenderNode { 4172 draw(context : DrawContext) { 4173 const canvas = context.canvas; 4174 const pen = new drawing.Pen(); 4175 pen.setStrokeWidth(5); 4176 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 4177 canvas.attachPen(pen); 4178 let font = new drawing.Font(); 4179 font.setSize(100); 4180 font.setScaleX(2); 4181 const textBlob = drawing.TextBlob.makeFromString("hello", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4182 canvas.drawTextBlob(textBlob, 200, 200); 4183 } 4184} 4185``` 4186 4187### setSkewX<sup>12+</sup> 4188 4189setSkewX(skewX: number): void 4190 4191Sets a horizontal skew factor for this font. 4192 4193**System capability**: SystemCapability.Graphics.Drawing 4194 4195**Parameters** 4196 4197| Name | Type | Mandatory| Description | 4198| -------- | ----------------------------- | ---- | ---------- | 4199| 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.| 4200 4201**Error codes** 4202 4203For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4204 4205| ID| Error Message| 4206| ------- | --------------------------------------------| 4207| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4208 4209**Example** 4210 4211```ts 4212import { RenderNode } from '@kit.ArkUI'; 4213import { common2D, drawing } from '@kit.ArkGraphics2D'; 4214class DrawingRenderNode extends RenderNode { 4215 draw(context : DrawContext) { 4216 const canvas = context.canvas; 4217 const pen = new drawing.Pen(); 4218 pen.setStrokeWidth(5); 4219 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 4220 canvas.attachPen(pen); 4221 let font = new drawing.Font(); 4222 font.setSize(100); 4223 font.setSkewX(1); 4224 const textBlob = drawing.TextBlob.makeFromString("hello", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4225 canvas.drawTextBlob(textBlob, 200, 200); 4226 } 4227} 4228``` 4229 4230### setEdging<sup>12+</sup> 4231 4232setEdging(edging: FontEdging): void 4233 4234Sets a font edging effect. 4235 4236**System capability**: SystemCapability.Graphics.Drawing 4237 4238**Parameters** 4239 4240| Name | Type | Mandatory| Description | 4241| -------- | ----------------------------- | ---- | ---------- | 4242| edging | [FontEdging](#fontedging12) | Yes | Font edging effect.| 4243 4244**Error codes** 4245 4246For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4247 4248| ID| Error Message| 4249| ------- | --------------------------------------------| 4250| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed. | 4251 4252**Example** 4253 4254```ts 4255import { drawing } from '@kit.ArkGraphics2D'; 4256 4257let font = new drawing.Font(); 4258font.setEdging(drawing.FontEdging.SUBPIXEL_ANTI_ALIAS); 4259``` 4260 4261### setHinting<sup>12+</sup> 4262 4263setHinting(hinting: FontHinting): void 4264 4265Sets a font hinting effect. 4266 4267**System capability**: SystemCapability.Graphics.Drawing 4268 4269**Parameters** 4270 4271| Name | Type | Mandatory| Description | 4272| -------- | ----------------------------- | ---- | ---------- | 4273| hinting | [FontHinting](#fonthinting12) | Yes | Font hinting effect.| 4274 4275**Error codes** 4276 4277For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4278 4279| ID| Error Message| 4280| ------- | --------------------------------------------| 4281| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed. | 4282 4283**Example** 4284 4285```ts 4286import { drawing } from '@kit.ArkGraphics2D'; 4287 4288let font = new drawing.Font(); 4289font.setHinting(drawing.FontHinting.FULL); 4290``` 4291 4292### countText<sup>12+</sup> 4293 4294countText(text: string): number 4295 4296Obtains the number of glyphs represented by text. 4297 4298**System capability**: SystemCapability.Graphics.Drawing 4299 4300**Parameters** 4301 4302| Name | Type | Mandatory| Description | 4303| -------- | ----------------------------- | ---- | ---------- | 4304| text | string | Yes | Text content.| 4305 4306**Return value** 4307 4308| Type | Description | 4309| ------ | ---------------- | 4310| number | Number of glyphs represented by the text. The value is an integer.| 4311 4312**Error codes** 4313 4314For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4315 4316| ID| Error Message| 4317| ------- | --------------------------------------------| 4318| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4319 4320**Example** 4321 4322```ts 4323import { drawing } from '@kit.ArkGraphics2D'; 4324 4325let font = new drawing.Font(); 4326let resultNumber: number = font.countText('ABCDE'); 4327console.info("count text number: " + resultNumber); 4328``` 4329 4330### setBaselineSnap<sup>12+</sup> 4331 4332setBaselineSnap(isBaselineSnap: boolean): void 4333 4334Sets whether to request that baselines be snapped to pixels when the current canvas matrix is axis aligned. 4335 4336**System capability**: SystemCapability.Graphics.Drawing 4337 4338**Parameters** 4339 4340| Name | Type | Mandatory| Description | 4341| --------------- | ------- | ---- | ---------------------------------------- | 4342| 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.| 4343 4344**Error codes** 4345 4346For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4347 4348| ID| Error Message| 4349| ------- | --------------------------------------------| 4350| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4351 4352**Example** 4353 4354```ts 4355import { drawing } from '@kit.ArkGraphics2D'; 4356 4357let font : drawing.Font = new drawing.Font(); 4358font.setBaselineSnap(true); 4359console.info("drawing font isBaselineSnap: " + font.isBaselineSnap()); 4360``` 4361 4362### isBaselineSnap()<sup>12+</sup> 4363 4364isBaselineSnap(): boolean 4365 4366Checks whether baselines are requested to be snapped to pixels when the current canvas matrix is axis aligned. 4367 4368**System capability**: SystemCapability.Graphics.Drawing 4369 4370**Return value** 4371 4372| Type | Description | 4373| ------ | ---------------- | 4374| boolean | Check result. The value **true** means that the baselines are requested to be snapped to pixels, and **false** means the opposite.| 4375 4376**Example** 4377 4378```ts 4379import { drawing } from '@kit.ArkGraphics2D'; 4380 4381let font : drawing.Font = new drawing.Font(); 4382font.setTypeface(new drawing.Typeface()); 4383font.setBaselineSnap(true); 4384console.info("drawing font isBaselineSnap: " + font.isBaselineSnap()); 4385``` 4386 4387### setEmbeddedBitmaps<sup>12+</sup> 4388 4389setEmbeddedBitmaps(isEmbeddedBitmaps: boolean): void 4390 4391Sets whether to use bitmaps in this font. 4392 4393**System capability**: SystemCapability.Graphics.Drawing 4394 4395**Parameters** 4396 4397| Name | Type | Mandatory| Description | 4398| -------- | ------ | ---- | ---------------- | 4399| 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.| 4400 4401**Error codes** 4402 4403For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4404 4405| ID| Error Message| 4406| ------- | --------------------------------------------| 4407| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4408 4409**Example** 4410 4411```ts 4412import { drawing } from '@kit.ArkGraphics2D'; 4413 4414let font : drawing.Font = new drawing.Font(); 4415font.setTypeface(new drawing.Typeface()); 4416font.setEmbeddedBitmaps(false); 4417console.info("draw isEmbeddedBitmaps: " + font.isEmbeddedBitmaps()); 4418``` 4419 4420### isEmbeddedBitmaps()<sup>12+</sup> 4421 4422isEmbeddedBitmaps(): boolean 4423 4424Checks whether bitmaps are used in this font. 4425 4426**System capability**: SystemCapability.Graphics.Drawing 4427 4428**Return value** 4429 4430| Type | Description | 4431| ------ | ---------------- | 4432| boolean | Check result. The value **true** means that the bitmaps are used, and **false** means the opposite.| 4433 4434**Example** 4435 4436```ts 4437import { drawing } from '@kit.ArkGraphics2D'; 4438 4439let font : drawing.Font = new drawing.Font(); 4440font.setTypeface(new drawing.Typeface()); 4441font.setEmbeddedBitmaps(true); 4442console.info("draw isEmbeddedBitmaps: " + font.isEmbeddedBitmaps()); 4443``` 4444 4445### setForceAutoHinting<sup>12+</sup> 4446 4447setForceAutoHinting(isForceAutoHinting: boolean): void 4448 4449Sets whether to forcibly use auto hinting, that is, whether to always hint glyphs. 4450 4451**System capability**: SystemCapability.Graphics.Drawing 4452 4453**Parameters** 4454 4455| Name | Type | Mandatory| Description | 4456| -------- | ------ | ---- | ---------------- | 4457| isForceAutoHinting | boolean | Yes | Whether to forcibly use auto hinting. The value **true** means to forcibly use auto hinting, and **false** means the opposite.| 4458 4459**Error codes** 4460 4461For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4462 4463| ID| Error Message| 4464| ------- | --------------------------------------------| 4465| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4466 4467**Example** 4468 4469```ts 4470import { drawing } from '@kit.ArkGraphics2D'; 4471 4472let font : drawing.Font = new drawing.Font(); 4473font.setTypeface(new drawing.Typeface()); 4474font.setForceAutoHinting(false); 4475console.info("drawing isForceAutoHinting: " + font.isForceAutoHinting()); 4476``` 4477 4478### isForceAutoHinting<sup>12+</sup> 4479 4480isForceAutoHinting(): boolean 4481 4482Checks whether auto hinting is forcibly used. 4483 4484**System capability**: SystemCapability.Graphics.Drawing 4485 4486**Return value** 4487 4488| Type | Description | 4489| ------ | ---------------- | 4490| boolean | Check result. The value **true** means that auto hinting is forcibly used, and **false** means the opposite.| 4491 4492**Example** 4493 4494```ts 4495import { drawing } from '@kit.ArkGraphics2D'; 4496 4497let font : drawing.Font = new drawing.Font(); 4498font.setTypeface(new drawing.Typeface()); 4499font.setForceAutoHinting(false); 4500console.info("drawing isForceAutoHinting: " + font.isForceAutoHinting()); 4501``` 4502 4503### getWidths<sup>12+</sup> 4504 4505getWidths(glyphs: Array\<number>): Array\<number> 4506 4507Obtains the width of each glyph in an array. 4508 4509**System capability**: SystemCapability.Graphics.Drawing 4510 4511**Parameters** 4512 4513| Name | Type | Mandatory| Description | 4514| -------- | --------------------- | ---- | ------ | 4515| glyphs | Array\<number> | Yes | Glyph array, which can be generated by [textToGlyphs](#texttoglyphs12).| 4516 4517**Return value** 4518 4519| Type | Description | 4520| ------ | ---------------- | 4521| Array\<number> | Array that holds the obtained glyph widths.| 4522 4523**Error codes** 4524 4525For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4526 4527| ID| Error Message| 4528| ------- | --------------------------------------------| 4529| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4530 4531**Example** 4532 4533```ts 4534import { drawing } from '@kit.ArkGraphics2D'; 4535 4536let font: drawing.Font = new drawing.Font(); 4537let text: string = 'hello world'; 4538let glyphs: number[] = font.textToGlyphs(text); 4539let fontWidths: Array<number> = font.getWidths(glyphs); 4540for (let index = 0; index < fontWidths.length; index++) { 4541 console.info("get fontWidths[", index, "]:", fontWidths[index]); 4542} 4543``` 4544 4545### textToGlyphs<sup>12+</sup> 4546 4547textToGlyphs(text: string, glyphCount?: number): Array\<number> 4548 4549Converts text into glyph indexes. 4550 4551**System capability**: SystemCapability.Graphics.Drawing 4552 4553**Parameters** 4554 4555| Name | Type | Mandatory| Description | 4556| -------- | ----------------------------- | ---- | ---------- | 4557| text | string | Yes | Text string.| 4558| 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.| 4559 4560**Return value** 4561 4562| Type | Description | 4563| ------ | ---------------- | 4564| Array\<number> | Array that holds the glyph indexes.| 4565 4566**Error codes** 4567 4568For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4569 4570| ID| Error Message| 4571| ------- | --------------------------------------------| 4572| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4573 4574**Example** 4575 4576```ts 4577import { drawing } from '@kit.ArkGraphics2D'; 4578 4579let font : drawing.Font = new drawing.Font(); 4580let text : string = 'hello world'; 4581let glyphs : number[] = font.textToGlyphs(text); 4582console.info("drawing text toglyphs OnTestFunction num = " + glyphs.length ); 4583``` 4584 4585### setThemeFontFollowed<sup>15+</sup> 4586 4587setThemeFontFollowed(followed: boolean): void 4588 4589Sets 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. 4590 4591**System capability**: SystemCapability.Graphics.Drawing 4592 4593**Parameters** 4594 4595| Name | Type | Mandatory| Description | 4596| -------- | ------ | ---- | ---------------- | 4597| followed | boolean | Yes | Whether to follow the theme font. The value **true** means to follow the theme font, and **false** means the opposite.| 4598 4599**Error codes** 4600 4601For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4602 4603| ID| Error Message| 4604| ------- | --------------------------------------------| 4605| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4606 4607**Example** 4608 4609```ts 4610import { drawing } from '@kit.ArkGraphics2D'; 4611 4612let font : drawing.Font = new drawing.Font(); 4613font.setThemeFontFollowed(true); 4614console.info("font is theme font followed: " + font.isThemeFontFollowed()); 4615``` 4616 4617### isThemeFontFollowed()<sup>15+</sup> 4618 4619isThemeFontFollowed(): boolean 4620 4621Checks whether the font follows the theme font. By default, the theme font is not followed. 4622 4623**System capability**: SystemCapability.Graphics.Drawing 4624 4625**Return value** 4626 4627| Type | Description | 4628| ------ | ---------------- | 4629| boolean | Check result. The value **true** means that the theme font is followed, and **false** means the opposite.| 4630 4631**Example** 4632 4633```ts 4634import { drawing } from '@kit.ArkGraphics2D'; 4635 4636let font : drawing.Font = new drawing.Font(); 4637font.setThemeFontFollowed(true); 4638console.info("font is theme font followed: " + font.isThemeFontFollowed()); 4639``` 4640 4641## FontMetricsFlags<sup>12+</sup> 4642 4643Enumerates the font measurement flags, which is used to specify whether a field in the font measurement information is valid. 4644 4645**System capability**: SystemCapability.Graphics.Drawing 4646 4647| Name | Value | Description | 4648| ----------------------------- | --------- | ------------------------------ | 4649| UNDERLINE_THICKNESS_VALID | 1 << 0 | The **underlineThickness** field in the [FontMetrics](#fontmetrics) struct is valid. | 4650| UNDERLINE_POSITION_VALID | 1 << 1 | The **underlinePosition** field in the [FontMetrics](#fontmetrics) struct is valid. | 4651| STRIKETHROUGH_THICKNESS_VALID | 1 << 2 | The **strikethroughThickness** field in the [FontMetrics](#fontmetrics) struct is valid.| 4652| STRIKETHROUGH_POSITION_VALID | 1 << 3 | The **strikethroughPosition** field in the [FontMetrics](#fontmetrics) struct is valid. | 4653| BOUNDS_INVALID | 1 << 4 | The boundary metrics (such as **top**, **bottom**, **xMin**, and **xMax**) in the [FontMetrics](#fontmetrics) struct are invalid. | 4654 4655## FontMetrics 4656 4657Describes the attributes that describe the font size and layout. A typeface has similar font metrics. 4658 4659**System capability**: SystemCapability.Graphics.Drawing 4660 4661| Name | Type | Read Only| Optional| Description | 4662| ------- | ------ | ---- | ---- | ------------------------------------------------------------ | 4663| flags<sup>12+</sup> | [FontMetricsFlags](#fontmetricsflags12) | Yes | Yes | Font measurement flags that are valid. | 4664| top | number | Yes | No | Maximum distance from the baseline to the highest coordinate of the text. The value is a floating point number. | 4665| ascent | number | Yes | No | Distance from the baseline to the highest coordinate of the text. The value is a floating point number. | 4666| descent | number | Yes | No | Distance from the baseline to the lowest coordinate of the text. The value is a floating point number. | 4667| bottom | number | Yes | No | Maximum distance from the baseline to the lowest coordinate of the text. The value is a floating point number. | 4668| 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.| 4669| avgCharWidth<sup>12+</sup> | number | Yes | Yes | Average character width. | 4670| maxCharWidth<sup>12+</sup> | number | Yes | Yes | Maximum character width. | 4671| 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. | 4672| 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. | 4673| xHeight<sup>12+</sup> | number | Yes | Yes | Height of the lowercase letter x. The value is usually a negative value. | 4674| capHeight<sup>12+</sup> | number | Yes | Yes | Height of a capital letter. The value is usually a negative value. | 4675| underlineThickness<sup>12+</sup> | number | Yes | Yes | Thickness of the underline. | 4676| 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. | 4677| strikethroughThickness<sup>12+</sup> | number | Yes | Yes | Thickness of the strikethrough. | 4678| 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. | 4679 4680## ColorFilter 4681 4682Defines a color filter. 4683 4684### createBlendModeColorFilter 4685 4686createBlendModeColorFilter(color: common2D.Color, mode: BlendMode) : ColorFilter 4687 4688Creates a **ColorFilter** object with a given color and blend mode. 4689 4690**System capability**: SystemCapability.Graphics.Drawing 4691 4692**Parameters** 4693 4694| Name| Type | Mandatory| Description | 4695| ------ | ---------------------------------------------------- | ---- | ---------------- | 4696| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. Each color channel is an integer ranging from 0 to 255.| 4697| mode | [BlendMode](#blendmode) | Yes | Blend mode.| 4698 4699**Return value** 4700 4701| Type | Description | 4702| --------------------------- | ------------------ | 4703| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 4704 4705**Error codes** 4706 4707For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4708 4709| ID| Error Message| 4710| ------- | --------------------------------------------| 4711| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 4712 4713**Example** 4714 4715```ts 4716import { common2D, drawing } from '@kit.ArkGraphics2D'; 4717const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 4718let colorFilter = drawing.ColorFilter.createBlendModeColorFilter(color, drawing.BlendMode.SRC); 4719``` 4720 4721### createComposeColorFilter 4722 4723createComposeColorFilter(outer: ColorFilter, inner: ColorFilter) : ColorFilter 4724 4725Creates a **ColorFilter** object by combining another two color filters. 4726 4727**System capability**: SystemCapability.Graphics.Drawing 4728 4729**Parameters** 4730 4731| Name| Type | Mandatory| Description | 4732| ------ | --------------------------- | ---- | -------------------------------- | 4733| outer | [ColorFilter](#colorfilter) | Yes | Color filter that takes effect later in the new filter.| 4734| inner | [ColorFilter](#colorfilter) | Yes | Color filter that takes effect first in the new filter.| 4735 4736**Return value** 4737 4738| Type | Description | 4739| --------------------------- | ------------------ | 4740| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 4741 4742**Error codes** 4743 4744For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4745 4746| ID| Error Message| 4747| ------- | --------------------------------------------| 4748| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4749 4750**Example** 4751 4752```ts 4753import { common2D, drawing } from '@kit.ArkGraphics2D'; 4754const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 4755let colorFilter1 = drawing.ColorFilter.createBlendModeColorFilter(color, drawing.BlendMode.SRC); 4756let colorFilter2 = drawing.ColorFilter.createBlendModeColorFilter(color, drawing.BlendMode.DST); 4757let colorFilter = drawing.ColorFilter.createComposeColorFilter(colorFilter1, colorFilter2); 4758``` 4759 4760### createLinearToSRGBGamma 4761 4762createLinearToSRGBGamma() : ColorFilter 4763 4764Creates a **ColorFilter** object that applies the sRGB gamma curve to the RGB channels. 4765 4766**System capability**: SystemCapability.Graphics.Drawing 4767 4768**Return value** 4769 4770| Type | Description | 4771| --------------------------- | ------------------ | 4772| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 4773 4774**Example** 4775 4776```ts 4777import { drawing } from '@kit.ArkGraphics2D'; 4778let colorFilter = drawing.ColorFilter.createLinearToSRGBGamma(); 4779``` 4780 4781### createSRGBGammaToLinear 4782 4783createSRGBGammaToLinear() : ColorFilter 4784 4785Creates a **ColorFilter** object that applies the RGB channels to the sRGB gamma curve. 4786 4787**System capability**: SystemCapability.Graphics.Drawing 4788 4789**Return value** 4790 4791| Type | Description | 4792| --------------------------- | ------------------ | 4793| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 4794 4795**Example** 4796 4797```ts 4798import { drawing } from '@kit.ArkGraphics2D'; 4799let colorFilter = drawing.ColorFilter.createSRGBGammaToLinear(); 4800``` 4801 4802### createLumaColorFilter 4803 4804createLumaColorFilter() : ColorFilter 4805 4806Creates a **ColorFilter** object that multiplies the luma into the alpha channel and sets the RGB channels to zero. 4807 4808**System capability**: SystemCapability.Graphics.Drawing 4809 4810**Return value** 4811 4812| Type | Description | 4813| --------------------------- | ------------------ | 4814| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 4815 4816**Example** 4817 4818```ts 4819import { drawing } from '@kit.ArkGraphics2D'; 4820let colorFilter = drawing.ColorFilter.createLumaColorFilter(); 4821``` 4822 4823### createMatrixColorFilter<sup>12+</sup> 4824 4825static createMatrixColorFilter(matrix: Array\<number>): ColorFilter 4826 4827Creates a color filter object with a 4*5 color matrix. 4828 4829**System capability**: SystemCapability.Graphics.Drawing 4830 4831**Parameters** 4832 4833| Name | Type | Mandatory| Description | 4834| -------- | -------------------------------------------- | ---- | ------------------------------- | 4835| matrix | Array\<number> | Yes | An array of 20 numbers, indicating the 4*5 matrix. | 4836 4837**Return value** 4838 4839| Type | Description | 4840| --------------------------- | ------------------ | 4841| [ColorFilter](#colorfilter) | **ColorFilter** object created.| 4842 4843**Error codes** 4844 4845For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4846 4847| ID| Error Message| 4848| ------- | --------------------------------------------| 4849| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 4850 4851**Example** 4852 4853```ts 4854import { drawing } from '@kit.ArkGraphics2D'; 4855let matrix: Array<number> = [ 4856 1, 0, 0, 0, 0, 4857 0, 1, 0, 0, 0, 4858 0, 0, 100, 0, 0, 4859 0, 0, 0, 1, 0 4860]; 4861let colorFilter = drawing.ColorFilter.createMatrixColorFilter(matrix); 4862``` 4863 4864## JoinStyle<sup>12+</sup> 4865 4866Enumerates the join styles of a pen. The join style defines the shape of the joints of a polyline segment drawn by the pen. 4867 4868**System capability**: SystemCapability.Graphics.Drawing 4869 4870| Name | Value | Description | Diagram | 4871| ----------- | ---- | ----------------------------------------------------------- | -------- | 4872| 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.|  | 4873| ROUND_JOIN | 1 | Round corner.|  | 4874| BEVEL_JOIN | 2 | Beveled corner.|  | 4875 4876## CapStyle<sup>12+</sup> 4877 4878Enumerates the cap styles of a pen. The cap style defines the style of both ends of a line segment drawn by the pen. 4879 4880**System capability**: SystemCapability.Graphics.Drawing 4881 4882| Name | Value | Description | Diagram | 4883| ---------- | ---- | ----------------------------------------------------------- | -------- | 4884| FLAT_CAP | 0 | There is no cap style. Both ends of the line segment are cut off square.|  | 4885| 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.|  | 4886| 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.|  | 4887 4888## BlurType<sup>12+</sup> 4889 4890Enumerates the blur types of a mask filter. 4891 4892**System capability**: SystemCapability.Graphics.Drawing 4893 4894| Name | Value| Description | Diagram | 4895| ------ | - | ------------------ | -------- | 4896| NORMAL | 0 | Blurs both inside and outside the original border. |  | 4897| SOLID | 1 | Draws solid inside the border, and blurs outside.|  | 4898| OUTER | 2 | Draws nothing inside the border, and blurs outside.|  | 4899| INNER | 3 | Blurs inside the border, and draws nothing outside.|  | 4900 4901## SamplingOptions<sup>12+</sup> 4902 4903Implements sampling options. 4904 4905### constructor<sup>12+</sup> 4906 4907constructor() 4908 4909Creates a **SamplingOptions** object. 4910 4911**System capability**: SystemCapability.Graphics.Drawing 4912 4913**Example** 4914 4915```ts 4916import { RenderNode } from '@kit.ArkUI'; 4917import { common2D, drawing } from '@kit.ArkGraphics2D'; 4918class DrawingRenderNode extends RenderNode { 4919 draw(context : DrawContext) { 4920 const canvas = context.canvas; 4921 const pen = new drawing.Pen(); 4922 let samplingOptions = new drawing.SamplingOptions(); 4923 } 4924} 4925``` 4926 4927### constructor<sup>12+</sup> 4928 4929constructor(filterMode: FilterMode) 4930 4931Creates a **SamplingOptions** object. 4932 4933**System capability**: SystemCapability.Graphics.Drawing 4934 4935**Parameters** 4936 4937| Name | Type | Mandatory| Description | 4938| ---------- | --------------------- | ---- | ----------------------------------- | 4939| filterMode | [FilterMode](#filtermode12) | Yes | Filter mode. | 4940 4941**Error codes** 4942 4943For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4944 4945| ID| Error Message| 4946| ------- | --------------------------------------------| 4947| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4948 4949**Example** 4950 4951```ts 4952import { RenderNode } from '@kit.ArkUI'; 4953import { common2D, drawing } from '@kit.ArkGraphics2D'; 4954class DrawingRenderNode extends RenderNode { 4955 draw(context : DrawContext) { 4956 const canvas = context.canvas; 4957 let samplingOptions = new drawing.SamplingOptions(drawing.FilterMode.FILTER_MODE_NEAREST); 4958 } 4959} 4960``` 4961 4962## Lattice<sup>12+</sup> 4963 4964Implements a lattice object, which is used to divide an image by lattice. 4965 4966### createImageLattice<sup>12+</sup> 4967 4968static 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 4969 4970Divides 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. 4971 4972**System capability**: SystemCapability.Graphics.Drawing 4973 4974**Parameters** 4975 4976| Name | Type | Mandatory| Description | 4977| ------------ | ------------------------------------------------------------------ | ---- | --------------------------------------------------------------------------------- | 4978| xDivs | Array\<number> | Yes | Array of X coordinates used to divide the image. The value is an integer. | 4979| yDivs | Array\<number> | Yes | Array of Y coordinates used to divide the image. The value is an integer. | 4980| fXCount | number | Yes | Size of the array that holds the X coordinates. The value range is [0, 5]. | 4981| fYCount | number | Yes | Size of the array that holds the Y coordinates. The value range is [0, 5]. | 4982| 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.| 4983| 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).| 4984| 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).| 4985 4986**Return value** 4987 4988| Type | Description | 4989| ------------------------- | ----------------------------------- | 4990| [Lattice](#lattice12) | **Lattice** object obtained. | 4991 4992**Error codes** 4993 4994For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 4995 4996| ID| Error Message| 4997| ------- | --------------------------------------------| 4998| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 4999 5000**Example** 5001 5002```ts 5003import { RenderNode } from '@kit.ArkUI'; 5004import { drawing } from '@kit.ArkGraphics2D'; 5005class DrawingRenderNode extends RenderNode { 5006 draw(context : DrawContext) { 5007 let xDivs : Array<number> = [1, 2, 4]; 5008 let yDivs : Array<number> = [1, 2, 4]; 5009 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. 5010 } 5011} 5012``` 5013 5014 5015## RectType<sup>12+</sup> 5016 5017Enumerates the types of rectangles used to fill the lattices. This enum is used only in [Lattice](#lattice12). 5018 5019**System capability**: SystemCapability.Graphics.Drawing 5020 5021| Name | Value | Description | 5022| ------------ | ---- | --------------------------------------------------------------- | 5023| DEFAULT | 0 | Draws an image into the lattice. | 5024| TRANSPARENT | 1 | Sets the lattice to transparent. | 5025| FIXEDCOLOR | 2 | Draws the colors in the **fColors** array in [Lattice](#lattice12) into the lattice. | 5026 5027## MaskFilter<sup>12+</sup> 5028 5029Implements a mask filter. 5030 5031### createBlurMaskFilter<sup>12+</sup> 5032 5033static createBlurMaskFilter(blurType: BlurType, sigma: number): MaskFilter 5034 5035Creates a mask filter with a blur effect. 5036 5037**System capability**: SystemCapability.Graphics.Drawing 5038 5039**Parameters** 5040 5041| Name | Type | Mandatory| Description | 5042| ---------- | --------------------- | ---- | ----------------------------------- | 5043| blurType | [BlurType](#blurtype12) | Yes | Blur type. | 5044| sigma | number | Yes | Standard deviation of the Gaussian blur to apply. The value must be a floating point number greater than 0.| 5045 5046**Return value** 5047 5048| Type | Description | 5049| ------------------------- | ------------------ | 5050| [MaskFilter](#maskfilter12) | **MaskFilter** object created.| 5051 5052**Error codes** 5053 5054For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5055 5056| ID| Error Message| 5057| ------- | --------------------------------------------| 5058| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5059 5060**Example** 5061 5062```ts 5063import { RenderNode } from '@kit.ArkUI'; 5064import { common2D, drawing } from '@kit.ArkGraphics2D'; 5065class DrawingRenderNode extends RenderNode { 5066 draw(context : DrawContext) { 5067 const canvas = context.canvas; 5068 let maskFilter = drawing.MaskFilter.createBlurMaskFilter(drawing.BlurType.OUTER, 10); 5069 } 5070} 5071``` 5072 5073## PathEffect<sup>12+</sup> 5074 5075Implements a path effect. 5076 5077### createDashPathEffect<sup>12+</sup> 5078 5079static createDashPathEffect(intervals: Array\<number>, phase: number): PathEffect 5080 5081Creates a **PathEffect** object that converts a path into a dotted line. 5082 5083**System capability**: SystemCapability.Graphics.Drawing 5084 5085**Parameters** 5086 5087| Name | Type | Mandatory | Description | 5088| ---------- | ------------- | ------- | -------------------------------------------------- | 5089| 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.| 5090| phase | number | Yes | Offset used during drawing. The value is a floating point number. | 5091 5092**Return value** 5093 5094| Type | Description | 5095| ------------------------- | --------------------- | 5096| [PathEffect](#patheffect12) | **PathEffect** object created.| 5097 5098**Error codes** 5099 5100For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5101 5102| ID| Error Message| 5103| ------- | --------------------------------------------| 5104| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5105 5106**Example** 5107 5108```ts 5109import { RenderNode } from '@kit.ArkUI'; 5110import { common2D, drawing } from '@kit.ArkGraphics2D'; 5111class DrawingRenderNode extends RenderNode { 5112 draw(context : DrawContext) { 5113 const canvas = context.canvas; 5114 let intervals = [10, 5]; 5115 let effect = drawing.PathEffect.createDashPathEffect(intervals, 5); 5116 } 5117} 5118``` 5119 5120### createCornerPathEffect<sup>12+</sup> 5121 5122static createCornerPathEffect(radius: number): PathEffect 5123 5124Creates a path effect that transforms the sharp angle between line segments into a rounded corner with the specified radius. 5125 5126**System capability**: SystemCapability.Graphics.Drawing 5127 5128**Parameters** 5129 5130| Name | Type | Mandatory | Description | 5131| ---------- | ------------- | ------- | -------------------------------------------------- | 5132| radius | number | Yes | Radius of the rounded corner. The value must be greater than 0. The value is a floating point number. | 5133 5134**Return value** 5135 5136| Type | Description | 5137| ------------------------- | --------------------- | 5138| [PathEffect](#patheffect12) | **PathEffect** object created.| 5139 5140**Error codes** 5141 5142For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5143 5144| ID| Error Message| 5145| ------- | --------------------------------------------| 5146| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5147 5148**Example** 5149 5150```ts 5151import { RenderNode } from '@kit.ArkUI'; 5152import { drawing } from '@kit.ArkGraphics2D'; 5153class DrawingRenderNode extends RenderNode { 5154 draw(context : DrawContext) { 5155 const canvas = context.canvas; 5156 let effect = drawing.PathEffect.createCornerPathEffect(30); 5157 } 5158} 5159``` 5160 5161## ShadowLayer<sup>12+</sup> 5162 5163Implements a shadow layer. 5164 5165### create<sup>12+</sup> 5166 5167static create(blurRadius: number, x: number, y: number, color: common2D.Color): ShadowLayer 5168 5169Creates a **ShadowLayer** object. 5170 5171**System capability**: SystemCapability.Graphics.Drawing 5172 5173**Parameters** 5174 5175| Name | Type | Mandatory| Description | 5176| ---------- | -------- | ---- | ----------------------------------- | 5177| blurRadius | number | Yes | Radius of the shadow layer. The value must be a floating point number greater than 0. | 5178| x | number | Yes | Offset on the X axis. The value is a floating point number. | 5179| y | number | Yes | Offset on the Y axis. The value is a floating point number. | 5180| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. Each color channel is an integer ranging from 0 to 255.| 5181 5182**Return value** 5183 5184| Type | Description | 5185| --------------------------- | -------------------- | 5186| [ShadowLayer](#shadowlayer12) | **ShadowLayer** object created.| 5187 5188**Error codes** 5189 5190For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5191 5192| ID| Error Message| 5193| ------- | --------------------------------------------| 5194| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5195 5196**Example** 5197 5198```ts 5199import { RenderNode } from '@kit.ArkUI'; 5200import { common2D, drawing } from '@kit.ArkGraphics2D'; 5201class DrawingRenderNode extends RenderNode { 5202 draw(context : DrawContext) { 5203 const canvas = context.canvas; 5204 let color : common2D.Color = {alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00}; 5205 let shadowLayer = drawing.ShadowLayer.create(3, -3, 3, color); 5206 } 5207} 5208``` 5209 5210## Pen 5211 5212Defines a pen, which is used to describe the style and color to outline a shape. 5213 5214### constructor<sup>12+</sup> 5215 5216constructor() 5217 5218A constructor used to create a **Pen** object. 5219 5220**System capability**: SystemCapability.Graphics.Drawing 5221 5222**Example** 5223 5224```ts 5225import { drawing } from '@kit.ArkGraphics2D'; 5226 5227const pen = new drawing.Pen(); 5228``` 5229 5230### constructor<sup>12+</sup> 5231 5232constructor(pen: Pen) 5233 5234Copies a **Pen** object to create a new one. 5235 5236**System capability**: SystemCapability.Graphics.Drawing 5237 5238**Parameters** 5239 5240| Name| Type | Mandatory| Description | 5241| ------| ----------- | ---- | ---------------- | 5242| pen | [Pen](#pen) | Yes | **Pen** object to copy.| 5243 5244**Error codes** 5245 5246For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5247 5248| ID| Error Message| 5249| ------- | --------------------------------------------| 5250| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5251 5252**Example** 5253 5254```ts 5255import { common2D, drawing } from '@kit.ArkGraphics2D'; 5256 5257const pen = new drawing.Pen(); 5258const penColor: common2D.Color = { alpha: 255, red: 0, green: 255, blue: 0 }; 5259pen.setColor(penColor); 5260pen.setStrokeWidth(10); 5261const newPen = new drawing.Pen(pen); 5262``` 5263 5264### setMiterLimit<sup>12+</sup> 5265 5266setMiterLimit(miter: number): void 5267 5268Sets 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. 5269 5270**System capability**: SystemCapability.Graphics.Drawing 5271 5272**Parameters** 5273 5274| Name| Type | Mandatory| Description | 5275| ------ | ------ | ---- | ---------------- | 5276| 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.| 5277 5278**Error codes** 5279 5280For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5281 5282| ID| Error Message| 5283| ------- | --------------------------------------------| 5284| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5285 5286**Example** 5287 5288```ts 5289import { drawing } from '@kit.ArkGraphics2D'; 5290 5291const pen = new drawing.Pen(); 5292pen.setMiterLimit(5); 5293``` 5294 5295### getMiterLimit<sup>12+</sup> 5296 5297getMiterLimit(): number 5298 5299Obtains the maximum ratio allowed between the sharp corner length of a polyline and its line width. 5300 5301**System capability**: SystemCapability.Graphics.Drawing 5302 5303**Return value** 5304 5305| Type | Description | 5306| -------| -------------------- | 5307| number | Maximum ratio obtained.| 5308 5309**Example** 5310 5311```ts 5312import { drawing } from '@kit.ArkGraphics2D'; 5313 5314const pen = new drawing.Pen(); 5315let miter = pen.getMiterLimit(); 5316``` 5317 5318### setImageFilter<sup>12+</sup> 5319 5320setImageFilter(filter: ImageFilter | null): void 5321 5322Sets an image filter for this pen. 5323 5324**System capability**: SystemCapability.Graphics.Drawing 5325 5326**Parameters** 5327 5328| Name| Type | Mandatory| Description | 5329| ------ | ------ | ---- | ----------------------- | 5330| filter | [ImageFilter](#imagefilter12) \| null | Yes | Image filter. If null is passed in, the image filter effect of the pen will be cleared.| 5331 5332**Error codes** 5333 5334For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5335 5336| ID| Error Message| 5337| ------- | --------------------------------------------| 5338| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types. | 5339 5340**Example** 5341 5342```ts 5343import {drawing} from '@kit.ArkGraphics2D'; 5344let colorfilter = drawing.ColorFilter.createSRGBGammaToLinear(); 5345let imgFilter = drawing.ImageFilter.createFromColorFilter(colorfilter); 5346let pen = new drawing.Pen(); 5347pen.setImageFilter(imgFilter); 5348pen.setImageFilter(null); 5349``` 5350 5351### getColorFilter<sup>12+</sup> 5352 5353getColorFilter(): ColorFilter 5354 5355Obtains the color filter of this pen. 5356 5357**System capability**: SystemCapability.Graphics.Drawing 5358 5359**Return value** 5360 5361| Type | Description | 5362| --------------------------- | ------------------ | 5363| [ColorFilter](#colorfilter) | Color filter.| 5364 5365**Example** 5366 5367```ts 5368import {drawing} from '@kit.ArkGraphics2D'; 5369let pen = new drawing.Pen(); 5370let colorfilter = drawing.ColorFilter.createLumaColorFilter(); 5371pen.setColorFilter(colorfilter); 5372let filter = pen.getColorFilter(); 5373``` 5374 5375### setColor 5376 5377setColor(color: common2D.Color) : void 5378 5379Sets a color for this pen. 5380 5381**System capability**: SystemCapability.Graphics.Drawing 5382 5383**Parameters** 5384 5385| Name| Type | Mandatory| Description | 5386| ------ | ---------------------------------------------------- | ---- | ---------------- | 5387| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. Each color channel is an integer ranging from 0 to 255.| 5388 5389**Error codes** 5390 5391For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5392 5393| ID| Error Message| 5394| ------- | --------------------------------------------| 5395| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5396 5397**Example** 5398 5399```ts 5400import { common2D, drawing } from '@kit.ArkGraphics2D'; 5401const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 5402const pen = new drawing.Pen(); 5403pen.setColor(color); 5404``` 5405 5406### setColor<sup>12+</sup> 5407 5408setColor(alpha: number, red: number, green: number, blue: number): void 5409 5410Sets a color for this pen. This API provides better performance than [setColor](#setcolor) and is recommended. 5411 5412**System capability**: SystemCapability.Graphics.Drawing 5413 5414**Parameters** 5415 5416| Name| Type | Mandatory| Description | 5417| ------ | ------ | ---- | -------------------------------------------------- | 5418| 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.| 5419| 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. | 5420| 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. | 5421| 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. | 5422 5423**Error codes** 5424 5425For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5426 5427| ID| Error Message| 5428| ------- | --------------------------------------------| 5429| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5430 5431**Example** 5432 5433```ts 5434import { drawing } from '@kit.ArkGraphics2D'; 5435const pen = new drawing.Pen(); 5436pen.setColor(255, 255, 0, 0); 5437``` 5438 5439### getColor<sup>12+</sup> 5440 5441getColor(): common2D.Color 5442 5443Obtains the color of this pen. 5444 5445**System capability**: SystemCapability.Graphics.Drawing 5446 5447**Return value** 5448 5449| Type | Description | 5450| -------------- | -------------- | 5451| common2D.Color | Color of the pen.| 5452 5453**Example** 5454 5455```ts 5456import { common2D, drawing } from '@kit.ArkGraphics2D'; 5457 5458const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 5459const pen = new drawing.Pen(); 5460pen.setColor(color); 5461let colorGet = pen.getColor(); 5462``` 5463 5464### setStrokeWidth 5465 5466setStrokeWidth(width: number) : void 5467 5468Sets 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. 5469 5470**System capability**: SystemCapability.Graphics.Drawing 5471 5472**Parameters** 5473 5474| Name| Type | Mandatory| Description | 5475| ------ | ------ | ---- | ---------------- | 5476| width | number | Yes | Stroke width. The value is a floating point number.| 5477 5478**Error codes** 5479 5480For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5481 5482| ID| Error Message| 5483| ------- | --------------------------------------------| 5484| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5485 5486**Example** 5487 5488```ts 5489import { drawing } from '@kit.ArkGraphics2D'; 5490const pen = new drawing.Pen(); 5491pen.setStrokeWidth(5); 5492``` 5493 5494### getWidth<sup>12+</sup> 5495 5496getWidth(): number 5497 5498Obtains the stroke width of this pen. The width describes the thickness of the outline of a shape. 5499 5500**System capability**: SystemCapability.Graphics.Drawing 5501 5502**Return value** 5503 5504| Type | Description | 5505| ------ | -------------- | 5506| number | Stroke width of the pen.| 5507 5508**Example** 5509 5510```ts 5511import { drawing } from '@kit.ArkGraphics2D'; 5512 5513const pen = new drawing.Pen(); 5514let width = pen.getWidth(); 5515``` 5516 5517### setAntiAlias 5518 5519setAntiAlias(aa: boolean) : void 5520 5521Enables anti-aliasing for this pen. Anti-aliasing makes the edges of the content smoother. 5522 5523**System capability**: SystemCapability.Graphics.Drawing 5524 5525**Parameters** 5526 5527| Name| Type | Mandatory| Description | 5528| ------ | ------- | ---- | ------------------------------------------------- | 5529| aa | boolean | Yes | Whether to enable anti-aliasing. The value **true** means to enable anti-aliasing, and **false** means the opposite.| 5530 5531**Error codes** 5532 5533For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5534 5535| ID| Error Message| 5536| ------- | --------------------------------------------| 5537| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5538 5539**Example** 5540 5541```ts 5542import { drawing } from '@kit.ArkGraphics2D'; 5543const pen = new drawing.Pen(); 5544pen.setAntiAlias(true); 5545``` 5546 5547### isAntiAlias<sup>12+</sup> 5548 5549isAntiAlias(): boolean 5550 5551Checks whether anti-aliasing is enabled for this pen. 5552 5553**System capability**: SystemCapability.Graphics.Drawing 5554 5555**Return value** 5556 5557| Type | Description | 5558| ------- | ------------------------- | 5559| boolean | Check result. The value **true** means that anti-aliasing is enabled, and **false** means the opposite.| 5560 5561**Example** 5562 5563```ts 5564import { drawing } from '@kit.ArkGraphics2D'; 5565 5566const pen = new drawing.Pen(); 5567let isAntiAlias = pen.isAntiAlias(); 5568``` 5569 5570### setAlpha 5571 5572setAlpha(alpha: number) : void 5573 5574Sets an alpha value for this pen. 5575 5576**System capability**: SystemCapability.Graphics.Drawing 5577 5578**Parameters** 5579 5580| Name| Type | Mandatory| Description | 5581| ------ | ------ | ---- | ---------------------------------------- | 5582| 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.| 5583 5584**Error codes** 5585 5586For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5587 5588| ID| Error Message| 5589| ------- | --------------------------------------------| 5590| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5591 5592**Example** 5593 5594```ts 5595import { drawing } from '@kit.ArkGraphics2D'; 5596const pen = new drawing.Pen(); 5597pen.setAlpha(128); 5598``` 5599 5600### getAlpha<sup>12+</sup> 5601 5602getAlpha(): number 5603 5604Obtains the alpha value of this pen. 5605 5606**System capability**: SystemCapability.Graphics.Drawing 5607 5608**Return value** 5609 5610| Type | Description | 5611| ------ | ---------------- | 5612| number | Alpha value of the pen. The return value is an integer ranging from 0 to 255.| 5613 5614**Example** 5615 5616```ts 5617import { drawing } from '@kit.ArkGraphics2D'; 5618 5619const pen = new drawing.Pen(); 5620let alpha = pen.getAlpha(); 5621``` 5622 5623### setColorFilter 5624 5625setColorFilter(filter: ColorFilter) : void 5626 5627Sets a color filter for this pen. 5628 5629**System capability**: SystemCapability.Graphics.Drawing 5630 5631**Parameters** 5632 5633| Name| Type | Mandatory| Description | 5634| ------ | --------------------------- | ---- | ------------ | 5635| filter | [ColorFilter](#colorfilter) | Yes | Color filter. If null is passed in, the color filter is cleared.| 5636 5637**Error codes** 5638 5639For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5640 5641| ID| Error Message| 5642| ------- | --------------------------------------------| 5643| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5644 5645**Example** 5646 5647```ts 5648import { drawing } from '@kit.ArkGraphics2D'; 5649const pen = new drawing.Pen(); 5650let colorFilter = drawing.ColorFilter.createLinearToSRGBGamma(); 5651pen.setColorFilter(colorFilter); 5652``` 5653 5654### setMaskFilter<sup>12+</sup> 5655 5656setMaskFilter(filter: MaskFilter): void 5657 5658Adds a mask filter for this pen. 5659 5660**System capability**: SystemCapability.Graphics.Drawing 5661 5662**Parameters** 5663 5664| Name| Type | Mandatory| Description | 5665| ------ | ------------------------- | ---- | --------- | 5666| filter | [MaskFilter](#maskfilter12) | Yes | Mask filter. If null is passed in, the mask filter is cleared.| 5667 5668**Error codes** 5669 5670For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5671 5672| ID| Error Message| 5673| ------- | --------------------------------------------| 5674| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5675 5676**Example** 5677 5678```ts 5679import { RenderNode } from '@kit.ArkUI'; 5680import { common2D, drawing } from '@kit.ArkGraphics2D'; 5681class DrawingRenderNode extends RenderNode { 5682 draw(context : DrawContext) { 5683 const canvas = context.canvas; 5684 const pen = new drawing.Pen(); 5685 pen.setStrokeWidth(5); 5686 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 5687 let maskFilter = drawing.MaskFilter.createBlurMaskFilter(drawing.BlurType.OUTER, 10); 5688 pen.setMaskFilter(maskFilter); 5689 } 5690} 5691``` 5692 5693### setPathEffect<sup>12+</sup> 5694 5695setPathEffect(effect: PathEffect): void 5696 5697Sets the path effect for this pen. 5698 5699**System capability**: SystemCapability.Graphics.Drawing 5700 5701**Parameters** 5702 5703| Name | Type | Mandatory| Description | 5704| ------- | ------------------------- | ---- | ------------ | 5705| effect | [PathEffect](#patheffect12) | Yes | Path effect. If null is passed in, the path filter is cleared.| 5706 5707**Error codes** 5708 5709For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5710 5711| ID| Error Message| 5712| ------- | --------------------------------------------| 5713| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5714 5715**Example** 5716 5717```ts 5718import { RenderNode } from '@kit.ArkUI'; 5719import { common2D, drawing } from '@kit.ArkGraphics2D'; 5720class DrawingRenderNode extends RenderNode { 5721 draw(context : DrawContext) { 5722 const canvas = context.canvas; 5723 const pen = new drawing.Pen(); 5724 pen.setStrokeWidth(5); 5725 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 5726 let pathEffect = drawing.PathEffect.createDashPathEffect([30, 10], 0); 5727 pen.setPathEffect(pathEffect); 5728 } 5729} 5730``` 5731 5732### setShaderEffect<sup>12+</sup> 5733 5734setShaderEffect(shaderEffect: ShaderEffect): void 5735 5736Sets the shader effect for this pen. 5737 5738**System capability**: SystemCapability.Graphics.Drawing 5739 5740**Parameters** 5741 5742| Name | Type | Mandatory| Description | 5743| ------- | ------------------------- | ---- | ------------ | 5744| shaderEffect | [ShaderEffect](#shadereffect12) | Yes | **ShaderEffect** object. If null is passed in, the shader effect will be cleared.| 5745 5746**Error codes** 5747 5748For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5749 5750| ID| Error Message| 5751| ------- | --------------------------------------------| 5752| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5753 5754**Example** 5755 5756```ts 5757import { drawing } from '@kit.ArkGraphics2D'; 5758 5759const pen = new drawing.Pen(); 5760let shaderEffect = drawing.ShaderEffect.createLinearGradient({x: 100, y: 100}, {x: 300, y: 300}, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 5761pen.setShaderEffect(shaderEffect); 5762``` 5763 5764### setShadowLayer<sup>12+</sup> 5765 5766setShadowLayer(shadowLayer: ShadowLayer): void 5767 5768Sets a shadow layer for this pen. The shadow layer effect takes effect only when text is drawn. 5769 5770**System capability**: SystemCapability.Graphics.Drawing 5771 5772**Parameters** 5773 5774| Name | Type | Mandatory| Description | 5775| ------- | ------------------------- | ---- | --------- | 5776| shadowLayer | [ShadowLayer](#shadowlayer12) | Yes | Shadow layer. If null is passed in, the shadow layer is cleared.| 5777 5778**Error codes** 5779 5780For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5781 5782| ID| Error Message| 5783| ------- | --------------------------------------------| 5784| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5785 5786**Example** 5787 5788```ts 5789import { RenderNode } from '@kit.ArkUI'; 5790import { common2D, drawing } from '@kit.ArkGraphics2D'; 5791class DrawingRenderNode extends RenderNode { 5792 draw(context : DrawContext) { 5793 const canvas = context.canvas; 5794 let font = new drawing.Font(); 5795 font.setSize(60); 5796 let textBlob = drawing.TextBlob.makeFromString("hello", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 5797 let pen = new drawing.Pen(); 5798 pen.setStrokeWidth(2.0); 5799 let pen_color : common2D.Color = {alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00}; 5800 pen.setColor(pen_color); 5801 canvas.attachPen(pen); 5802 canvas.drawTextBlob(textBlob, 100, 100); 5803 canvas.detachPen(); 5804 let color : common2D.Color = {alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00}; 5805 let shadowLayer = drawing.ShadowLayer.create(3, -3, 3, color); 5806 pen.setShadowLayer(shadowLayer); 5807 canvas.attachPen(pen); 5808 canvas.drawTextBlob(textBlob, 100, 200); 5809 canvas.detachPen(); 5810 } 5811} 5812``` 5813 5814### setBlendMode 5815 5816setBlendMode(mode: BlendMode) : void 5817 5818Sets a blend mode for this pen. 5819 5820**System capability**: SystemCapability.Graphics.Drawing 5821 5822**Parameters** 5823 5824| Name| Type | Mandatory| Description | 5825| ------ | ----------------------- | ---- | ---------------- | 5826| mode | [BlendMode](#blendmode) | Yes | Blend mode.| 5827 5828**Error codes** 5829 5830For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5831 5832| ID| Error Message| 5833| ------- | --------------------------------------------| 5834| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5835 5836**Example** 5837 5838```ts 5839import { drawing } from '@kit.ArkGraphics2D'; 5840const pen = new drawing.Pen(); 5841pen.setBlendMode(drawing.BlendMode.SRC); 5842``` 5843 5844### setJoinStyle<sup>12+</sup> 5845 5846setJoinStyle(style: JoinStyle): void 5847 5848Sets the join style for this pen. 5849 5850**System capability**: SystemCapability.Graphics.Drawing 5851 5852**Parameters** 5853 5854| Name| Type | Mandatory| Description | 5855| ------ | ----------------------- | ---- | --------------- | 5856| style | [JoinStyle](#joinstyle12) | Yes | Join style. | 5857 5858**Error codes** 5859 5860For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5861 5862| ID| Error Message| 5863| ------- | --------------------------------------------| 5864| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5865 5866**Example** 5867 5868```ts 5869import { RenderNode } from '@kit.ArkUI'; 5870import { common2D, drawing } from '@kit.ArkGraphics2D'; 5871class DrawingRenderNode extends RenderNode { 5872 draw(context : DrawContext) { 5873 const canvas = context.canvas; 5874 const pen = new drawing.Pen(); 5875 pen.setStrokeWidth(5); 5876 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 5877 pen.setJoinStyle(drawing.JoinStyle.ROUND_JOIN); 5878 } 5879} 5880``` 5881 5882### getJoinStyle<sup>12+</sup> 5883 5884getJoinStyle(): JoinStyle 5885 5886Obtains the join style of this pen. 5887 5888**System capability**: SystemCapability.Graphics.Drawing 5889 5890**Return value** 5891 5892| Type | Description | 5893| ------------- | ---------------------- | 5894| JoinStyle | Join style. | 5895 5896**Example** 5897 5898```ts 5899import { RenderNode } from '@kit.ArkUI'; 5900import { common2D, drawing } from '@kit.ArkGraphics2D'; 5901class DrawingRenderNode extends RenderNode { 5902 draw(context : DrawContext) { 5903 const canvas = context.canvas; 5904 const pen = new drawing.Pen(); 5905 pen.setStrokeWidth(5); 5906 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 5907 pen.setJoinStyle(drawing.JoinStyle.ROUND_JOIN); 5908 let joinStyle = pen.getJoinStyle(); 5909 } 5910} 5911``` 5912 5913### setCapStyle<sup>12+</sup> 5914 5915setCapStyle(style: CapStyle): void 5916 5917Sets the cap style for this pen. 5918 5919**System capability**: SystemCapability.Graphics.Drawing 5920 5921**Parameters** 5922 5923| Name| Type | Mandatory| Description | 5924| ------ | ----------------------- | ---- | --------------------- | 5925| style | [CapStyle](#capstyle12) | Yes | A variable that describes the cap style. | 5926 5927**Error codes** 5928 5929For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5930 5931| ID| Error Message| 5932| ------- | --------------------------------------------| 5933| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5934 5935**Example** 5936 5937```ts 5938import { RenderNode } from '@kit.ArkUI'; 5939import { common2D, drawing } from '@kit.ArkGraphics2D'; 5940class DrawingRenderNode extends RenderNode { 5941 draw(context : DrawContext) { 5942 const canvas = context.canvas; 5943 const pen = new drawing.Pen(); 5944 pen.setStrokeWidth(5); 5945 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 5946 pen.setCapStyle(drawing.CapStyle.SQUARE_CAP); 5947 } 5948} 5949``` 5950 5951### getCapStyle<sup>12+</sup> 5952 5953getCapStyle(): CapStyle 5954 5955Obtains the cap style of this pen. 5956 5957**System capability**: SystemCapability.Graphics.Drawing 5958 5959**Return value** 5960 5961| Type | Description | 5962| ------------ | ------------------ | 5963| CapStyle | Cap style.| 5964 5965**Example** 5966 5967```ts 5968import { RenderNode } from '@kit.ArkUI'; 5969import { common2D, drawing } from '@kit.ArkGraphics2D'; 5970class DrawingRenderNode extends RenderNode { 5971 draw(context : DrawContext) { 5972 const canvas = context.canvas; 5973 const pen = new drawing.Pen(); 5974 pen.setStrokeWidth(5); 5975 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 5976 pen.setCapStyle(drawing.CapStyle.SQUARE_CAP); 5977 let capStyle = pen.getCapStyle(); 5978 } 5979} 5980``` 5981 5982### setDither 5983 5984setDither(dither: boolean) : void 5985 5986Enables dithering for this pen. Dithering make the drawn color more realistic. 5987 5988**System capability**: SystemCapability.Graphics.Drawing 5989 5990**Parameters** 5991 5992| Name| Type | Mandatory| Description | 5993| ------ | ------- | ---- | --------------------------------------------------------- | 5994| dither | boolean | Yes | Whether to enable dithering. The value **true** means to enable dithering, and **false** means the opposite.| 5995 5996**Error codes** 5997 5998For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 5999 6000| ID| Error Message| 6001| ------- | --------------------------------------------| 6002| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6003 6004**Example** 6005 6006```ts 6007import { drawing } from '@kit.ArkGraphics2D'; 6008const pen = new drawing.Pen(); 6009pen.setDither(true); 6010``` 6011 6012### getFillPath<sup>12+</sup> 6013 6014getFillPath(src: Path, dst: Path): boolean 6015 6016Obtains the source path outline drawn using this pen and represents it using a destination path. 6017 6018**System capability**: SystemCapability.Graphics.Drawing 6019 6020**Parameters** 6021 6022| Name | Type | Mandatory| Description | 6023| -------- | -------------------------------------------- | ---- | ------------------------------- | 6024| src | [Path](#path) | Yes | Source path. | 6025| dst | [Path](#path) | Yes | Destination path.| 6026 6027**Return value** 6028 6029| Type | Description | 6030| --------------------- | -------------- | 6031| boolean | Check result. The value **true** means that the source path outline is obtained, and **false** means the opposite.| 6032 6033**Error codes** 6034 6035For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6036 6037| ID| Error Message| 6038| ------- | --------------------------------------------| 6039| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6040 6041**Example** 6042 6043```ts 6044import { drawing } from '@kit.ArkGraphics2D'; 6045let pen = new drawing.Pen(); 6046let pathSrc: drawing.Path = new drawing.Path(); 6047let pathDst: drawing.Path = new drawing.Path(); 6048pathSrc.moveTo(0, 0); 6049pathSrc.lineTo(700, 700); 6050let value = pen.getFillPath(pathSrc, pathDst); 6051``` 6052 6053### reset<sup>12+</sup> 6054 6055reset(): void 6056 6057Resets this pen to the initial state. 6058 6059**System capability**: SystemCapability.Graphics.Drawing 6060 6061**Example** 6062 6063```ts 6064import { drawing } from '@kit.ArkGraphics2D'; 6065 6066const pen = new drawing.Pen(); 6067pen.reset(); 6068``` 6069 6070## Brush 6071 6072Defines a brush, which is used to describe the style and color to fill in a shape. 6073 6074### constructor<sup>12+</sup> 6075 6076constructor() 6077 6078A constructor used to create a **Brush** object. 6079 6080**System capability**: SystemCapability.Graphics.Drawing 6081 6082**Example** 6083 6084```ts 6085import { drawing } from '@kit.ArkGraphics2D'; 6086 6087const brush = new drawing.Brush(); 6088``` 6089 6090### constructor<sup>12+</sup> 6091 6092constructor(brush: Brush) 6093 6094Copies a **Brush** object to create a new one. 6095 6096**System capability**: SystemCapability.Graphics.Drawing 6097 6098**Parameters** 6099 6100| Name| Type | Mandatory| Description | 6101| ------| ----------- | ---- | ---------------- | 6102| brush | [Brush](#brush) | Yes | **Brush** object to copy.| 6103 6104**Error codes** 6105 6106For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6107 6108| ID| Error Message| 6109| ------- | --------------------------------------------| 6110| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6111 6112**Example** 6113 6114```ts 6115import { common2D, drawing } from '@kit.ArkGraphics2D'; 6116 6117const brush = new drawing.Brush(); 6118const brushColor: common2D.Color = { alpha: 255, red: 0, green: 255, blue: 0 }; 6119brush.setColor(brushColor); 6120const newBrush = new drawing.Brush(brush); 6121``` 6122 6123### setColor 6124 6125setColor(color: common2D.Color) : void 6126 6127Sets a color for this brush. 6128 6129**System capability**: SystemCapability.Graphics.Drawing 6130 6131**Parameters** 6132 6133| Name| Type | Mandatory| Description | 6134| ------ | ---------------------------------------------------- | ---- | ---------------- | 6135| color | [common2D.Color](js-apis-graphics-common2D.md#color) | Yes | Color in ARGB format. Each color channel is an integer ranging from 0 to 255.| 6136 6137**Error codes** 6138 6139For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6140 6141| ID| Error Message| 6142| ------- | --------------------------------------------| 6143| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6144 6145**Example** 6146 6147```ts 6148import { common2D, drawing } from '@kit.ArkGraphics2D'; 6149const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 6150const brush = new drawing.Brush(); 6151brush.setColor(color); 6152``` 6153 6154### setColor<sup>12+</sup> 6155 6156setColor(alpha: number, red: number, green: number, blue: number): void 6157 6158Sets a color for this brush. This API provides better performance than [setColor](#setcolor-1) and is recommended. 6159 6160**System capability**: SystemCapability.Graphics.Drawing 6161 6162**Parameters** 6163 6164| Name| Type | Mandatory| Description | 6165| ------ | ------ | ---- | -------------------------------------------------- | 6166| 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.| 6167| 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. | 6168| 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. | 6169| 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. | 6170 6171**Error codes** 6172 6173For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6174 6175| ID| Error Message| 6176| ------- | --------------------------------------------| 6177| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6178 6179**Example** 6180 6181```ts 6182import { drawing } from '@kit.ArkGraphics2D'; 6183const brush = new drawing.Brush(); 6184brush.setColor(255, 255, 0, 0); 6185``` 6186 6187### getColor<sup>12+</sup> 6188 6189getColor(): common2D.Color 6190 6191Obtains the color of this brush. 6192 6193**System capability**: SystemCapability.Graphics.Drawing 6194 6195**Return value** 6196 6197| Type | Description | 6198| -------------- | -------------- | 6199| common2D.Color | Color of the brush.| 6200 6201**Example** 6202 6203```ts 6204import { common2D, drawing } from '@kit.ArkGraphics2D'; 6205 6206const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 6207const brush = new drawing.Brush(); 6208brush.setColor(color); 6209let colorGet = brush.getColor(); 6210``` 6211 6212### setAntiAlias 6213 6214setAntiAlias(aa: boolean) : void 6215 6216Enables anti-aliasing for this brush. Anti-aliasing makes the edges of the content smoother. 6217 6218**System capability**: SystemCapability.Graphics.Drawing 6219 6220**Parameters** 6221 6222| Name| Type | Mandatory| Description | 6223| ------ | ------- | ---- | ------------------------------------------------- | 6224| aa | boolean | Yes | Whether to enable anti-aliasing. The value **true** means to enable anti-aliasing, and **false** means the opposite.| 6225 6226**Error codes** 6227 6228For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6229 6230| ID| Error Message| 6231| ------- | --------------------------------------------| 6232| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6233 6234**Example** 6235 6236```ts 6237import { drawing } from '@kit.ArkGraphics2D'; 6238const brush = new drawing.Brush(); 6239brush.setAntiAlias(true); 6240``` 6241 6242### isAntiAlias<sup>12+</sup> 6243 6244isAntiAlias(): boolean 6245 6246Checks whether anti-aliasing is enabled for this brush. 6247 6248**System capability**: SystemCapability.Graphics.Drawing 6249 6250**Return value** 6251 6252| Type | Description | 6253| ------- | ------------------------- | 6254| boolean | Check result. The value **true** means that anti-aliasing is enabled, and **false** means the opposite.| 6255 6256**Example** 6257 6258```ts 6259import { drawing } from '@kit.ArkGraphics2D'; 6260 6261const brush = new drawing.Brush(); 6262let isAntiAlias = brush.isAntiAlias(); 6263``` 6264 6265### setAlpha 6266 6267setAlpha(alpha: number) : void 6268 6269Sets an alpha value for this brush. 6270 6271**System capability**: SystemCapability.Graphics.Drawing 6272 6273**Parameters** 6274 6275| Name| Type | Mandatory| Description | 6276| ------ | ------ | ---- | ---------------------------------------- | 6277| 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.| 6278 6279**Error codes** 6280 6281For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6282 6283| ID| Error Message| 6284| ------- | --------------------------------------------| 6285| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6286 6287**Example** 6288 6289```ts 6290import { drawing } from '@kit.ArkGraphics2D'; 6291const brush = new drawing.Brush(); 6292brush.setAlpha(128); 6293``` 6294 6295### getAlpha<sup>12+</sup> 6296 6297getAlpha(): number 6298 6299Obtains the alpha value of this brush. 6300 6301**System capability**: SystemCapability.Graphics.Drawing 6302 6303**Return value** 6304 6305| Type | Description | 6306| ------ | ---------------- | 6307| number | Alpha value of the brush. The return value is an integer ranging from 0 to 255.| 6308 6309**Example** 6310 6311```ts 6312import { drawing } from '@kit.ArkGraphics2D'; 6313 6314const brush = new drawing.Brush(); 6315let alpha = brush.getAlpha(); 6316``` 6317 6318### setColorFilter 6319 6320setColorFilter(filter: ColorFilter) : void 6321 6322Sets a color filter for this brush. 6323 6324**System capability**: SystemCapability.Graphics.Drawing 6325 6326**Parameters** 6327 6328| Name| Type | Mandatory| Description | 6329| ------ | --------------------------- | ---- | ------------ | 6330| filter | [ColorFilter](#colorfilter) | Yes | Color filter. If null is passed in, the color filter is cleared.| 6331 6332**Error codes** 6333 6334For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6335 6336| ID| Error Message| 6337| ------- | --------------------------------------------| 6338| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6339 6340**Example** 6341 6342```ts 6343import { drawing } from '@kit.ArkGraphics2D'; 6344const brush = new drawing.Brush(); 6345let colorFilter = drawing.ColorFilter.createLinearToSRGBGamma(); 6346brush.setColorFilter(colorFilter); 6347``` 6348 6349### setMaskFilter<sup>12+</sup> 6350 6351setMaskFilter(filter: MaskFilter): void 6352 6353Adds a mask filter for this brush. 6354 6355**System capability**: SystemCapability.Graphics.Drawing 6356 6357**Parameters** 6358 6359| Name| Type | Mandatory| Description | 6360| ------ | ------------------------- | ---- | --------- | 6361| filter | [MaskFilter](#maskfilter12) | Yes | Mask filter. If null is passed in, the mask filter is cleared.| 6362 6363**Error codes** 6364 6365For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6366 6367| ID| Error Message| 6368| ------- | --------------------------------------------| 6369| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6370 6371**Example** 6372 6373```ts 6374import { RenderNode } from '@kit.ArkUI'; 6375import { common2D, drawing } from '@kit.ArkGraphics2D'; 6376class DrawingRenderNode extends RenderNode { 6377 draw(context : DrawContext) { 6378 const canvas = context.canvas; 6379 const brush = new drawing.Brush(); 6380 let maskFilter = drawing.MaskFilter.createBlurMaskFilter(drawing.BlurType.OUTER, 10); 6381 brush.setMaskFilter(maskFilter); 6382 } 6383} 6384``` 6385 6386### setShaderEffect<sup>12+</sup> 6387 6388setShaderEffect(shaderEffect: ShaderEffect): void 6389 6390Sets the shader effect for this brush. 6391 6392**System capability**: SystemCapability.Graphics.Drawing 6393 6394**Parameters** 6395 6396| Name | Type | Mandatory| Description | 6397| ------- | ------------------------- | ---- | ------------ | 6398| shaderEffect | [ShaderEffect](#shadereffect12) | Yes | **ShaderEffect** object. If null is passed in, the shader effect will be cleared.| 6399 6400**Error codes** 6401 6402For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6403 6404| ID| Error Message| 6405| ------- | --------------------------------------------| 6406| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6407 6408**Example** 6409 6410```ts 6411import { drawing } from '@kit.ArkGraphics2D'; 6412 6413const brush = new drawing.Brush(); 6414let shaderEffect = drawing.ShaderEffect.createLinearGradient({x: 100, y: 100}, {x: 300, y: 300}, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 6415brush.setShaderEffect(shaderEffect); 6416``` 6417 6418### setShadowLayer<sup>12+</sup> 6419 6420setShadowLayer(shadowLayer: ShadowLayer): void 6421 6422Sets a shadow layer for this brush. The shadow layer effect takes effect only when text is drawn. 6423 6424**System capability**: SystemCapability.Graphics.Drawing 6425 6426**Parameters** 6427 6428| Name | Type | Mandatory| Description | 6429| ------- | ------------------------- | ---- | --------- | 6430| shadowLayer | [ShadowLayer](#shadowlayer12) | Yes | Shadow layer. If null is passed in, the shadow layer is cleared.| 6431 6432**Error codes** 6433 6434For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6435 6436| ID| Error Message| 6437| ------- | --------------------------------------------| 6438| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6439 6440**Example** 6441 6442```ts 6443import { RenderNode } from '@kit.ArkUI'; 6444import { common2D, drawing } from '@kit.ArkGraphics2D'; 6445class DrawingRenderNode extends RenderNode { 6446 draw(context : DrawContext) { 6447 const canvas = context.canvas; 6448 let font = new drawing.Font(); 6449 font.setSize(60); 6450 6451 let textBlob = drawing.TextBlob.makeFromString("hello", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 6452 let pen = new drawing.Pen(); 6453 pen.setStrokeWidth(2.0); 6454 6455 let pen_color : common2D.Color = {alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00}; 6456 pen.setColor(pen_color); 6457 canvas.attachPen(pen); 6458 canvas.drawTextBlob(textBlob, 100, 100); 6459 canvas.detachPen(); 6460 6461 let color : common2D.Color = {alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00}; 6462 let shadowLayer = drawing.ShadowLayer.create(3, -3, 3, color); 6463 pen.setShadowLayer(shadowLayer); 6464 canvas.attachPen(pen); 6465 canvas.drawTextBlob(textBlob, 100, 200); 6466 canvas.detachPen(); 6467 6468 let brush = new drawing.Brush(); 6469 let brush_color : common2D.Color = {alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00}; 6470 brush.setColor(brush_color); 6471 canvas.attachBrush(brush); 6472 canvas.drawTextBlob(textBlob, 300, 100); 6473 canvas.detachBrush(); 6474 6475 brush.setShadowLayer(shadowLayer); 6476 canvas.attachBrush(brush); 6477 canvas.drawTextBlob(textBlob, 300, 200); 6478 canvas.detachBrush(); 6479 } 6480} 6481``` 6482 6483### setBlendMode 6484 6485setBlendMode(mode: BlendMode) : void 6486 6487Sets a blend mode for this brush. 6488 6489**System capability**: SystemCapability.Graphics.Drawing 6490 6491**Parameters** 6492 6493| Name| Type | Mandatory| Description | 6494| ------ | ----------------------- | ---- | ---------------- | 6495| mode | [BlendMode](#blendmode) | Yes | Blend mode.| 6496 6497**Error codes** 6498 6499For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6500 6501| ID| Error Message| 6502| ------- | --------------------------------------------| 6503| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6504 6505**Example** 6506 6507```ts 6508import { drawing } from '@kit.ArkGraphics2D'; 6509const brush = new drawing.Brush(); 6510brush.setBlendMode(drawing.BlendMode.SRC); 6511``` 6512 6513### setImageFilter<sup>12+</sup> 6514 6515setImageFilter(filter: ImageFilter | null): void 6516 6517Sets an image filter for this brush. 6518 6519**System capability**: SystemCapability.Graphics.Drawing 6520 6521**Parameters** 6522 6523| Name| Type | Mandatory| Description | 6524| ------ | ------ | ---- | ----------------------- | 6525| filter | [ImageFilter](#imagefilter12) \| null | Yes | Image filter. If null is passed in, the image filter effect of the brush will be cleared.| 6526 6527**Error codes** 6528 6529For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6530 6531| ID| Error Message| 6532| ------- | --------------------------------------------| 6533| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types. | 6534 6535**Example** 6536 6537```ts 6538import {drawing} from '@kit.ArkGraphics2D'; 6539let brush = new drawing.Brush(); 6540let imgFilter = drawing.ImageFilter.createBlurImageFilter(5, 10, drawing.TileMode.DECAL); 6541brush.setImageFilter(imgFilter); 6542brush.setImageFilter(null); 6543``` 6544 6545### getColorFilter<sup>12+</sup> 6546 6547getColorFilter(): ColorFilter 6548 6549Obtains the color filter of this brush. 6550 6551**System capability**: SystemCapability.Graphics.Drawing 6552 6553**Return value** 6554 6555| Type | Description | 6556| --------------------------- | ------------------ | 6557| [ColorFilter](#colorfilter) | Color filter.| 6558 6559**Example** 6560 6561```ts 6562import {drawing} from '@kit.ArkGraphics2D'; 6563let brush = new drawing.Brush(); 6564let setColorFilter = drawing.ColorFilter.createSRGBGammaToLinear(); 6565brush.setColorFilter(setColorFilter); 6566let filter = brush.getColorFilter(); 6567``` 6568 6569### reset<sup>12+</sup> 6570 6571reset(): void 6572 6573Resets this brush to the initial state. 6574 6575**System capability**: SystemCapability.Graphics.Drawing 6576 6577**Example** 6578 6579```ts 6580import { drawing } from '@kit.ArkGraphics2D'; 6581 6582const brush = new drawing.Brush(); 6583brush.reset(); 6584``` 6585 6586## ScaleToFit<sup>12+</sup> 6587 6588Enumerates the modes of scaling a source rectangle into a destination rectangle. 6589 6590**System capability**: SystemCapability.Graphics.Drawing 6591 6592| Name | Value | Description | 6593| ---------------------- | ---- | ------------------------------ | 6594| FILL_SCALE_TO_FIT | 0 | Scales the source rectangle to completely fill the destination rectangle, potentially changing the aspect ratio of the source rectangle. | 6595| 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.| 6596| CENTER_SCALE_TO_FIT | 2 | Scales the source rectangle, preserving its aspect ratio, to align it to the center of the destination rectangle. | 6597| 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. | 6598 6599## Matrix<sup>12+</sup> 6600 6601Implements a matrix. 6602 6603A 3 x 3 matrix is shown as below. 6604 6605 6606 6607Elements 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. 6608If (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: 6609 6610 6611 6612### constructor<sup>12+</sup> 6613 6614constructor() 6615 6616Creates a **Matrix** object. 6617 6618**System capability**: SystemCapability.Graphics.Drawing 6619 6620**Example** 6621 6622```ts 6623import { drawing } from '@kit.ArkGraphics2D'; 6624 6625let matrix = new drawing.Matrix(); 6626``` 6627 6628### setRotation<sup>12+</sup> 6629 6630setRotation(degree: number, px: number, py: number): void 6631 6632Sets this matrix as an identity matrix and rotates it by a given degree around the rotation point (px, py). 6633 6634**System capability**: SystemCapability.Graphics.Drawing 6635 6636**Parameters** 6637 6638| Name | Type | Mandatory | Description | 6639| ----------- | ---------------------------------------- | ---- | ------------------- | 6640| 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.| 6641| px | number | Yes | X coordinate of the rotation point. The value is a floating point number. | 6642| py | number | Yes | Y coordinate of the rotation point. The value is a floating point number. | 6643 6644**Error codes** 6645 6646For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6647 6648| ID| Error Message| 6649| ------- | --------------------------------------------| 6650| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6651 6652**Example** 6653 6654```ts 6655import { drawing } from '@kit.ArkGraphics2D'; 6656 6657let matrix = new drawing.Matrix(); 6658matrix.setRotation(90, 100, 100); 6659``` 6660 6661### setScale<sup>12+</sup> 6662 6663setScale(sx: number, sy: number, px: number, py: number): void 6664 6665Sets this matrix as an identity matrix and scales it with the coefficients (sx, sy) at the scale point (px, py). 6666 6667**System capability**: SystemCapability.Graphics.Drawing 6668 6669**Parameters** 6670 6671| Name | Type | Mandatory | Description | 6672| ----------- | ---------------------------------------- | ---- | ------------------- | 6673| 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. | 6674| 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. | 6675| px | number | Yes | X coordinate of the scale point. The value is a floating point number. | 6676| py | number | Yes | Y coordinate of the scale point. The value is a floating point number. | 6677 6678**Error codes** 6679 6680For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6681 6682| ID| Error Message| 6683| ------- | --------------------------------------------| 6684| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6685 6686**Example** 6687 6688```ts 6689import { drawing } from '@kit.ArkGraphics2D'; 6690 6691let matrix = new drawing.Matrix(); 6692matrix.setScale(100, 100, 150, 150); 6693``` 6694 6695### setTranslation<sup>12+</sup> 6696 6697setTranslation(dx: number, dy: number): void 6698 6699Sets this matrix as an identity matrix and translates it by a given distance (dx, dy). 6700 6701**System capability**: SystemCapability.Graphics.Drawing 6702 6703**Parameters** 6704 6705| Name | Type | Mandatory | Description | 6706| ----------- | ---------------------------------------- | ---- | ------------------- | 6707| 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. | 6708| 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. | 6709 6710**Error codes** 6711 6712For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6713 6714| ID| Error Message| 6715| ------- | --------------------------------------------| 6716| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6717 6718**Example** 6719 6720```ts 6721import { drawing } from '@kit.ArkGraphics2D'; 6722 6723let matrix = new drawing.Matrix(); 6724matrix.setTranslation(100, 100); 6725``` 6726 6727### setMatrix<sup>12+</sup> 6728 6729setMatrix(values: Array\<number>): void 6730 6731Sets parameters for this matrix. 6732 6733**System capability**: SystemCapability.Graphics.Drawing 6734 6735**Parameters** 6736 6737| Name| Type | Mandatory| Description | 6738| ------ | ---------------------------------------------------- | ---- | ---------------- | 6739| 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.| 6740 6741**Error codes** 6742 6743For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6744 6745| ID| Error Message| 6746| ------- | --------------------------------------------| 6747| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 6748 6749**Example** 6750 6751```ts 6752import { drawing } from '@kit.ArkGraphics2D'; 6753 6754let matrix = new drawing.Matrix(); 6755let value : Array<number> = [2, 2, 2, 2, 2, 2, 2, 2, 2]; 6756matrix.setMatrix(value); 6757``` 6758 6759### preConcat<sup>12+</sup> 6760 6761preConcat(matrix: Matrix): void 6762 6763Preconcats the existing matrix with the passed-in matrix. 6764 6765**System capability**: SystemCapability.Graphics.Drawing 6766 6767**Parameters** 6768 6769| Name| Type | Mandatory| Description | 6770| ------ | ---------------------------------------------------- | ---- | ---------------- | 6771| matrix | [Matrix](#matrix12) | Yes | **Matrix** object, which is on the right of a multiplication expression.| 6772 6773**Error codes** 6774 6775For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6776 6777| ID| Error Message| 6778| ------- | --------------------------------------------| 6779| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6780 6781**Example** 6782 6783```ts 6784import { drawing } from '@kit.ArkGraphics2D'; 6785 6786let matrix1 = new drawing.Matrix(); 6787matrix1.setMatrix([2, 1, 3, 1, 2, 1, 3, 1, 2]); 6788let matrix2 = new drawing.Matrix(); 6789matrix2.setMatrix([-2, 1, 3, 1, 0, -1, 3, -1, 2]); 6790matrix1.preConcat(matrix2); 6791``` 6792 6793### isEqual<sup>12+</sup> 6794 6795isEqual(matrix: Matrix): Boolean 6796 6797Checks whether this matrix is equal to another matrix. 6798 6799**System capability**: SystemCapability.Graphics.Drawing 6800 6801**Parameters** 6802 6803| Name| Type | Mandatory| Description | 6804| ------ | ---------------------------------------------------- | ---- | ---------------- | 6805| matrix | [Matrix](#matrix12) | Yes | Matrix to compare.| 6806 6807**Return value** 6808 6809| Type | Description | 6810| --------------------------- | -------------------- | 6811| Boolean | Comparison result of the two matrices. The value **true** means that the two matrices are equal, and **false** means the opposite.| 6812 6813**Error codes** 6814 6815For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6816 6817| ID| Error Message| 6818| ------- | --------------------------------------------| 6819| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6820 6821**Example** 6822 6823```ts 6824import { drawing } from '@kit.ArkGraphics2D'; 6825 6826let matrix1 = new drawing.Matrix(); 6827matrix1.setMatrix([2, 1, 3, 1, 2, 1, 3, 1, 2]); 6828let matrix2 = new drawing.Matrix(); 6829matrix2.setMatrix([-2, 1, 3, 1, 0, -1, 3, -1, 2]); 6830if (matrix1.isEqual(matrix2)) { 6831 console.info("matrix1 and matrix2 are equal."); 6832} else { 6833 console.info("matrix1 and matrix2 are not equal."); 6834} 6835``` 6836 6837### invert<sup>12+</sup> 6838 6839invert(matrix: Matrix): Boolean 6840 6841Inverts this matrix and returns the result. 6842 6843**System capability**: SystemCapability.Graphics.Drawing 6844 6845**Parameters** 6846 6847| Name| Type | Mandatory| Description | 6848| ------ | ---------------------------------------------------- | ---- | ---------------- | 6849| matrix | [Matrix](#matrix12) | Yes | **Matrix** object used to store the inverted matrix.| 6850 6851**Return value** 6852 6853| Type | Description | 6854| --------------------------- | -------------------- | 6855| Boolean | Check result. The value **true** means that the matrix is revertible and the **matrix** object is filled with the inverted matrix, and **false** means that the matrix is not revertible and the **matrix** object is filled with the current matrix (not changed).| 6856 6857**Error codes** 6858 6859For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6860 6861| ID| Error Message| 6862| ------- | --------------------------------------------| 6863| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6864 6865**Example** 6866 6867```ts 6868import { drawing } from '@kit.ArkGraphics2D'; 6869 6870let matrix1 = new drawing.Matrix(); 6871matrix1.setMatrix([2, 1, 3, 1, 2, 1, 3, 1, 2]); 6872let matrix2 = new drawing.Matrix(); 6873matrix2.setMatrix([-2, 1, 3, 1, 0, -1, 3, -1, 2]); 6874if (matrix1.invert(matrix2)) { 6875 console.info("matrix1 is invertible and matrix2 is set as an inverse matrix of the matrix1."); 6876} else { 6877 console.info("matrix1 is not invertible and matrix2 is not changed."); 6878} 6879``` 6880 6881### isIdentity<sup>12+</sup> 6882 6883isIdentity(): Boolean 6884 6885Checks whether this matrix is an identity matrix. 6886 6887**System capability**: SystemCapability.Graphics.Drawing 6888 6889**Return value** 6890 6891| Type | Description | 6892| --------------------------- | -------------------- | 6893| Boolean | Check result. The value **true** means that the matrix is an identity matrix, and **false** means the opposite.| 6894 6895**Example** 6896 6897```ts 6898import { drawing } from '@kit.ArkGraphics2D'; 6899 6900let matrix = new drawing.Matrix(); 6901if (matrix.isIdentity()) { 6902 console.info("matrix is identity."); 6903} else { 6904 console.info("matrix is not identity."); 6905} 6906``` 6907 6908### getValue<sup>12+</sup> 6909 6910getValue(index: number): number 6911 6912Obtains the value of a given index in this matrix. The index ranges from 0 to 8. 6913 6914**System capability**: SystemCapability.Graphics.Drawing 6915 6916**Parameters** 6917 6918| Name | Type | Mandatory| Description | 6919| --------------- | ------- | ---- | ----------------------------------------------------------- | 6920| index | number | Yes | Index. The value is an integer ranging from 0 to 8.| 6921 6922**Return value** 6923 6924| Type | Description | 6925| --------------------- | -------------- | 6926| number | Value obtained, which is an integer.| 6927 6928**Error codes** 6929 6930For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6931 6932| ID| Error Message| 6933| ------- | --------------------------------------------| 6934| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types;3. Parameter verification failed.| 6935 6936**Example** 6937 6938```ts 6939import {drawing} from "@kit.ArkGraphics2D" 6940let matrix = new drawing.Matrix(); 6941for (let i = 0; i < 9; i++) { 6942 console.info("matrix "+matrix.getValue(i).toString()); 6943} 6944``` 6945 6946### postRotate<sup>12+</sup> 6947 6948postRotate(degree: number, px: number, py: number): void 6949 6950Post 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). 6951 6952**System capability**: SystemCapability.Graphics.Drawing 6953 6954**Parameters** 6955 6956| Name | Type | Mandatory| Description | 6957| --------------- | ------- | ---- | ----------------------------------------------------------- | 6958| 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.| 6959| px | number | Yes | X coordinate of the rotation point. The value is a floating point number.| 6960| py | number | Yes | Y coordinate of the rotation point. The value is a floating point number.| 6961 6962**Error codes** 6963 6964For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 6965 6966| ID| Error Message| 6967| ------- | --------------------------------------------| 6968| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6969 6970**Example** 6971 6972```ts 6973import {drawing} from "@kit.ArkGraphics2D" 6974let matrix = new drawing.Matrix(); 6975let degree: number = 2; 6976let px: number = 3; 6977let py: number = 4; 6978matrix.postRotate(degree, px, py); 6979console.info("matrix= "+matrix.getAll().toString()); 6980``` 6981 6982### postScale<sup>12+</sup> 6983 6984postScale(sx: number, sy: number, px: number, py: number): void 6985 6986Post 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). 6987 6988**System capability**: SystemCapability.Graphics.Drawing 6989 6990**Parameters** 6991 6992| Name | Type | Mandatory| Description | 6993| --------------- | ------- | ---- | ----------------------------------------------------------- | 6994| 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.| 6995| 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.| 6996| px | number | Yes | X coordinate of the scale point. The value is a floating point number.| 6997| py | number | Yes | Y coordinate of the scale point. The value is a floating point number.| 6998 6999**Error codes** 7000 7001For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7002 7003| ID| Error Message| 7004| ------- | --------------------------------------------| 7005| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7006 7007**Example** 7008 7009```ts 7010import {drawing} from "@kit.ArkGraphics2D" 7011let matrix = new drawing.Matrix(); 7012let sx: number = 2; 7013let sy: number = 0.5; 7014let px: number = 1; 7015let py: number = 1; 7016matrix.postScale(sx, sy, px, py); 7017console.info("matrix= "+matrix.getAll().toString()); 7018``` 7019 7020### postTranslate<sup>12+</sup> 7021 7022postTranslate(dx: number, dy: number): void 7023 7024Post multiplies this matrix by a matrix that is derived from an identity matrix after it has been translated by a given distance (dx, dy). 7025 7026**System capability**: SystemCapability.Graphics.Drawing 7027 7028**Parameters** 7029 7030| Name | Type | Mandatory| Description | 7031| --------------- | ------- | ---- | ----------------------------------------------------------- | 7032| 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.| 7033| 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.| 7034 7035**Error codes** 7036 7037For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7038 7039| ID| Error Message| 7040| ------- | --------------------------------------------| 7041| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7042 7043**Example** 7044 7045```ts 7046import {drawing} from "@kit.ArkGraphics2D" 7047let matrix = new drawing.Matrix(); 7048let dx: number = 3; 7049let dy: number = 4; 7050matrix.postTranslate(dx, dy); 7051console.info("matrix= "+matrix.getAll().toString()); 7052``` 7053 7054### preRotate<sup>12+</sup> 7055 7056preRotate(degree: number, px: number, py: number): void 7057 7058Premultiplies 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). 7059 7060**System capability**: SystemCapability.Graphics.Drawing 7061 7062**Parameters** 7063 7064| Name | Type | Mandatory| Description | 7065| --------------- | ------- | ---- | ----------------------------------------------------------- | 7066| 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.| 7067| px | number | Yes | X coordinate of the rotation point. The value is a floating point number.| 7068| py | number | Yes | Y coordinate of the rotation point. The value is a floating point number.| 7069 7070**Error codes** 7071 7072For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7073 7074| ID| Error Message| 7075| ------- | --------------------------------------------| 7076| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7077 7078**Example** 7079 7080```ts 7081import {drawing} from "@kit.ArkGraphics2D" 7082let matrix = new drawing.Matrix(); 7083let degree: number = 2; 7084let px: number = 3; 7085let py: number = 4; 7086matrix.preRotate(degree, px, py); 7087console.info("matrix= "+matrix.getAll().toString()); 7088``` 7089 7090### preScale<sup>12+</sup> 7091 7092preScale(sx: number, sy: number, px: number, py: number): void 7093 7094Premultiplies 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). 7095 7096**System capability**: SystemCapability.Graphics.Drawing 7097 7098**Parameters** 7099 7100| Name | Type | Mandatory| Description | 7101| --------------- | ------- | ---- | ----------------------------------------------------------- | 7102| 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.| 7103| 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.| 7104| px | number | Yes | X coordinate of the scale point. The value is a floating point number.| 7105| py | number | Yes | Y coordinate of the scale point. The value is a floating point number.| 7106 7107**Error codes** 7108 7109For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7110 7111| ID| Error Message| 7112| ------- | --------------------------------------------| 7113| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7114 7115**Example** 7116 7117```ts 7118import {drawing} from "@kit.ArkGraphics2D" 7119let matrix = new drawing.Matrix(); 7120let sx: number = 2; 7121let sy: number = 0.5; 7122let px: number = 1; 7123let py: number = 1; 7124matrix.preScale(sx, sy, px, py); 7125console.info("matrix"+matrix.getAll().toString()); 7126``` 7127 7128### preTranslate<sup>12+</sup> 7129 7130preTranslate(dx: number, dy: number): void 7131 7132Premultiplies this matrix by a matrix that is derived from an identity matrix after it has been translated by a given distance (dx, dy). 7133 7134**System capability**: SystemCapability.Graphics.Drawing 7135 7136**Parameters** 7137 7138| Name | Type | Mandatory| Description | 7139| --------------- | ------- | ---- | ----------------------------------------------------------- | 7140| 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.| 7141| 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.| 7142 7143**Error codes** 7144 7145For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7146 7147| ID| Error Message| 7148| ------- | --------------------------------------------| 7149| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7150 7151**Example** 7152 7153```ts 7154import {drawing} from "@kit.ArkGraphics2D" 7155let matrix = new drawing.Matrix(); 7156let dx: number = 3; 7157let dy: number = 4; 7158matrix.preTranslate(dx, dy); 7159console.info("matrix"+matrix.getAll().toString()); 7160``` 7161 7162### reset<sup>12+</sup> 7163 7164reset(): void 7165 7166Resets this matrix to an identity matrix. 7167 7168**System capability**: SystemCapability.Graphics.Drawing 7169 7170**Example** 7171 7172```ts 7173import {drawing} from "@kit.ArkGraphics2D" 7174let matrix = new drawing.Matrix(); 7175matrix.postScale(2, 3, 4, 5); 7176matrix.reset(); 7177console.info("matrix= "+matrix.getAll().toString()); 7178``` 7179 7180### mapPoints<sup>12+</sup> 7181 7182mapPoints(src: Array\<common2D.Point>): Array\<common2D.Point> 7183 7184Maps a source point array to a destination point array by means of matrix transformation. 7185 7186**System capability**: SystemCapability.Graphics.Drawing 7187 7188**Parameters** 7189 7190| Name | Type | Mandatory| Description | 7191| --------------- | ------- | ---- | ----------------------------------------------------------- | 7192| src | Array\<[common2D.Point](js-apis-graphics-common2D.md#point)> | Yes | Array of source points.| 7193 7194**Return value** 7195 7196| Type | Description | 7197| --------------------- | -------------- | 7198| Array\<[common2D.Point](js-apis-graphics-common2D.md#point)> | Array of points obtained.| 7199 7200**Error codes** 7201 7202For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7203 7204| ID| Error Message| 7205| ------- | --------------------------------------------| 7206| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7207 7208**Example** 7209 7210```ts 7211import {drawing,common2D} from "@kit.ArkGraphics2D" 7212let src: Array<common2D.Point> = []; 7213src.push({x: 15, y: 20}); 7214src.push({x: 20, y: 15}); 7215src.push({x: 30, y: 10}); 7216let matrix = new drawing.Matrix(); 7217let dst: Array<common2D.Point> = matrix.mapPoints(src); 7218console.info("matrix= src: "+JSON.stringify(src)); 7219console.info("matrix= dst: "+JSON.stringify(dst)); 7220``` 7221 7222### getAll<sup>12+</sup> 7223 7224getAll(): Array\<number> 7225 7226Obtains all element values of this matrix. 7227 7228**System capability**: SystemCapability.Graphics.Drawing 7229 7230**Return value** 7231 7232| Type | Description | 7233| --------------------- | -------------- | 7234| Array\<number> | Array of matrix values obtained. The length is 9. Each value is a floating point number.| 7235 7236**Example** 7237 7238```ts 7239import {drawing} from "@kit.ArkGraphics2D" 7240let matrix = new drawing.Matrix(); 7241console.info("matrix "+ matrix.getAll()); 7242``` 7243 7244### mapRect<sup>12+</sup> 7245 7246mapRect(dst: common2D.Rect, src: common2D.Rect): boolean 7247 7248Sets 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. 7249 7250 7251 7252**System capability**: SystemCapability.Graphics.Drawing 7253 7254**Parameters** 7255 7256| Name | Type | Mandatory| Description | 7257| --------------- | ------- | ---- | ----------------------------------------------------------- | 7258| dst | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | **Rectangle** object, which is used to store the bounding rectangle.| 7259| src |[common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Source rectangle.| 7260 7261**Return value** 7262 7263| Type | Description | 7264| --------------------- | -------------- | 7265| boolean | Check result. The value **true** means that the shape retains a rectangular form, and **false** means the opposite.| 7266 7267**Error codes** 7268 7269For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7270 7271| ID| Error Message| 7272| ------- | --------------------------------------------| 7273| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7274 7275**Example** 7276 7277```ts 7278import {drawing,common2D} from "@kit.ArkGraphics2D" 7279let dst: common2D.Rect = { left: 100, top: 20, right: 130, bottom: 60 }; 7280let src: common2D.Rect = { left: 100, top: 80, right: 130, bottom: 120 }; 7281let matrix = new drawing.Matrix(); 7282if (matrix.mapRect(dst, src)) { 7283 console.info("matrix= dst "+JSON.stringify(dst)); 7284} 7285``` 7286 7287### setRectToRect<sup>12+</sup> 7288 7289setRectToRect(src: common2D.Rect, dst: common2D.Rect, scaleToFit: ScaleToFit): boolean 7290 7291Sets this matrix to a transformation matrix that maps a source rectangle to a destination rectangle. 7292 7293**System capability**: SystemCapability.Graphics.Drawing 7294 7295**Parameters** 7296 7297| Name | Type | Mandatory| Description | 7298| --------------- | ------- | ---- | ----------------------------------------------------------- | 7299| src | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Source rectangle.| 7300| dst | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Destination rectangle.| 7301| scaleToFit | [ScaleToFit](#scaletofit12) | Yes | Mapping mode from the source rectangle to the target rectangle.| 7302 7303**Return value** 7304 7305| Type | Description | 7306| --------------------- | -------------- | 7307| boolean | Check result. The value **true** means that the matrix can represent the mapping, and **false** means the opposite. In particular, if either the width or the height of the source rectangle is less than or equal to 0, the API returns **false** and sets the matrix to an identity matrix. If either the width or height of the destination rectangle is less than or equal to 0, the API returns **true** and sets the matrix to a matrix with all values 0, except for a perspective scaling coefficient of 1.| 7308 7309**Error codes** 7310 7311For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7312 7313| ID| Error Message| 7314| ------- | --------------------------------------------| 7315| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7316 7317**Example** 7318 7319```ts 7320import {drawing,common2D} from "@kit.ArkGraphics2D" 7321let src: common2D.Rect = { left: 100, top: 100, right: 300, bottom: 300 }; 7322let dst: common2D.Rect = { left: 200, top: 200, right: 600, bottom: 600 }; 7323let scaleToFit: drawing.ScaleToFit = drawing.ScaleToFit.FILL_SCALE_TO_FIT 7324let matrix = new drawing.Matrix(); 7325if (matrix.setRectToRect(src, dst, scaleToFit)) { 7326 console.info("matrix"+matrix.getAll().toString()); 7327} 7328``` 7329 7330### setPolyToPoly<sup>12+</sup> 7331 7332setPolyToPoly(src: Array\<common2D.Point>, dst: Array\<common2D.Point>, count: number): boolean 7333 7334Sets 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]. 7335 7336**System capability**: SystemCapability.Graphics.Drawing 7337 7338**Parameters** 7339 7340| Name | Type | Mandatory| Description | 7341| --------------- | ------- | ---- | ----------------------------------------------------------- | 7342| 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**.| 7343| 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**.| 7344| count | number | Yes | Number of points in each array. The value is an integer.| 7345 7346**Return value** 7347 7348| Type | Description | 7349| --------------------- | -------------- | 7350| boolean | Check result. The value **true** means that the setting is successful, and **false** means the opposite.| 7351 7352**Error codes** 7353 7354For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7355 7356| ID| Error Message| 7357| ------- | --------------------------------------------| 7358| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7359 7360**Example** 7361 7362```ts 7363import {drawing,common2D} from "@kit.ArkGraphics2D" 7364let srcPoints: Array<common2D.Point> = [ {x: 10, y: 20}, {x: 200, y: 150} ]; 7365let dstPoints: Array<common2D.Point> = [{ x:0, y: 10 }, { x:300, y: 600 }]; 7366let matrix = new drawing.Matrix(); 7367if (matrix.setPolyToPoly(srcPoints, dstPoints, 2)) { 7368 console.info("matrix"+matrix.getAll().toString()); 7369} 7370``` 7371 7372## RoundRect<sup>12+</sup> 7373 7374Implements a rounded rectangle. 7375 7376### constructor<sup>12+</sup> 7377 7378constructor(rect: common2D.Rect, xRadii: number, yRadii: number) 7379 7380A 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. 7381 7382**System capability**: SystemCapability.Graphics.Drawing 7383 7384**Parameters** 7385 7386| Name | Type | Mandatory | Description | 7387| ----------- | ---------------------------------------- | ---- | ------------------- | 7388| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | Yes | Rectangle that encloses the rounded rectangle to create. | 7389| xRadii | number | Yes | Radius of the rounded corner on the X axis. The value is a floating point number. A negative number is invalid. | 7390| yRadii | number | Yes | Radius of the rounded corner on the Y axis. The value is a floating point number. A negative number is invalid. | 7391 7392**Error codes** 7393 7394For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7395 7396| ID| Error Message| 7397| ------- | --------------------------------------------| 7398| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7399 7400**Example** 7401 7402```ts 7403import { common2D, drawing } from '@kit.ArkGraphics2D'; 7404 7405let rect: common2D.Rect = {left : 100, top : 100, right : 500, bottom : 300}; 7406let roundRect = new drawing.RoundRect(rect, 50, 50); 7407``` 7408### setCorner<sup>12+</sup> 7409 7410setCorner(pos: CornerPos, x: number, y: number): void 7411 7412Sets the radii of the specified rounded corner in this rounded rectangle. 7413 7414**System capability**: SystemCapability.Graphics.Drawing 7415 7416**Parameters** 7417 7418| Name | Type | Mandatory| Description | 7419| -------- | -------------------------------------------- | ---- | ------------------------------- | 7420| pos | [CornerPos](#cornerpos12) | Yes | Position of the rounded corner. | 7421| x | number | Yes | Radius of the rounded corner on the X axis. The value is a floating point number. A negative number is invalid.| 7422| y | number | Yes | Radius of the rounded corner on the Y axis. The value is a floating point number. A negative number is invalid.| 7423 7424**Error codes** 7425 7426For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7427 7428| ID| Error Message| 7429| ------- | --------------------------------------------| 7430| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7431 7432**Example** 7433 7434```ts 7435import { drawing } from '@kit.ArkGraphics2D'; 7436let roundRect : drawing.RoundRect = new drawing.RoundRect({left: 0, top: 0, right: 300, bottom: 300}, 50, 50); 7437roundRect.setCorner(drawing.CornerPos.TOP_LEFT_POS, 150, 150); 7438``` 7439 7440### getCorner<sup>12+</sup> 7441 7442getCorner(pos: CornerPos): common2D.Point 7443 7444Obtains the radii of the specified rounded corner in this rounded rectangle. 7445 7446**System capability**: SystemCapability.Graphics.Drawing 7447 7448**Parameters** 7449 7450| Name | Type | Mandatory| Description | 7451| -------- | -------------------------------------------- | ---- | ------------------------------- | 7452| pos | [CornerPos](#cornerpos12) | Yes | Position of the rounded corner. | 7453 7454**Return value** 7455 7456| Type | Description | 7457| --------------------- | -------------- | 7458| [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.| 7459 7460**Error codes** 7461 7462For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7463 7464| ID| Error Message| 7465| ------- | --------------------------------------------| 7466| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7467 7468**Example** 7469 7470```ts 7471import { drawing } from '@kit.ArkGraphics2D'; 7472let roundRect : drawing.RoundRect = new drawing.RoundRect({left: 0, top: 0, right: 300, bottom: 300}, 50, 50); 7473let cornerRadius = roundRect.getCorner(drawing.CornerPos.BOTTOM_LEFT_POS); 7474console.info("getCorner---"+cornerRadius.x) 7475console.info("getCorner---"+cornerRadius.y) 7476``` 7477 7478### offset<sup>12+</sup> 7479 7480offset(dx: number, dy: number): void 7481 7482Translates this rounded rectangle by an offset along the X axis and Y axis. 7483 7484**System capability**: SystemCapability.Graphics.Drawing 7485 7486**Parameters** 7487 7488| Name | Type | Mandatory| Description | 7489| -------- | -------------------------------------------- | ---- | ------------------------------- | 7490| 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. | 7491| 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. | 7492 7493**Error codes** 7494 7495For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7496 7497| ID| Error Message| 7498| ------- | --------------------------------------------| 7499| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7500 7501**Example** 7502 7503```ts 7504import { drawing } from '@kit.ArkGraphics2D'; 7505let roundRect : drawing.RoundRect = new drawing.RoundRect({left: 0, top: 0, right: 300, bottom: 300}, 50, 50); 7506roundRect.offset(100, 100); 7507``` 7508 7509## Region<sup>12+</sup> 7510 7511Describes a region, which is used to describe the region where the shape can be drawn. 7512 7513### isPointContained<sup>12+</sup> 7514 7515isPointContained(x: number, y: number) : boolean 7516 7517Checks whether a point is contained in this region. 7518 7519**System capability**: SystemCapability.Graphics.Drawing 7520 7521**Parameters** 7522 7523| Name| Type | Mandatory| Description | 7524| ------ | ------ | ---- | ----------------------- | 7525| 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.| 7526| 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.| 7527 7528**Return value** 7529 7530| Type | Description | 7531| ------- | -------------- | 7532| boolean | Check result. The value **true** means that the point is contained, and **false** means the opposite.| 7533 7534**Error codes** 7535 7536For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7537 7538| ID| Error Message| 7539| ------- | --------------------------------------------| 7540| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7541 7542**Example** 7543 7544```ts 7545import { RenderNode } from '@kit.ArkUI'; 7546class DrawingRenderNode extends RenderNode { 7547 draw(context : DrawContext) { 7548 const canvas = context.canvas; 7549 const pen = new drawing.Pen(); 7550 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 7551 pen.setStrokeWidth(10); 7552 canvas.attachPen(pen); 7553 let region = new drawing.Region(); 7554 region.setRect(100, 100, 400, 400); 7555 let flag: boolean = false; 7556 flag = region.isPointContained(200,200); 7557 console.info("region isPointContained : " + flag); 7558 canvas.drawPoint(200,200); 7559 canvas.drawRegion(region); 7560 canvas.detachPen(); 7561 } 7562} 7563``` 7564 7565### isRegionContained<sup>12+</sup> 7566 7567isRegionContained(other: Region) : boolean 7568 7569Checks whether another region is contained in this region. 7570 7571**System capability**: SystemCapability.Graphics.Drawing 7572 7573**Parameters** 7574 7575| Name| Type | Mandatory| Description | 7576| ------ | ------ | ---- | ----------------------- | 7577| other | [Region](#region12) | Yes | **Region** object.| 7578 7579**Return value** 7580 7581| Type | Description | 7582| ------- | -------------- | 7583| boolean | Check result. The value **true** means that the other region is contained, and **false** means the opposite.| 7584 7585**Error codes** 7586 7587For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7588 7589| ID| Error Message| 7590| ------- | --------------------------------------------| 7591| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7592 7593**Example** 7594 7595```ts 7596import { RenderNode } from '@kit.ArkUI'; 7597class DrawingRenderNode extends RenderNode { 7598 draw(context : DrawContext) { 7599 const canvas = context.canvas; 7600 const pen = new drawing.Pen(); 7601 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 7602 pen.setStrokeWidth(10); 7603 canvas.attachPen(pen); 7604 let region = new drawing.Region(); 7605 let other = new drawing.Region(); 7606 region.setRect(100, 100, 400, 400); 7607 other.setRect(150, 150, 250 ,250); 7608 let flag: boolean = false; 7609 flag = region.isRegionContained(other); 7610 console.info("region isRegionContained : " + flag); 7611 canvas.drawRegion(region); 7612 canvas.drawRegion(other); 7613 canvas.detachPen(); 7614 } 7615} 7616``` 7617 7618### op<sup>12+</sup> 7619 7620op(region: Region, regionOp: RegionOp) : boolean 7621 7622Performs an operation on this region and another region, and stores the resulting region in this **Region** object. 7623 7624**System capability**: SystemCapability.Graphics.Drawing 7625 7626**Parameters** 7627 7628| Name| Type | Mandatory| Description | 7629| ------ | ------ | ---- | ----------------------- | 7630| region | [Region](#region12) | Yes | **Region** object.| 7631| regionOp | [RegionOp](#regionop12) | Yes | Operation mode of the region.| 7632 7633**Return value** 7634 7635| Type | Description | 7636| ------- | -------------- | 7637| boolean | Check result. The value **true** means that the resulting region is stored in the current **Region** object, and **false** means the opposite.| 7638 7639**Error codes** 7640 7641For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7642 7643| ID| Error Message| 7644| ------- | --------------------------------------------| 7645| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7646 7647**Example** 7648 7649```ts 7650import { RenderNode } from '@kit.ArkUI'; 7651class DrawingRenderNode extends RenderNode { 7652 draw(context : DrawContext) { 7653 const canvas = context.canvas; 7654 const pen = new drawing.Pen(); 7655 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 7656 pen.setStrokeWidth(10); 7657 canvas.attachPen(pen); 7658 let region = new drawing.Region(); 7659 region.setRect(200, 200, 400, 400); 7660 let othregion = new drawing.Region(); 7661 othregion.setRect(110, 110, 240, 240); 7662 let flag: boolean = false; 7663 flag = region.op(othregion,drawing.RegionOp.REPLACE); 7664 console.info("region op : " + flag); 7665 canvas.drawRegion(region); 7666 canvas.detachPen(); 7667 } 7668} 7669``` 7670 7671### quickReject<sup>12+</sup> 7672 7673quickReject(left: number, top: number, right: number, bottom: number) : boolean 7674 7675Checks 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. 7676 7677**System capability**: SystemCapability.Graphics.Drawing 7678 7679**Parameters** 7680 7681| Name| Type | Mandatory| Description | 7682| ------ | ------ | ---- | ----------------------- | 7683| 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.| 7684| 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.| 7685| 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.| 7686| 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.| 7687 7688**Return value** 7689 7690| Type | Description | 7691| ------- | -------------- | 7692| boolean | Check result. The value **true** means that the two do not intersect, and **false** means the opposite.| 7693 7694**Error codes** 7695 7696For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7697 7698| ID| Error Message| 7699| ------- | --------------------------------------------| 7700| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7701 7702**Example** 7703 7704```ts 7705import { RenderNode } from '@kit.ArkUI'; 7706class DrawingRenderNode extends RenderNode { 7707 draw(context : DrawContext) { 7708 const canvas = context.canvas; 7709 const pen = new drawing.Pen(); 7710 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 7711 pen.setStrokeWidth(10); 7712 canvas.attachPen(pen); 7713 let region = new drawing.Region(); 7714 region.setRect(100, 100, 400, 400); 7715 let flag: boolean = false; 7716 flag = region.quickReject(50, 50, 70, 70); 7717 console.info("region quickReject : " + flag); 7718 canvas.drawRegion(region); 7719 canvas.detachPen(); 7720 } 7721} 7722``` 7723 7724### setPath<sup>12+</sup> 7725 7726setPath(path: Path, clip: Region) : boolean 7727 7728Sets a region that matches the outline of a path within the cropping area. 7729 7730**System capability**: SystemCapability.Graphics.Drawing 7731 7732**Parameters** 7733 7734| Name| Type | Mandatory| Description | 7735| ------ | ------ | ---- | ----------------------- | 7736| path | [Path](#path) | Yes | **Path** object.| 7737| clip | [Region](#region12) | Yes | **Region** object.| 7738 7739**Return value** 7740 7741| Type | Description | 7742| ------- | -------------- | 7743| boolean | Result of the setting operation. The value **true** means that the setting is successful, and **false** means the opposite.| 7744 7745**Error codes** 7746 7747For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7748 7749| ID| Error Message| 7750| ------- | --------------------------------------------| 7751| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7752 7753**Example** 7754 7755```ts 7756import { RenderNode } from '@kit.ArkUI'; 7757class DrawingRenderNode extends RenderNode { 7758 draw(context : DrawContext) { 7759 const canvas = context.canvas; 7760 const pen = new drawing.Pen(); 7761 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 7762 pen.setStrokeWidth(10); 7763 canvas.attachPen(pen); 7764 let region = new drawing.Region(); 7765 let path = new drawing.Path(); 7766 region.setRect(100, 100, 400, 400); 7767 path.arcTo(50, 50, 300, 300, 0, 359); 7768 let flag: boolean = false; 7769 flag = region.setPath(path,region); 7770 console.info("region setPath : " + flag); 7771 canvas.drawRegion(region); 7772 canvas.detachPen(); 7773 } 7774} 7775``` 7776 7777### setRect<sup>12+</sup> 7778 7779setRect(left: number, top: number, right: number, bottom: number) : boolean 7780 7781Sets a rectangle. 7782 7783**System capability**: SystemCapability.Graphics.Drawing 7784 7785**Parameters** 7786 7787| Name| Type | Mandatory| Description | 7788| ------ | ------ | ---- | ----------------------- | 7789| 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.| 7790| 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.| 7791| 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.| 7792| 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.| 7793 7794**Return value** 7795 7796| Type | Description | 7797| ------- | -------------- | 7798| boolean | Result of the setting operation. The value **true** means that the setting is successful, and **false** means the opposite.| 7799 7800**Error codes** 7801 7802For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7803 7804| ID| Error Message| 7805| ------- | --------------------------------------------| 7806| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7807 7808**Example** 7809 7810```ts 7811import { RenderNode } from '@kit.ArkUI'; 7812class DrawingRenderNode extends RenderNode { 7813 draw(context : DrawContext) { 7814 const canvas = context.canvas; 7815 const pen = new drawing.Pen(); 7816 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 7817 pen.setStrokeWidth(10); 7818 canvas.attachPen(pen); 7819 let region = new drawing.Region(); 7820 let flag: boolean = false; 7821 flag = region.setRect(50, 50, 300, 300); 7822 console.info("region setRect : " + flag); 7823 canvas.drawRegion(region); 7824 canvas.detachPen(); 7825 } 7826} 7827``` 7828 7829## TileMode<sup>12+</sup> 7830 7831Enumerates the tile modes of the shader effect. 7832 7833**System capability**: SystemCapability.Graphics.Drawing 7834 7835| Name | Value | Description | 7836| ---------------------- | ---- | ------------------------------ | 7837| CLAMP | 0 | Replicates the edge color if the shader effect draws outside of its original boundary.| 7838| REPEAT | 1 | Repeats the shader effect in both horizontal and vertical directions.| 7839| MIRROR | 2 | Repeats the shader effect in both horizontal and vertical directions, alternating mirror images.| 7840| DECAL | 3 | Renders the shader effect only within the original boundary.| 7841 7842## ShaderEffect<sup>12+</sup> 7843 7844Implements 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. 7845 7846### createColorShader<sup>12+</sup> 7847 7848static createColorShader(color: number): ShaderEffect 7849 7850Creates a **ShaderEffect** object with a single color. 7851 7852**System capability**: SystemCapability.Graphics.Drawing 7853 7854**Parameters** 7855 7856| Name| Type | Mandatory| Description | 7857| ------ | -------------------------------------------------- | ---- | -------------- | 7858| color | number | Yes | Color in the ARGB format. The value is a 32-bit unsigned integer.| 7859 7860**Return value** 7861 7862| Type | Description | 7863| ------- | ------------------------- | 7864| [ShaderEffect](#shadereffect12) | **ShaderEffect** object with a single color.| 7865 7866**Error codes** 7867 7868For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7869 7870| ID| Error Message| 7871| ------- | --------------------------------------------| 7872| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7873 7874**Example** 7875 7876```ts 7877import { drawing } from '@kit.ArkGraphics2D'; 7878 7879let shaderEffect = drawing.ShaderEffect.createColorShader(0xFFFF0000); 7880``` 7881 7882### createLinearGradient<sup>12+</sup> 7883 7884static createLinearGradient(startPt: common2D.Point, endPt: common2D.Point, colors: Array 7885\<number>, mode: TileMode, pos?: Array\<number> | null, matrix?: Matrix | null): ShaderEffect 7886 7887Creates a **ShaderEffect** object that generates a linear gradient between two points. 7888 7889**System capability**: SystemCapability.Graphics.Drawing 7890 7891**Parameters** 7892 7893| Name| Type | Mandatory| Description | 7894| ------ | -------------------------------------------------- | ---- | -------------- | 7895| startPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | Start point.| 7896| endPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | End point.| 7897| colors | Array\<number> | Yes | Array of colors to distribute between the two points. The values in the array are 32-bit (ARGB) unsigned integers.| 7898| mode | [TileMode](#tilemode12) | Yes | Tile mode of the shader effect.| 7899| 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.| 7900| 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.| 7901 7902 7903 7904The 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. 7905 7906**Return value** 7907 7908| Type | Description | 7909| ------- | ------------------------- | 7910| [ShaderEffect](#shadereffect12) | **ShaderEffect** object created.| 7911 7912**Error codes** 7913 7914For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7915 7916| ID| Error Message| 7917| ------- | --------------------------------------------| 7918| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 7919 7920**Example** 7921 7922```ts 7923import { common2D,drawing } from '@kit.ArkGraphics2D'; 7924 7925let startPt: common2D.Point = { x: 100, y: 100 }; 7926let endPt: common2D.Point = { x: 300, y: 300 }; 7927let shaderEffect = drawing.ShaderEffect.createLinearGradient(startPt, endPt, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 7928``` 7929 7930### createRadialGradient<sup>12+</sup> 7931 7932static createRadialGradient(centerPt: common2D.Point, radius: number, colors: Array\<number>, mode: TileMode, pos?: Array\<number> | null, matrix?: Matrix | null): ShaderEffect; 7933 7934Creates a **ShaderEffect** object that generates a radial gradient based on the center and radius of a circle. The radial gradient transitions colors from the center to the ending shape in a radial manner. 7935 7936**System capability**: SystemCapability.Graphics.Drawing 7937 7938**Parameters** 7939 7940| Name| Type | Mandatory| Description | 7941| ------ | -------------------------------------------------- | ---- | -------------- | 7942| centerPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | Center of the circle.| 7943| radius | number | Yes | Radius of the gradient. A negative number is invalid. The value is a floating point number.| 7944| 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.| 7945| mode | [TileMode](#tilemode12) | Yes | Tile mode of the shader effect.| 7946| 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.| 7947| 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.| 7948 7949 7950 7951The 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. 7952 7953**Return value** 7954 7955| Type | Description | 7956| ------- | ------------------------- | 7957| [ShaderEffect](#shadereffect12) | **ShaderEffect** object created.| 7958 7959**Error codes** 7960 7961For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 7962 7963| ID| Error Message| 7964| ------- | --------------------------------------------| 7965| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 7966 7967**Example** 7968 7969```ts 7970import { common2D,drawing } from '@kit.ArkGraphics2D'; 7971 7972let centerPt: common2D.Point = { x: 100, y: 100 }; 7973let shaderEffect = drawing.ShaderEffect.createRadialGradient(centerPt, 100, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 7974``` 7975 7976### createSweepGradient<sup>12+</sup> 7977 7978static createSweepGradient(centerPt: common2D.Point, colors: Array\<number>, 7979 mode: TileMode, startAngle: number, endAngle: number, pos?: Array\<number> | null, 7980 matrix?: Matrix | null): ShaderEffect; 7981 7982Creates a **ShaderEffect** object that generates a sweep gradient based on the center. A sweep gradient paints a gradient of colors in a clockwise or counterclockwise direction based on a given circle center. 7983 7984**System capability**: SystemCapability.Graphics.Drawing 7985 7986**Parameters** 7987 7988| Name| Type | Mandatory| Description | 7989| ------ | -------------------------------------------------- | ---- | -------------- | 7990| centerPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | Center of the circle.| 7991| 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.| 7992| mode | [TileMode](#tilemode12) | Yes | Tile mode of the shader effect.| 7993| 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.| 7994| 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.| 7995| 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.| 7996| 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.| 7997 7998 7999 8000The 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. 8001 8002**Return value** 8003 8004| Type | Description | 8005| ------- | ------------------------- | 8006| [ShaderEffect](#shadereffect12) | **ShaderEffect** object created.| 8007 8008**Error codes** 8009 8010For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8011 8012| ID| Error Message| 8013| ------- | --------------------------------------------| 8014| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 8015 8016**Example** 8017 8018```ts 8019import { common2D,drawing } from '@kit.ArkGraphics2D'; 8020 8021let centerPt: common2D.Point = { x: 100, y: 100 }; 8022let shaderEffect = drawing.ShaderEffect.createSweepGradient(centerPt, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT, 100, 200); 8023``` 8024 8025### createConicalGradient<sup>12+</sup> 8026 8027static createConicalGradient(startPt: common2D.Point, startRadius: number, endPt: common2D.Point, endRadius: number, colors: Array\<number>, mode: TileMode, 8028pos?: Array\<number> | null, matrix?: Matrix | null): ShaderEffect; 8029 8030Creates a **ShaderEffect** object that generates a conical gradient between two given circles. 8031 8032**System capability**: SystemCapability.Graphics.Drawing 8033 8034**Parameters** 8035 8036| Name| Type | Mandatory| Description | 8037| ------ | -------------------------------------------------- | ---- | -------------- | 8038| startPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes |Center of the start circle of the gradient.| 8039| startRadius | number | Yes | Radius of the start circle of the gradient. A negative number is invalid. The value is a floating point number.| 8040| endPt | [common2D.Point](js-apis-graphics-common2D.md#point) | Yes | Center of the end circle of the gradient.| 8041| endRadius | number | Yes | Radius of the end circle of the gradient. A negative value is invalid. The value is a floating point number.| 8042| 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.| 8043| mode | [TileMode](#tilemode12) | Yes | Tile mode of the shader effect.| 8044| 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.| 8045| 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.| 8046 8047 8048 8049The 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. 8050 8051**Return value** 8052 8053| Type | Description | 8054| ------- | ------------------------- | 8055| [ShaderEffect](#shadereffect12) | **ShaderEffect** object created.| 8056 8057**Error codes** 8058 8059For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8060 8061| ID| Error Message| 8062| ------- | --------------------------------------------| 8063| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 8064 8065**Example** 8066 8067```ts 8068import { common2D,drawing } from '@kit.ArkGraphics2D'; 8069 8070let startPt: common2D.Point = { x: 100, y: 100 }; 8071let endPt: common2D.Point = {x: 200, y: 200}; 8072let shaderEffect = drawing.ShaderEffect.createConicalGradient(startPt, 100, endPt, 50, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 8073``` 8074 8075## Tool<sup>15+</sup> 8076 8077A utility class that provides only static methods to convert data structs defined in other modules and [common2D](js-apis-graphics-common2D.md). 8078 8079### makeColorFromResourceColor<sup>15+</sup> 8080 8081static makeColorFromResourceColor(resourceColor: ResourceColor): common2D.Color 8082 8083Converts a color value of the **ResourceColor** type to a **common2D.Color** object. 8084 8085**System capability**: SystemCapability.Graphics.Drawing 8086 8087**Parameters** 8088 8089| Name| Type | Mandatory| Description | 8090| ------ | -------------------------------------------------- | ---- | -------------- | 8091| 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**.)| 8092 8093**Return value** 8094 8095| Type | Description | 8096| ------- | ------------------------- | 8097| [common2D.Color](js-apis-graphics-common2D.md#color) | **Common2D.Color** object. If the conversion fails, a null pointer is returned.| 8098 8099**Error codes** 8100 8101For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 8102 8103| ID| Error Message| 8104| ------- | --------------------------------------------| 8105| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8106 8107**Example** 8108 8109```ts 8110import { drawing, common2D } from '@kit.ArkGraphics2D'; 8111 8112// Color 8113let color1: common2D.Color = drawing.Tool.makeColorFromResourceColor(Color.Blue); 8114 8115// Number 8116let color2: common2D.Color = drawing.Tool.makeColorFromResourceColor(0xffc0cb); 8117let color3: common2D.Color = drawing.Tool.makeColorFromResourceColor(0x11ffa500); 8118 8119// String 8120let color4: common2D.Color = drawing.Tool.makeColorFromResourceColor('#ff0000'); 8121let color5: common2D.Color = drawing.Tool.makeColorFromResourceColor('#110000ff'); 8122let color6: common2D.Color = drawing.Tool.makeColorFromResourceColor('#00f'); 8123let color7: common2D.Color = drawing.Tool.makeColorFromResourceColor('#100f'); 8124let color8: common2D.Color = drawing.Tool.makeColorFromResourceColor('rgb(255, 100, 255)'); 8125let color9: common2D.Color = drawing.Tool.makeColorFromResourceColor('rgba(255, 100, 255, 0.5)'); 8126 8127// Resource 8128let color10: common2D.Color = drawing.Tool.makeColorFromResourceColor($r('sys.color.ohos_id_color_secondary')); 8129let color11: common2D.Color = drawing.Tool.makeColorFromResourceColor($r('app.color.appColorTest')); 8130let color12: common2D.Color = drawing.Tool.makeColorFromResourceColor($r('app.string.appColorTest')); 8131let color13: common2D.Color = drawing.Tool.makeColorFromResourceColor($r('app.integer.appColorTest')); 8132 8133// Use color 8134let brush = new drawing.Brush(); 8135brush.setColor(color1); 8136``` 8137 8138## RegionOp<sup>12+</sup> 8139 8140Enumerates the operations for combining two regions. 8141 8142**System capability**: SystemCapability.Graphics.Drawing 8143 8144| Name | Value | Description | Diagram | 8145| --------------------- | ---- | ------------------------------ | -------- | 8146| DIFFERENCE | 0 | Difference operation. | | 8147| INTERSECT | 1 | Intersect operation.| | 8148| UNION | 2 | Union operation. | | 8149| XOR | 3 | XOR operation. | | 8150| REVERSE_DIFFERENCE | 4 | Reverse difference operation. | | 8151| REPLACE | 5 | Replace operation. | | 8152 8153> **NOTE** 8154> 8155> 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. 8156 8157## CornerPos<sup>12+</sup> 8158 8159Enumerates the corner positions of a rounded rectangle. 8160 8161**System capability**: SystemCapability.Graphics.Drawing 8162 8163| Name | Value | Description | 8164| --------------------- | ---- | ------------------------------ | 8165| TOP_LEFT_POS | 0 | Top left corner of the rounded rectangle. | 8166| TOP_RIGHT_POS | 1 | Top right corner of the rounded rectangle.| 8167| BOTTOM_RIGHT_POS | 2 | Bottom right corner of the rounded rectangle. | 8168| BOTTOM_LEFT_POS | 3 | Bottom left corner of the rounded rectangle. | 8169
