1# Graphics 2 3自定义节点相关属性定义的详细信息。 4 5> **说明：** 6> 7> 本模块首批接口从API version 11开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 8 9## 导入模块 10 11```ts 12import { DrawContext, Size, Offset, Position, Pivot, Scale, Translation, Matrix4, Rotation, Frame, LengthMetricsUnit } from "@kit.ArkUI"; 13``` 14 15## Size 16 17用于返回组件布局大小的宽和高。默认单位为vp，不同的接口使用Size类型时会再定义单位，以接口定义的单位为准。 18 19**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 20 21**系统能力：** SystemCapability.ArkUI.ArkUI.Full 22 23| 名称 | 类型 | 可读 | 可写 | 说明 | 24| ------ | ------ | ---- | ---- | ---------------------- | 25| width | number | 是 | 是 | 组件大小的宽度。<br/>单位：vp | 26| height | number | 是 | 是 | 组件大小的高度。<br/>单位：vp | 27 28## Position 29 30type Position = Vector2 31 32用于设置或返回组件的位置。 33 34**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 35 36**系统能力：** SystemCapability.ArkUI.ArkUI.Full 37 38| 类型 | 说明 | 39| ------------------- | ----------------------------------- | 40| [Vector2](#vector2) | 包含x和y两个值的向量。<br/>单位：vp | 41 42## PositionT<sup>12+</sup> 43 44type PositionT\<T> = Vector2T\<T> 45 46用于设置或返回组件的位置。 47 48**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 49 50**系统能力：** SystemCapability.ArkUI.ArkUI.Full 51 52| 类型 | 说明 | 53| ---------------------------- | ----------------------------------- | 54| [Vector2T\<T>](#vector2tt12) | 包含x和y两个值的向量。<br/>单位：vp | 55 56## Frame 57 58用于设置或返回组件的布局大小和位置。 59 60**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 61 62**系统能力：** SystemCapability.ArkUI.ArkUI.Full 63 64| 名称 | 类型 | 只读 | 可选 | 说明 | 65| ------ | ------ | ---- | ---- | --------------------------- | 66| x | number | 是 | 是 | 水平方向位置。<br/>单位：vp | 67| y | number | 是 | 是 | 垂直方向位置。<br/>单位：vp | 68| width | number | 是 | 是 | 组件的宽度。<br/>单位：vp | 69| height | number | 是 | 是 | 组件的高度。<br/>单位：vp | 70 71## Pivot 72 73type Pivot = Vector2 74 75用于设置组件的轴心坐标，轴心会作为组件的旋转/缩放中心点，影响旋转和缩放效果。 76 77**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 78 79**系统能力：** SystemCapability.ArkUI.ArkUI.Full 80 81| 类型 | 说明 | 82| ------------------- | ------------------------------------------------------------ | 83| [Vector2](#vector2) | 轴心的x和y轴坐标。该参数为浮点数，默认值为0.5， 取值范围为[0.0, 1.0]。 | 84 85## Scale 86 87type Scale = Vector2 88 89用于设置组件的缩放比例。 90 91**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 92 93**系统能力：** SystemCapability.ArkUI.ArkUI.Full 94 95| 类型 | 说明 | 96| ------------------- | ----------------------------------------------- | 97| [Vector2](#vector2) | x和y轴的缩放参数。该参数为浮点数，默认值为1.0。 | 98 99## Translation 100 101type Translation = Vector2 102 103用于设置组件的平移量。 104 105**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 106 107**系统能力：** SystemCapability.ArkUI.ArkUI.Full 108 109| 类型 | 说明 | 110| ------------------- | ----------------------------- | 111| [Vector2](#vector2) | x和y轴的平移量。<br/>单位：px | 112 113## Rotation 114 115type Rotation = Vector3 116 117用于设置组件的旋转角度。 118 119**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 120 121**系统能力：** SystemCapability.ArkUI.ArkUI.Full 122 123| 类型 | 说明 | 124| ------------------- | -------------------------------------- | 125| [Vector3](#vector3) | x、y、z轴方向的旋转角度。<br/>单位：vp | 126 127## Offset 128 129type Offset = Vector2 130 131用于设置组件或效果的偏移。 132 133**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 134 135**系统能力：** SystemCapability.ArkUI.ArkUI.Full 136 137| 类型 | 说明 | 138| ------------------- | --------------------------------- | 139| [Vector2](#vector2) | x和y轴方向的偏移量。<br/>单位：vp | 140 141## Matrix4 142 143用于设置组件的变换信息，该类型为一个 4x4 矩阵，使用一个长度为16的`number[]`进行表示，例如： 144```ts 145const transform: Matrix4 = [ 146 1, 0, 45, 0, 147 0, 1, 0, 0, 148 0, 0, 1, 0, 149 0, 0, 0, 1 150] 151``` 152 153**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 154 155**系统能力：** SystemCapability.ArkUI.ArkUI.Full 156 157## Vector2 158 159用于表示包含x和y两个值的向量。 160 161**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 162 163**系统能力：** SystemCapability.ArkUI.ArkUI.Full 164 165| 名称 | 类型 | 只读 | 可选 | 说明 | 166| ---- | ------ | ---- | ---- | ----------------- | 167| x | number | 否 | 否 | 向量x轴方向的值。 | 168| y | number | 否 | 否 | 向量y轴方向的值。 | 169 170## Vector3 171 172用于表示包含x、y、z三个值的向量。 173 174**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 175 176**系统能力：** SystemCapability.ArkUI.ArkUI.Full 177 178| 名称 | 类型 | 只读 | 可选 | 说明 | 179| ---- | ------ | ---- | ---- | ------------------- | 180| x | number | 否 | 否 | x轴方向的旋转角度。 | 181| y | number | 否 | 否 | y轴方向的旋转角度。 | 182| z | number | 否 | 否 | z轴方向的旋转角度。 | 183 184## Vector2T\<T><sup>12+</sup> 185 186用于表示T类型的包含x和y两个值的向量。 187 188**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 189 190**系统能力：** SystemCapability.ArkUI.ArkUI.Full 191 192| 名称 | 类型 | 只读 | 可选 | 说明 | 193| ---- | ------ | ---- | ---- | ----------------- | 194| x | T | 否 | 否 | 向量x轴方向的值。 | 195| y | T | 否 | 否 | 向量y轴方向的值。 | 196 197## DrawContext 198 199图形绘制上下文，提供绘制所需的画布宽度和高度。 200 201### size 202 203get size(): Size 204 205获取画布的宽度和高度。 206 207**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 208 209**系统能力：** SystemCapability.ArkUI.ArkUI.Full 210 211**返回值：** 212 213| 类型 | 说明 | 214| ------------- | ---------------- | 215| [Size](#size) | 画布的宽度和高度。 | 216 217### sizeInPixel<sup>12+</sup> 218 219get sizeInPixel(): Size 220 221获取以px为单位的画布的宽度和高度。 222 223**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 224 225**系统能力：** SystemCapability.ArkUI.ArkUI.Full 226 227**返回值：** 228 229| 类型 | 说明 | 230| ------------- | ---------------- | 231| [Size](#size) | 画布的宽度和高度，以px为单位。 | 232 233### canvas 234 235get canvas(): drawing.Canvas 236 237获取用于绘制的画布。 238 239**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 240 241**系统能力：** SystemCapability.ArkUI.ArkUI.Full 242 243**返回值：** 244 245| 类型 | 说明 | 246| ------------- | ---------------- | 247| [drawing.Canvas](../apis-arkgraphics2d/js-apis-graphics-drawing.md#canvas) | 用于绘制的画布。 | 248 249**示例：** 250 251```ts 252import { RenderNode, FrameNode, NodeController, DrawContext } from "@kit.ArkUI"; 253 254class MyRenderNode extends RenderNode { 255 flag: boolean = false; 256 257 draw(context: DrawContext) { 258 const size = context.size; 259 const canvas = context.canvas; 260 const sizeInPixel = context.sizeInPixel; 261 } 262} 263 264const renderNode = new MyRenderNode(); 265renderNode.frame = { x: 0, y: 0, width: 100, height: 100 }; 266renderNode.backgroundColor = 0xffff0000; 267 268class MyNodeController extends NodeController { 269 private rootNode: FrameNode | null = null; 270 271 makeNode(uiContext: UIContext): FrameNode | null { 272 this.rootNode = new FrameNode(uiContext); 273 274 const rootRenderNode = this.rootNode.getRenderNode(); 275 if (rootRenderNode !== null) { 276 rootRenderNode.appendChild(renderNode); 277 } 278 279 return this.rootNode; 280 } 281} 282 283@Entry 284@Component 285struct Index { 286 private myNodeController: MyNodeController = new MyNodeController(); 287 288 build() { 289 Row() { 290 NodeContainer(this.myNodeController) 291 } 292 } 293} 294``` 295 296## Edges\<T><sup>12+</sup> 297 298用于设置边框的属性。 299 300**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 301 302**系统能力：** SystemCapability.ArkUI.ArkUI.Full 303 304| 名称 | 类型 | 可读 | 可写 | 说明 | 305| ------ | ---- | ---- | ---- | ---------------- | 306| left | T | 是 | 是 | 左侧边框的属性。 | 307| top | T | 是 | 是 | 顶部边框的属性。 | 308| right | T | 是 | 是 | 右侧边框的属性。 | 309| bottom | T | 是 | 是 | 底部边框的属性。 | 310 311## LengthUnit<sup>12+</sup> 312 313长度属性单位枚举。 314 315**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 316 317**系统能力：** SystemCapability.ArkUI.ArkUI.Full 318 319| 名称 | 值 | 说明 | 320| -------- | -------- | -------- | 321| [PX](arkui-ts/ts-types.md#px10) | 0 | 长度类型，用于描述以px像素单位为单位的长度。 | 322| [VP](arkui-ts/ts-types.md#vp10) | 1 | 长度类型，用于描述以vp像素单位为单位的长度。 | 323| [FP](arkui-ts/ts-types.md#fp10) | 2 | 长度类型，用于描述以fp像素单位为单位的长度。 | 324| [PERCENT](arkui-ts/ts-types.md#percentage10) | 3 | 长度类型，用于描述以%像素单位为单位的长度。 | 325| [LPX](arkui-ts/ts-types.md#lpx10) | 4 | 长度类型，用于描述以lpx像素单位为单位的长度。 | 326 327## SizeT\<T><sup>12+</sup> 328 329用于设置宽高的属性。 330 331**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 332 333**系统能力：** SystemCapability.ArkUI.ArkUI.Full 334 335| 名称 | 类型 | 可读 | 可写 | 说明 | 336| ------ | ---- | ---- | ---- | ---------------- | 337| width | T | 是 | 是 | 宽度的属性。 | 338| height | T | 是 | 是 | 高度的属性。 | 339 340## LengthMetricsUnit<sup>12+</sup> 341 342长度属性单位枚举。 343 344**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 345 346**系统能力：** SystemCapability.ArkUI.ArkUI.Full 347 348| 名称 | 值 | 说明 | 349| -------- | -------- | -------- | 350| DEFAULT | 0 | 长度类型，用于描述以默认的vp像素单位为单位的长度。 | 351| PX | 1 | 长度类型，用于描述以px像素单位为单位的长度。 | 352 353## LengthMetrics<sup>12+</sup> 354 355用于设置长度属性，当长度单位为[PERCENT](arkui-ts/ts-types.md#percentage10)时，值为1表示100%。 356 357### 属性 358 359**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 360 361**系统能力：** SystemCapability.ArkUI.ArkUI.Full 362 363| 名称 | 类型 | 可读 | 可写 | 说明 | 364| ------------ | ---------------------------------------- | ---- | ---- | ------ | 365| value | number | 是 | 是 | 长度属性的值。 | 366| unit | [LengthUnit](#lengthunit12) | 是 | 是 | 长度属性的单位，默认为VP。| 367 368### constructor<sup>12+</sup> 369 370constructor(value: number, unit?: LengthUnit) 371 372LengthMetrics的构造函数。若参数unit不传入值或传入undefined，返回值使用默认单位VP；若unit传入非LengthUnit类型的值，返回默认值0VP。 373 374**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 375 376**系统能力：** SystemCapability.ArkUI.ArkUI.Full 377 378**参数：** 379 380| 参数名 | 类型 | 必填 | 说明 | 381| ------ | ------------- | ---- | ------------ | 382| value | number | 是 | 长度属性的值。 | 383| unit | [LengthUnit](#lengthunit12) | 否 | 长度属性的单位。 | 384 385### px<sup>12+</sup> 386 387static px(value: number): LengthMetrics 388 389用于生成单位为PX的长度属性。 390 391**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 392 393**系统能力：** SystemCapability.ArkUI.ArkUI.Full 394 395**参数：** 396 397| 参数名 | 类型 | 必填 | 说明 | 398| ------ | ------------- | ---- | ------------ | 399| value | number | 是 | 长度属性的值。 | 400 401**返回值：** 402 403| 类型 | 说明 | 404| ------------- | ---------------- | 405| [LengthMetrics](#lengthmetrics12) | LengthMetrics 类的实例。 | 406 407### vp<sup>12+</sup> 408 409static vp(value: number): LengthMetrics 410 411用于生成单位为VP的长度属性。 412 413**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 414 415**系统能力：** SystemCapability.ArkUI.ArkUI.Full 416 417**参数：** 418 419| 参数名 | 类型 | 必填 | 说明 | 420| ------ | ------------- | ---- | ------------ | 421| value | number | 是 | 长度属性的值。 | 422 423**返回值：** 424 425| 类型 | 说明 | 426| ------------- | ---------------- | 427| [LengthMetrics](#lengthmetrics12) | LengthMetrics 类的实例。 | 428 429### fp<sup>12+</sup> 430 431static fp(value: number): LengthMetrics 432 433用于生成单位为FP的长度属性。 434 435**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 436 437**系统能力：** SystemCapability.ArkUI.ArkUI.Full 438 439**参数：** 440 441| 参数名 | 类型 | 必填 | 说明 | 442| ------ | ------------- | ---- | ------------ | 443| value | number | 是 | 长度属性的值。 | 444 445**返回值：** 446 447| 类型 | 说明 | 448| ------------- | ---------------- | 449| [LengthMetrics](#lengthmetrics12) | LengthMetrics 类的实例。 | 450 451### percent<sup>12+</sup> 452 453static percent(value: number): LengthMetrics 454 455用于生成单位为PERCENT的长度属性。 456 457**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 458 459**系统能力：** SystemCapability.ArkUI.ArkUI.Full 460 461**参数：** 462 463| 参数名 | 类型 | 必填 | 说明 | 464| ------ | ------------- | ---- | ------------ | 465| value | number | 是 | 长度属性的值。 | 466 467**返回值：** 468 469| 类型 | 说明 | 470| ------------- | ---------------- | 471| [LengthMetrics](#lengthmetrics12) | LengthMetrics 类的实例。 | 472 473### lpx<sup>12+</sup> 474 475static lpx(value: number): LengthMetrics 476 477用于生成单位为LPX的长度属性。 478 479**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 480 481**系统能力：** SystemCapability.ArkUI.ArkUI.Full 482 483**参数：** 484 485| 参数名 | 类型 | 必填 | 说明 | 486| ------ | ------------- | ---- | ------------ | 487| value | number | 是 | 长度属性的值。 | 488 489**返回值：** 490 491| 类型 | 说明 | 492| ------------- | ---------------- | 493| [LengthMetrics](#lengthmetrics12) | LengthMetrics 类的实例。 | 494 495### resource<sup>12+</sup> 496 497static resource(value: Resource): LengthMetrics 498 499用于生成Resource类型资源的长度属性。 500 501**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 502 503**系统能力：** SystemCapability.ArkUI.ArkUI.Full 504 505**参数：** 506 507| 参数名 | 类型 | 必填 | 说明 | 508| ------ | ------------- | ---- | ------------ | 509| value | Resource | 是 | 长度属性的值。 | 510 511**返回值：** 512 513| 类型 | 说明 | 514| ------------- | ---------------- | 515| [LengthMetrics](#lengthmetrics12) | LengthMetrics 类的实例。 | 516 517**错误码：** 518 519以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[系统资源错误码](errorcode-system-resource.md)。 520 521| 错误码ID | 错误信息 | 522| -------- | ------------------------------------------ | 523| 180001 | System resources does not exist. | 524| 180002 | The type of system resources is incorrect. | 525 526## ColorMetrics<sup>12+</sup> 527 528用于混合颜色。 529 530**系统能力：** SystemCapability.ArkUI.ArkUI.Full 531 532### numeric<sup>12+</sup> 533 534static numeric(value: number): ColorMetrics 535 536使用HEX格式颜色实例化 ColorMetrics 类。 537 538**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 539 540**系统能力：** SystemCapability.ArkUI.ArkUI.Full 541 542**参数：** 543 544| 参数名 | 类型 | 必填 | 说明 | 545| ------ | ------------- | ---- | ------------ | 546| value | number | 是 | HEX格式颜色，支持rgb或者argb。 | 547 548**返回值：** 549 550| 类型 | 说明 | 551| ------------- | ---------------- | 552| [ColorMetrics](#colormetrics12) | ColorMetrics 类的实例。 | 553 554### rgba<sup>12+</sup> 555 556static rgba(red: number, green: number, blue: number, alpha?: number): ColorMetrics 557 558使用rgb或者rgba格式颜色实例化 ColorMetrics 类。 559 560**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 561 562**系统能力：** SystemCapability.ArkUI.ArkUI.Full 563 564**参数：** 565 566| 参数名 | 类型 | 必填 | 说明 | 567| ------ | ------------- | ---- | ------------ | 568| red | number | 是 | 颜色的R分量（红色），值是0~255的整数。 | 569| green | number | 是 | 颜色的G分量（绿色），值是0~255的整数。 | 570| blue | number | 是 | 颜色的B分量（蓝色），值是0~255的整数。 | 571| alpha | number | 否 | 颜色的A分量（透明度），值是0~1.0的浮点数。 | 572 573**返回值：** 574 575| 类型 | 说明 | 576| ------------- | ---------------- | 577| [ColorMetrics](#colormetrics12) | ColorMetrics 类的实例。 | 578 579### resourceColor<sup>12+</sup> 580 581static resourceColor(color: ResourceColor): ColorMetrics 582 583使用资源格式颜色实例化 ColorMetrics 类。 584 585**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 586 587**系统能力：** SystemCapability.ArkUI.ArkUI.Full 588 589**参数：** 590 591| 参数名 | 类型 | 必填 | 说明 | 592| ------ | ------------- | ---- | ------------ | 593| color | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 是 | 资源格式颜色 | 594 595**返回值：** 596 597| 类型 | 说明 | 598| ------------- | ---------------- | 599| [ColorMetrics](#colormetrics12) | ColorMetrics 类的实例。 | 600 601**错误码**： 602 603以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[系统资源错误码](errorcode-system-resource.md)。 604 605| 错误码ID | 错误信息 | 606| -------- | ---------------------------------------- | 607| 401 | Parameter error. Possible cause:1.The type of the input color parameter is not ResourceColor;2.The format of the input color string is not RGB or RGBA. | 608| 180003 | Failed to obtain the color resource. | 609 610### blendColor<sup>12+</sup> 611 612blendColor(overlayColor: ColorMetrics): ColorMetrics 613 614颜色混合。 615 616**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 617 618**系统能力：** SystemCapability.ArkUI.ArkUI.Full 619 620**参数：** 621 622| 参数名 | 类型 | 必填 | 说明 | 623| ------ | ------------- | ---- | ------------ | 624| overlayColor | [ColorMetrics](#colormetrics12) | 是 | 叠加颜色的 ColorMetrics 类的实例 | 625 626**返回值：** 627 628| 类型 | 说明 | 629| ------------- | ---------------- | 630| [ColorMetrics](#colormetrics12) | 混合后的ColorMetrics 类的实例。 | 631 632**错误码**： 633 634以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 635 636| 错误码ID | 错误信息 | 637| -------- | ---------------------------------------- | 638| 401 | Parameter error. The type of the input parameter is not ColorMetrics. | 639 640### color<sup>12+</sup> 641 642get color(): string 643 644获取ColorMetrics的颜色，返回的是rgba字符串的格式。 645 646**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 647 648**系统能力：** SystemCapability.ArkUI.ArkUI.Full 649 650**返回值：** 651 652| 类型 | 说明 | 653| ------------- | ---------------- | 654| string | rgba字符串格式的颜色。 示例：'rgba(255, 100, 255, 0.5)'| 655 656### red<sup>12+</sup> 657 658get red(): number 659 660获取ColorMetrics颜色的R分量（红色）。 661 662**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 663 664**系统能力：** SystemCapability.ArkUI.ArkUI.Full 665 666**返回值：** 667 668| 类型 | 说明 | 669| ------------- | ---------------- | 670| number | 颜色的R分量（红色），值是0~255的整数。| 671 672### green<sup>12+</sup> 673 674get green(): number 675 676获取ColorMetrics颜色的G分量（绿色）。 677 678**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 679 680**系统能力：** SystemCapability.ArkUI.ArkUI.Full 681 682**返回值：** 683 684| 类型 | 说明 | 685| ------------- | ---------------- | 686| number | 颜色的G分量（绿色），值是0~255的整数。| 687 688### blue<sup>12+</sup> 689 690get blue(): number 691 692获取ColorMetrics颜色的B分量（蓝色）。 693 694**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 695 696**系统能力：** SystemCapability.ArkUI.ArkUI.Full 697 698**返回值：** 699 700| 类型 | 说明 | 701| ------------- | ---------------- | 702| number | 颜色的B分量（蓝色），值是0~255的整数。| 703 704### alpha<sup>12+</sup> 705 706get alpha(): number 707 708获取ColorMetrics颜色的A分量（透明度）。 709 710**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 711 712**系统能力：** SystemCapability.ArkUI.ArkUI.Full 713 714**返回值：** 715 716| 类型 | 说明 | 717| ------------- | ---------------- | 718| number | 颜色的A分量（透明度），值是0~255的整数。| 719 720**示例：** 721 722```ts 723import { ColorMetrics } from '@kit.ArkUI'; 724import { BusinessError } from '@kit.BasicServicesKit'; 725 726function getBlendColor(baseColor: ResourceColor):ColorMetrics { 727 let sourceColor:ColorMetrics; 728 try { 729 //在使用ColorMetrics的resourceColor和blendColor需要追加捕获异常处理 730 //可能返回的arkui子系统错误码有401和180003 731 sourceColor = ColorMetrics.resourceColor(baseColor).blendColor(ColorMetrics.resourceColor("#19000000")); 732 } catch (error) { 733 console.log("getBlendColor failed, code = " + (error as BusinessError).code + ", message = " + (error as BusinessError).message); 734 sourceColor = ColorMetrics.resourceColor("#19000000"); 735 } 736 return sourceColor; 737} 738 739@Entry 740@Component 741struct ColorMetricsSample { 742 build() { 743 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 744 Button("ColorMetrics") 745 .width('80%') 746 .align(Alignment.Center) 747 .height(50) 748 .backgroundColor(getBlendColor($r("app.color.background_red")).color) 749 } 750 .width('100%') 751 .height('100%') 752 } 753} 754``` 755## Corners\<T><sup>12+</sup> 756 757用于设置四个角的圆角度数。 758 759**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 760 761**系统能力：** SystemCapability.ArkUI.ArkUI.Full 762 763| 名称 | 类型 | 可读 | 可写 | 说明 | 764| ----------- | ---- | ---- | ---- | ---------------------- | 765| topLeft | T | 是 | 是 | 左上边框的圆角属性。 | 766| topRight | T | 是 | 是 | 右上上边框的圆角属性。 | 767| bottomLeft | T | 是 | 是 | 左下边框的圆角属性。 | 768| bottomRight | T | 是 | 是 | 右下边框的圆角属性。 | 769 770## CornerRadius<sup>12+</sup> 771 772type CornerRadius = Corners\<Vector2> 773 774设置四个角的圆角度数。 775 776**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 777 778**系统能力：** SystemCapability.ArkUI.ArkUI.Full 779 780| 类型 | 说明 | 781| -------------------------------------------- | ------------------ | 782| [Corners](#cornerst12)[\<Vector2>](#vector2) | 四个角的圆角度数。 | 783 784## BorderRadiuses<sup>12+</sup> 785 786type BorderRadiuses = Corners\<number> 787 788设置四个角的圆角度数。 789 790**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 791 792**系统能力：** SystemCapability.ArkUI.ArkUI.Full 793 794| 类型 | 说明 | 795| ------------------------------- | ------------------ | 796| [Corners\<number>](#cornerst12) | 四个角的圆角度数。 | 797 798## Rect<sup>12+</sup> 799 800type Rect = common2D.Rect 801 802用于设置矩形的形状。 803 804**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 805 806**系统能力：** SystemCapability.ArkUI.ArkUI.Full 807 808| 类型 | 说明 | 809| ------------------------------------------------------------ | ---------- | 810| [common2D.Rect](../apis-arkgraphics2d/js-apis-graphics-common2D.md#rect) | 矩形区域。 | 811 812## RoundRect<sup>12+</sup> 813 814用于设置带有圆角的矩形。 815 816**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 817 818**系统能力：** SystemCapability.ArkUI.ArkUI.Full 819 820| 名称 | 类型 | 可读 | 可写 | 说明 | 821| ------- | ----------------------------- | ---- | ---- | ---------------- | 822| rect | [Rect](#rect12) | 是 | 是 | 设置矩形的属性。 | 823| corners | [CornerRadius](#cornerradius12) | 是 | 是 | 设置圆角的属性。 | 824 825## Circle<sup>12+</sup> 826 827用于设置圆形的属性。 828 829**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 830 831**系统能力：** SystemCapability.ArkUI.ArkUI.Full 832 833| 名称 | 类型 | 可读 | 可写 | 说明 | 834| ------- | ------ | ---- | ---- | ------------------------- | 835| centerX | number | 是 | 是 | 圆心x轴的位置，单位为px。 | 836| centerY | number | 是 | 是 | 圆心y轴的位置，单位为px。 | 837| radius | number | 是 | 是 | 圆形的半径，单位为px。 | 838 839## CommandPath<sup>12+</sup> 840 841用于设置路径绘制的指令。 842 843**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 844 845**系统能力：** SystemCapability.ArkUI.ArkUI.Full 846 847| 名称 | 类型 | 可读 | 可写 | 说明 | 848| ------------------------------------------------------------ | ------ | ---- | ---- | ------------------------------------------------------------ | 849| [commands](./arkui-ts/ts-drawing-components-path.md#commands-1) | string | 是 | 是 | 路径绘制的指令字符串。像素单位的转换方法请参考[像素单位转换](./arkui-ts/ts-pixel-units.md#像素单位转换)。<br/>单位：px | 850 851## ShapeMask<sup>12+</sup> 852 853用于设置图形遮罩。 854 855### constructor<sup>12+</sup> 856 857constructor() 858 859ShapeMask的构造函数。 860 861**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 862 863**系统能力：** SystemCapability.ArkUI.ArkUI.Full 864 865### setRectShape<sup>12+</sup> 866 867setRectShape(rect: Rect): void 868 869用于设置矩形遮罩。 870 871**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 872 873**系统能力：** SystemCapability.ArkUI.ArkUI.Full 874 875**参数：** 876 877| 参数名 | 类型 | 必填 | 说明 | 878| ------ | ------------- | ---- | ------------ | 879| rect | [Rect](#rect12) | 是 | 矩形的形状。 | 880 881**示例：** 882 883```ts 884import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 885 886const mask = new ShapeMask(); 887mask.setRectShape({ left: 0, right: vp2px(150), top: 0, bottom: vp2px(150) }); 888mask.fillColor = 0X55FF0000; 889 890const renderNode = new RenderNode(); 891renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 892renderNode.backgroundColor = 0XFF00FF00; 893renderNode.shapeMask = mask; 894 895 896class MyNodeController extends NodeController { 897 private rootNode: FrameNode | null = null; 898 899 makeNode(uiContext: UIContext): FrameNode | null { 900 this.rootNode = new FrameNode(uiContext); 901 902 const rootRenderNode = this.rootNode.getRenderNode(); 903 if (rootRenderNode !== null) { 904 rootRenderNode.appendChild(renderNode); 905 } 906 907 return this.rootNode; 908 } 909} 910 911@Entry 912@Component 913struct Index { 914 private myNodeController: MyNodeController = new MyNodeController(); 915 916 build() { 917 Row() { 918 NodeContainer(this.myNodeController) 919 } 920 } 921} 922``` 923 924### setRoundRectShape<sup>12+</sup> 925 926setRoundRectShape(roundRect: RoundRect): void 927 928用于设置圆角矩形遮罩。 929 930**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 931 932**系统能力：** SystemCapability.ArkUI.ArkUI.Full 933 934**参数：** 935 936| 参数名 | 类型 | 必填 | 说明 | 937| --------- | ----------------------- | ---- | ---------------- | 938| roundRect | [RoundRect](#roundrect12) | 是 | 圆角矩形的形状。 | 939 940**示例：** 941 942```ts 943import { RenderNode, FrameNode, NodeController, ShapeMask,RoundRect} from '@kit.ArkUI'; 944 945const mask = new ShapeMask(); 946const roundRect: RoundRect = { 947 rect: { left: 0, top: 0, right: vp2px(150), bottom: vp2px(150) }, 948 corners: { 949 topLeft: { x: 32, y: 32 }, 950 topRight: { x: 32, y: 32 }, 951 bottomLeft: { x: 32, y: 32 }, 952 bottomRight: { x: 32, y: 32 } 953 } 954} 955mask.setRoundRectShape(roundRect); 956mask.fillColor = 0X55FF0000; 957 958const renderNode = new RenderNode(); 959renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 960renderNode.backgroundColor = 0XFF00FF00; 961renderNode.shapeMask = mask; 962 963 964class MyNodeController extends NodeController { 965 private rootNode: FrameNode | null = null; 966 967 makeNode(uiContext: UIContext): FrameNode | null { 968 this.rootNode = new FrameNode(uiContext); 969 970 const rootRenderNode = this.rootNode.getRenderNode(); 971 if (rootRenderNode !== null) { 972 rootRenderNode.appendChild(renderNode); 973 } 974 975 return this.rootNode; 976 } 977} 978 979@Entry 980@Component 981struct Index { 982 private myNodeController: MyNodeController = new MyNodeController(); 983 984 build() { 985 Row() { 986 NodeContainer(this.myNodeController) 987 } 988 } 989} 990``` 991 992### setCircleShape<sup>12+</sup> 993 994setCircleShape(circle: Circle): void 995 996用于设置圆形遮罩。 997 998**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 999 1000**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1001 1002**参数：** 1003 1004| 参数名 | 类型 | 必填 | 说明 | 1005| ------ | ----------------- | ---- | ------------ | 1006| circle | [Circle](#circle12) | 是 | 圆形的形状。 | 1007 1008**示例：** 1009 1010```ts 1011import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1012 1013const mask = new ShapeMask(); 1014mask.setCircleShape({ centerY: vp2px(75), centerX: vp2px(75), radius: vp2px(75) }); 1015mask.fillColor = 0X55FF0000; 1016 1017const renderNode = new RenderNode(); 1018renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1019renderNode.backgroundColor = 0XFF00FF00; 1020renderNode.shapeMask = mask; 1021 1022 1023class MyNodeController extends NodeController { 1024 private rootNode: FrameNode | null = null; 1025 1026 makeNode(uiContext: UIContext): FrameNode | null { 1027 this.rootNode = new FrameNode(uiContext); 1028 1029 const rootRenderNode = this.rootNode.getRenderNode(); 1030 if (rootRenderNode !== null) { 1031 rootRenderNode.appendChild(renderNode); 1032 } 1033 1034 return this.rootNode; 1035 } 1036} 1037 1038@Entry 1039@Component 1040struct Index { 1041 private myNodeController: MyNodeController = new MyNodeController(); 1042 1043 build() { 1044 Row() { 1045 NodeContainer(this.myNodeController) 1046 } 1047 } 1048} 1049``` 1050 1051### setOvalShape<sup>12+</sup> 1052 1053setOvalShape(oval: Rect): void 1054 1055用于设置椭圆形遮罩。 1056 1057**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1058 1059**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1060 1061**参数：** 1062 1063| 参数名 | 类型 | 必填 | 说明 | 1064| ------ | ------------- | ---- | -------------- | 1065| oval | [Rect](#rect12) | 是 | 椭圆形的形状。 | 1066 1067**示例：** 1068 1069```ts 1070import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1071 1072const mask = new ShapeMask(); 1073mask.setOvalShape({ left: 0, right: vp2px(150), top: 0, bottom: vp2px(100) }); 1074mask.fillColor = 0X55FF0000; 1075 1076const renderNode = new RenderNode(); 1077renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1078renderNode.backgroundColor = 0XFF00FF00; 1079renderNode.shapeMask = mask; 1080 1081 1082class MyNodeController extends NodeController { 1083 private rootNode: FrameNode | null = null; 1084 1085 makeNode(uiContext: UIContext): FrameNode | null { 1086 this.rootNode = new FrameNode(uiContext); 1087 1088 const rootRenderNode = this.rootNode.getRenderNode(); 1089 if (rootRenderNode !== null) { 1090 rootRenderNode.appendChild(renderNode); 1091 } 1092 1093 return this.rootNode; 1094 } 1095} 1096 1097@Entry 1098@Component 1099struct Index { 1100 private myNodeController: MyNodeController = new MyNodeController(); 1101 1102 build() { 1103 Row() { 1104 NodeContainer(this.myNodeController) 1105 } 1106 } 1107} 1108``` 1109 1110### setCommandPath<sup>12+</sup> 1111 1112setCommandPath(path: CommandPath): void 1113 1114用于设置路径绘制指令。 1115 1116**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1117 1118**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1119 1120**参数：** 1121 1122| 参数名 | 类型 | 必填 | 说明 | 1123| ------ | --------------------------- | ---- | -------------- | 1124| path | [CommandPath](#commandpath12) | 是 | 路径绘制指令。 | 1125 1126**示例：** 1127 1128```ts 1129import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1130 1131const mask = new ShapeMask(); 1132mask.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1133mask.fillColor = 0X55FF0000; 1134 1135const renderNode = new RenderNode(); 1136renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1137renderNode.backgroundColor = 0XFF00FF00; 1138renderNode.shapeMask = mask; 1139 1140 1141class MyNodeController extends NodeController { 1142 private rootNode: FrameNode | null = null; 1143 1144 makeNode(uiContext: UIContext): FrameNode | null { 1145 this.rootNode = new FrameNode(uiContext); 1146 1147 const rootRenderNode = this.rootNode.getRenderNode(); 1148 if (rootRenderNode !== null) { 1149 rootRenderNode.appendChild(renderNode); 1150 } 1151 1152 return this.rootNode; 1153 } 1154} 1155 1156@Entry 1157@Component 1158struct Index { 1159 private myNodeController: MyNodeController = new MyNodeController(); 1160 1161 build() { 1162 Row() { 1163 NodeContainer(this.myNodeController) 1164 } 1165 } 1166} 1167``` 1168 1169### fillColor<sup>12+</sup> 1170 1171fillColor: number 1172 1173遮罩的填充颜色，使用ARGB格式。默认值为`0XFF000000`。 1174 1175**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1176 1177**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1178 1179**示例：** 1180 1181```ts 1182import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1183 1184const mask = new ShapeMask(); 1185mask.setRectShape({ left: 0, right: 150, top: 0, bottom: 150 }); 1186mask.fillColor = 0X55FF0000; 1187 1188const renderNode = new RenderNode(); 1189renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1190renderNode.backgroundColor = 0XFF00FF00; 1191renderNode.shapeMask = mask; 1192 1193 1194class MyNodeController extends NodeController { 1195 private rootNode: FrameNode | null = null; 1196 1197 makeNode(uiContext: UIContext): FrameNode | null { 1198 this.rootNode = new FrameNode(uiContext); 1199 1200 const rootRenderNode = this.rootNode.getRenderNode(); 1201 if (rootRenderNode !== null) { 1202 rootRenderNode.appendChild(renderNode); 1203 } 1204 1205 return this.rootNode; 1206 } 1207} 1208 1209@Entry 1210@Component 1211struct Index { 1212 private myNodeController: MyNodeController = new MyNodeController(); 1213 1214 build() { 1215 Row() { 1216 NodeContainer(this.myNodeController) 1217 } 1218 } 1219} 1220``` 1221 1222### strokeColor<sup>12+</sup> 1223 1224strokeColor: number 1225 1226遮罩的边框颜色，使用ARGB格式。默认值为`0XFF000000`。 1227 1228**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1229 1230**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1231 1232**示例：** 1233 1234```ts 1235import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1236 1237const mask = new ShapeMask(); 1238mask.setRectShape({ left: 0, right: 150, top: 0, bottom: 150 }); 1239mask.strokeColor = 0XFFFF0000; 1240mask.strokeWidth = 24; 1241 1242const renderNode = new RenderNode(); 1243renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1244renderNode.backgroundColor = 0XFF00FF00; 1245renderNode.shapeMask = mask; 1246 1247 1248class MyNodeController extends NodeController { 1249 private rootNode: FrameNode | null = null; 1250 1251 makeNode(uiContext: UIContext): FrameNode | null { 1252 this.rootNode = new FrameNode(uiContext); 1253 1254 const rootRenderNode = this.rootNode.getRenderNode(); 1255 if (rootRenderNode !== null) { 1256 rootRenderNode.appendChild(renderNode); 1257 } 1258 1259 return this.rootNode; 1260 } 1261} 1262 1263@Entry 1264@Component 1265struct Index { 1266 private myNodeController: MyNodeController = new MyNodeController(); 1267 1268 build() { 1269 Row() { 1270 NodeContainer(this.myNodeController) 1271 } 1272 } 1273} 1274``` 1275 1276### strokeWidth<sup>12+</sup> 1277 1278strokeWidth: number 1279 1280遮罩的边框宽度，单位为px。默认值为0。 1281 1282**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1283 1284**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1285 1286**示例：** 1287 1288```ts 1289import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1290 1291const mask = new ShapeMask(); 1292mask.setRectShape({ left: 0, right: 150, top: 0, bottom: 150 }); 1293mask.strokeColor = 0XFFFF0000; 1294mask.strokeWidth = 24; 1295 1296const renderNode = new RenderNode(); 1297renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1298renderNode.backgroundColor = 0XFF00FF00; 1299renderNode.shapeMask = mask; 1300 1301 1302class MyNodeController extends NodeController { 1303 private rootNode: FrameNode | null = null; 1304 1305 makeNode(uiContext: UIContext): FrameNode | null { 1306 this.rootNode = new FrameNode(uiContext); 1307 1308 const rootRenderNode = this.rootNode.getRenderNode(); 1309 if (rootRenderNode !== null) { 1310 rootRenderNode.appendChild(renderNode); 1311 } 1312 1313 return this.rootNode; 1314 } 1315} 1316 1317@Entry 1318@Component 1319struct Index { 1320 private myNodeController: MyNodeController = new MyNodeController(); 1321 1322 build() { 1323 Row() { 1324 NodeContainer(this.myNodeController) 1325 } 1326 } 1327} 1328``` 1329 1330## ShapeClip<sup>12+</sup> 1331 1332用于设置图形裁剪。 1333 1334### constructor<sup>12+</sup> 1335 1336constructor() 1337 1338ShapeClip的构造函数。 1339 1340**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1341 1342**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1343 1344### setRectShape<sup>12+</sup> 1345 1346setRectShape(rect: Rect): void 1347 1348用于裁剪矩形。 1349 1350**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1351 1352**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1353 1354**参数：** 1355 1356| 参数名 | 类型 | 必填 | 说明 | 1357| ------ | ------------- | ---- | ------------ | 1358| rect | [Rect](#rect12) | 是 | 矩形的形状。 | 1359 1360**示例：** 1361 1362```ts 1363import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI'; 1364 1365const clip = new ShapeClip(); 1366clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1367 1368const renderNode = new RenderNode(); 1369renderNode.frame = { 1370 x: 0, 1371 y: 0, 1372 width: 150, 1373 height: 150 1374}; 1375renderNode.backgroundColor = 0XFF00FF00; 1376renderNode.shapeClip = clip; 1377const shapeClip = renderNode.shapeClip; 1378 1379class MyNodeController extends NodeController { 1380 private rootNode: FrameNode | null = null; 1381 1382 makeNode(uiContext: UIContext): FrameNode | null { 1383 this.rootNode = new FrameNode(uiContext); 1384 1385 const rootRenderNode = this.rootNode.getRenderNode(); 1386 if (rootRenderNode !== null) { 1387 rootRenderNode.appendChild(renderNode); 1388 } 1389 1390 return this.rootNode; 1391 } 1392} 1393 1394@Entry 1395@Component 1396struct Index { 1397 private myNodeController: MyNodeController = new MyNodeController(); 1398 1399 build() { 1400 Column() { 1401 NodeContainer(this.myNodeController) 1402 .borderWidth(1) 1403 Button("setRectShape") 1404 .onClick(() => { 1405 shapeClip.setRectShape({ 1406 left: 0, 1407 right: 150, 1408 top: 0, 1409 bottom: 150 1410 }); 1411 renderNode.shapeClip = shapeClip; 1412 }) 1413 } 1414 } 1415} 1416``` 1417 1418### setRoundRectShape<sup>12+</sup> 1419 1420setRoundRectShape(roundRect: RoundRect): void 1421 1422用于裁剪圆角矩形。 1423 1424**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1425 1426**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1427 1428**参数：** 1429 1430| 参数名 | 类型 | 必填 | 说明 | 1431| --------- | ----------------------- | ---- | ---------------- | 1432| roundRect | [RoundRect](#roundrect12) | 是 | 圆角矩形的形状。 | 1433 1434**示例：** 1435```ts 1436import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI'; 1437 1438const clip = new ShapeClip(); 1439clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1440 1441const renderNode = new RenderNode(); 1442renderNode.frame = { 1443 x: 0, 1444 y: 0, 1445 width: 150, 1446 height: 150 1447}; 1448renderNode.backgroundColor = 0XFF00FF00; 1449renderNode.shapeClip = clip; 1450 1451class MyNodeController extends NodeController { 1452 private rootNode: FrameNode | null = null; 1453 1454 makeNode(uiContext: UIContext): FrameNode | null { 1455 this.rootNode = new FrameNode(uiContext); 1456 1457 const rootRenderNode = this.rootNode.getRenderNode(); 1458 if (rootRenderNode !== null) { 1459 rootRenderNode.appendChild(renderNode); 1460 } 1461 1462 return this.rootNode; 1463 } 1464} 1465 1466@Entry 1467@Component 1468struct Index { 1469 private myNodeController: MyNodeController = new MyNodeController(); 1470 1471 build() { 1472 Column() { 1473 NodeContainer(this.myNodeController) 1474 .borderWidth(1) 1475 Button("setRoundRectShape") 1476 .onClick(() => { 1477 renderNode.shapeClip.setRoundRectShape({ 1478 rect: { 1479 left: 0, 1480 top: 0, 1481 right: vp2px(150), 1482 bottom: vp2px(150) 1483 }, 1484 corners: { 1485 topLeft: { x: 32, y: 32 }, 1486 topRight: { x: 32, y: 32 }, 1487 bottomLeft: { x: 32, y: 32 }, 1488 bottomRight: { x: 32, y: 32 } 1489 } 1490 }); 1491 renderNode.shapeClip = renderNode.shapeClip; 1492 }) 1493 } 1494 } 1495} 1496``` 1497 1498### setCircleShape<sup>12+</sup> 1499 1500setCircleShape(circle: Circle): void 1501 1502用于裁剪圆形。 1503 1504**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1505 1506**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1507 1508**参数：** 1509 1510| 参数名 | 类型 | 必填 | 说明 | 1511| ------ | ----------------- | ---- | ------------ | 1512| circle | [Circle](#circle12) | 是 | 圆形的形状。 | 1513 1514**示例：** 1515 1516```ts 1517import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI'; 1518 1519const clip = new ShapeClip(); 1520clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1521 1522const renderNode = new RenderNode(); 1523renderNode.frame = { 1524 x: 0, 1525 y: 0, 1526 width: 150, 1527 height: 150 1528}; 1529renderNode.backgroundColor = 0XFF00FF00; 1530renderNode.shapeClip = clip; 1531 1532class MyNodeController extends NodeController { 1533 private rootNode: FrameNode | null = null; 1534 1535 makeNode(uiContext: UIContext): FrameNode | null { 1536 this.rootNode = new FrameNode(uiContext); 1537 1538 const rootRenderNode = this.rootNode.getRenderNode(); 1539 if (rootRenderNode !== null) { 1540 rootRenderNode.appendChild(renderNode); 1541 } 1542 1543 return this.rootNode; 1544 } 1545} 1546 1547@Entry 1548@Component 1549struct Index { 1550 private myNodeController: MyNodeController = new MyNodeController(); 1551 1552 build() { 1553 Column() { 1554 NodeContainer(this.myNodeController) 1555 .borderWidth(1) 1556 Button("setCircleShape") 1557 .onClick(() => { 1558 renderNode.shapeClip.setCircleShape({ centerY: 75, centerX: 75, radius: 75 }); 1559 renderNode.shapeClip = renderNode.shapeClip; 1560 1561 }) 1562 } 1563 } 1564} 1565``` 1566 1567### setOvalShape<sup>12+</sup> 1568 1569setOvalShape(oval: Rect): void 1570 1571用于裁剪椭圆形。 1572 1573**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1574 1575**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1576 1577**参数：** 1578 1579| 参数名 | 类型 | 必填 | 说明 | 1580| ------ | ------------- | ---- | -------------- | 1581| oval | [Rect](#rect12) | 是 | 椭圆形的形状。 | 1582 1583**示例：** 1584 1585```ts 1586import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI'; 1587 1588const clip = new ShapeClip(); 1589clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1590 1591const renderNode = new RenderNode(); 1592renderNode.frame = { 1593 x: 0, 1594 y: 0, 1595 width: 150, 1596 height: 150 1597}; 1598renderNode.backgroundColor = 0XFF00FF00; 1599renderNode.shapeClip = clip; 1600 1601class MyNodeController extends NodeController { 1602 private rootNode: FrameNode | null = null; 1603 1604 makeNode(uiContext: UIContext): FrameNode | null { 1605 this.rootNode = new FrameNode(uiContext); 1606 1607 const rootRenderNode = this.rootNode.getRenderNode(); 1608 if (rootRenderNode !== null) { 1609 rootRenderNode.appendChild(renderNode); 1610 } 1611 1612 return this.rootNode; 1613 } 1614} 1615 1616@Entry 1617@Component 1618struct Index { 1619 private myNodeController: MyNodeController = new MyNodeController(); 1620 1621 build() { 1622 Column() { 1623 NodeContainer(this.myNodeController) 1624 .borderWidth(1) 1625 Button("setOvalShape") 1626 .onClick(() => { 1627 renderNode.shapeClip.setOvalShape({ 1628 left: 0, 1629 right: vp2px(150), 1630 top: 0, 1631 bottom: vp2px(100) 1632 }); 1633 renderNode.shapeClip = renderNode.shapeClip; 1634 }) 1635 } 1636 } 1637} 1638``` 1639 1640### setCommandPath<sup>12+</sup> 1641 1642setCommandPath(path: CommandPath): void 1643 1644用于裁剪路径绘制指令。 1645 1646**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1647 1648**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1649 1650**参数：** 1651 1652| 参数名 | 类型 | 必填 | 说明 | 1653| ------ | --------------------------- | ---- | -------------- | 1654| path | [CommandPath](#commandpath12) | 是 | 路径绘制指令。 | 1655 1656**示例：** 1657 1658```ts 1659import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI'; 1660 1661const clip = new ShapeClip(); 1662clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1663 1664const renderNode = new RenderNode(); 1665renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1666renderNode.backgroundColor = 0XFF00FF00; 1667renderNode.shapeClip = clip; 1668 1669class MyNodeController extends NodeController { 1670 private rootNode: FrameNode | null = null; 1671 1672 makeNode(uiContext: UIContext): FrameNode | null { 1673 this.rootNode = new FrameNode(uiContext); 1674 1675 const rootRenderNode = this.rootNode.getRenderNode(); 1676 if (rootRenderNode !== null) { 1677 rootRenderNode.appendChild(renderNode); 1678 } 1679 1680 return this.rootNode; 1681 } 1682} 1683 1684@Entry 1685@Component 1686struct Index { 1687 private myNodeController: MyNodeController = new MyNodeController(); 1688 1689 build() { 1690 Column() { 1691 NodeContainer(this.myNodeController) 1692 .borderWidth(1) 1693 Button("setCommandPath") 1694 .onClick(()=>{ 1695 renderNode.shapeClip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1696 renderNode.shapeClip = renderNode.shapeClip; 1697 }) 1698 } 1699 } 1700} 1701``` 1702 1703## edgeColors<sup>12+</sup> 1704 1705edgeColors(all: number): Edges\<number> 1706 1707用于生成边框颜色均设置为传入值的边框颜色对象。 1708 1709**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1710 1711**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1712 1713**参数：** 1714 1715| 参数名 | 类型 | 必填 | 说明 | 1716| ------ | ------ | ---- | -------------------- | 1717| all | number | 是 | 边框颜色，ARGB格式。 | 1718 1719**返回值：** 1720 1721| 类型 | 说明 | 1722| ------------------------ | -------------------------------------- | 1723| [Edges\<number>](#edgest12) | 边框颜色均设置为传入值的边框颜色对象。 | 1724 1725**示例：** 1726 1727```ts 1728import { RenderNode, FrameNode, NodeController, edgeColors } from '@kit.ArkUI'; 1729 1730const renderNode = new RenderNode(); 1731renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1732renderNode.backgroundColor = 0XFF00FF00; 1733renderNode.borderWidth = { left: 8, top: 8, right: 8, bottom: 8 }; 1734renderNode.borderColor = edgeColors(0xFF0000FF); 1735 1736 1737class MyNodeController extends NodeController { 1738 private rootNode: FrameNode | null = null; 1739 1740 makeNode(uiContext: UIContext): FrameNode | null { 1741 this.rootNode = new FrameNode(uiContext); 1742 1743 const rootRenderNode = this.rootNode.getRenderNode(); 1744 if (rootRenderNode !== null) { 1745 rootRenderNode.appendChild(renderNode); 1746 } 1747 1748 return this.rootNode; 1749 } 1750} 1751 1752@Entry 1753@Component 1754struct Index { 1755 private myNodeController: MyNodeController = new MyNodeController(); 1756 1757 build() { 1758 Row() { 1759 NodeContainer(this.myNodeController) 1760 } 1761 } 1762} 1763``` 1764 1765## edgeWidths<sup>12+</sup> 1766 1767edgeWidths(all: number): Edges\<number> 1768 1769用于生成边框宽度均设置为传入值的边框宽度对象。 1770 1771**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1772 1773**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1774 1775**参数：** 1776 1777| 参数名 | 类型 | 必填 | 说明 | 1778| ------ | ------ | ---- | -------------------- | 1779| all | number | 是 | 边框宽度，单位为vp。 | 1780 1781**返回值：** 1782 1783| 类型 | 说明 | 1784| ------------------------ | -------------------------------------- | 1785| [Edges\<number>](#edgest12) | 边框宽度均设置为传入值的边框宽度对象。 | 1786 1787**示例：** 1788 1789```ts 1790import { RenderNode, FrameNode, NodeController, edgeWidths } from '@kit.ArkUI'; 1791 1792const renderNode = new RenderNode(); 1793renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1794renderNode.backgroundColor = 0XFF00FF00; 1795renderNode.borderWidth = edgeWidths(8); 1796renderNode.borderColor = { left: 0xFF0000FF, top: 0xFF0000FF, right: 0xFF0000FF, bottom: 0xFF0000FF }; 1797 1798 1799class MyNodeController extends NodeController { 1800 private rootNode: FrameNode | null = null; 1801 1802 makeNode(uiContext: UIContext): FrameNode | null { 1803 this.rootNode = new FrameNode(uiContext); 1804 1805 const rootRenderNode = this.rootNode.getRenderNode(); 1806 if (rootRenderNode !== null) { 1807 rootRenderNode.appendChild(renderNode); 1808 } 1809 1810 return this.rootNode; 1811 } 1812} 1813 1814@Entry 1815@Component 1816struct Index { 1817 private myNodeController: MyNodeController = new MyNodeController(); 1818 1819 build() { 1820 Row() { 1821 NodeContainer(this.myNodeController) 1822 } 1823 } 1824} 1825``` 1826 1827## borderStyles<sup>12+</sup> 1828 1829borderStyles(all: BorderStyle): Edges\<BorderStyle> 1830 1831用于生成边框样式均设置为传入值的边框样式对象。 1832 1833**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1834 1835**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1836 1837**参数：** 1838 1839| 参数名 | 类型 | 必填 | 说明 | 1840| ------ | ---------------------------------------------------------- | ---- | ---------- | 1841| all | [BorderStyle](./arkui-ts/ts-appendix-enums.md#borderstyle) | 是 | 边框样式。 | 1842 1843**返回值：** 1844 1845| 类型 | 说明 | 1846| --------------------------------------------------------------------------- | -------------------------------------- | 1847| [Edges](#edgest12)<[BorderStyle](./arkui-ts/ts-appendix-enums.md#borderstyle)> | 边框样式均设置为传入值的边框样式对象。 | 1848 1849**示例：** 1850 1851```ts 1852import { RenderNode, FrameNode, NodeController, borderStyles } from '@kit.ArkUI'; 1853 1854const renderNode = new RenderNode(); 1855renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1856renderNode.backgroundColor = 0XFF00FF00; 1857renderNode.borderWidth = { left: 8, top: 8, right: 8, bottom: 8 }; 1858renderNode.borderColor = { left: 0xFF0000FF, top: 0xFF0000FF, right: 0xFF0000FF, bottom: 0xFF0000FF }; 1859renderNode.borderStyle = borderStyles(BorderStyle.Dotted); 1860 1861 1862class MyNodeController extends NodeController { 1863 private rootNode: FrameNode | null = null; 1864 1865 makeNode(uiContext: UIContext): FrameNode | null { 1866 this.rootNode = new FrameNode(uiContext); 1867 1868 const rootRenderNode = this.rootNode.getRenderNode(); 1869 if (rootRenderNode !== null) { 1870 rootRenderNode.appendChild(renderNode); 1871 } 1872 1873 return this.rootNode; 1874 } 1875} 1876 1877@Entry 1878@Component 1879struct Index { 1880 private myNodeController: MyNodeController = new MyNodeController(); 1881 1882 build() { 1883 Row() { 1884 NodeContainer(this.myNodeController) 1885 } 1886 } 1887} 1888``` 1889 1890## borderRadiuses<sup>12+</sup> 1891 1892borderRadiuses(all: number): BorderRadiuses 1893 1894用于生成边框圆角均设置为传入值的边框圆角对象。 1895 1896**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1897 1898**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1899 1900**参数：** 1901 1902| 参数名 | 类型 | 必填 | 说明 | 1903| ------ | ------ | ---- | ---------- | 1904| all | number | 是 | 边框圆角。 | 1905 1906**返回值：** 1907 1908| 类型 | 说明 | 1909| --------------------------------- | -------------------------------------- | 1910| [BorderRadiuses](#borderradiuses12) | 边框圆角均设置为传入值的边框圆角对象。 | 1911 1912**示例：** 1913 1914```ts 1915import { RenderNode, FrameNode, NodeController, borderRadiuses } from '@kit.ArkUI'; 1916 1917const renderNode = new RenderNode(); 1918renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1919renderNode.backgroundColor = 0XFF00FF00; 1920renderNode.borderRadius = borderRadiuses(32); 1921 1922 1923class MyNodeController extends NodeController { 1924 private rootNode: FrameNode | null = null; 1925 1926 makeNode(uiContext: UIContext): FrameNode | null { 1927 this.rootNode = new FrameNode(uiContext); 1928 1929 const rootRenderNode = this.rootNode.getRenderNode(); 1930 if (rootRenderNode !== null) { 1931 rootRenderNode.appendChild(renderNode); 1932 } 1933 1934 return this.rootNode; 1935 } 1936} 1937 1938@Entry 1939@Component 1940struct Index { 1941 private myNodeController: MyNodeController = new MyNodeController(); 1942 1943 build() { 1944 Row() { 1945 NodeContainer(this.myNodeController) 1946 } 1947 } 1948} 1949``` 1950