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