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