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~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 = " + (error as BusinessError).message); 746 sourceColor = ColorMetrics.resourceColor("#19000000"); 747 } 748 return sourceColor; 749} 750 751@Entry 752@Component 753struct ColorMetricsSample { 754 build() { 755 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 756 Button("ColorMetrics") 757 .width('80%') 758 .align(Alignment.Center) 759 .height(50) 760 .backgroundColor(getBlendColor($r("app.color.background_red")).color) 761 } 762 .width('100%') 763 .height('100%') 764 } 765} 766``` 767## Corners\<T><sup>12+</sup> 768 769用于设置四个角的圆角度数。 770 771**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 772 773**系统能力：** SystemCapability.ArkUI.ArkUI.Full 774 775| 名称 | 类型 | 可读 | 可写 | 说明 | 776| ----------- | ---- | ---- | ---- | ---------------------- | 777| topLeft | T | 是 | 是 | 左上边框的圆角属性。 | 778| topRight | T | 是 | 是 | 右上上边框的圆角属性。 | 779| bottomLeft | T | 是 | 是 | 左下边框的圆角属性。 | 780| bottomRight | T | 是 | 是 | 右下边框的圆角属性。 | 781 782## CornerRadius<sup>12+</sup> 783 784type CornerRadius = Corners\<Vector2> 785 786设置四个角的圆角度数。 787 788**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 789 790**系统能力：** SystemCapability.ArkUI.ArkUI.Full 791 792| 类型 | 说明 | 793| -------------------------------------------- | ------------------ | 794| [Corners](#cornerst12)[\<Vector2>](#vector2) | 四个角的圆角度数。 | 795 796## BorderRadiuses<sup>12+</sup> 797 798type BorderRadiuses = Corners\<number> 799 800设置四个角的圆角度数。 801 802**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 803 804**系统能力：** SystemCapability.ArkUI.ArkUI.Full 805 806| 类型 | 说明 | 807| ------------------------------- | ------------------ | 808| [Corners\<number>](#cornerst12) | 四个角的圆角度数。 | 809 810## Rect<sup>12+</sup> 811 812type Rect = common2D.Rect 813 814用于设置矩形的形状。 815 816**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 817 818**系统能力：** SystemCapability.ArkUI.ArkUI.Full 819 820| 类型 | 说明 | 821| ------------------------------------------------------------ | ---------- | 822| [common2D.Rect](../apis-arkgraphics2d/js-apis-graphics-common2D.md#rect) | 矩形区域。 | 823 824## RoundRect<sup>12+</sup> 825 826用于设置带有圆角的矩形。 827 828**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 829 830**系统能力：** SystemCapability.ArkUI.ArkUI.Full 831 832| 名称 | 类型 | 可读 | 可写 | 说明 | 833| ------- | ----------------------------- | ---- | ---- | ---------------- | 834| rect | [Rect](#rect12) | 是 | 是 | 设置矩形的属性。 | 835| corners | [CornerRadius](#cornerradius12) | 是 | 是 | 设置圆角的属性。 | 836 837## Circle<sup>12+</sup> 838 839用于设置圆形的属性。 840 841**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 842 843**系统能力：** SystemCapability.ArkUI.ArkUI.Full 844 845| 名称 | 类型 | 可读 | 可写 | 说明 | 846| ------- | ------ | ---- | ---- | ------------------------- | 847| centerX | number | 是 | 是 | 圆心x轴的位置，单位为px。 | 848| centerY | number | 是 | 是 | 圆心y轴的位置，单位为px。 | 849| radius | number | 是 | 是 | 圆形的半径，单位为px。 | 850 851## CommandPath<sup>12+</sup> 852 853用于设置路径绘制的指令。 854 855**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 856 857**系统能力：** SystemCapability.ArkUI.ArkUI.Full 858 859| 名称 | 类型 | 可读 | 可写 | 说明 | 860| ------------------------------------------------------------ | ------ | ---- | ---- | ------------------------------------------------------------ | 861| [commands](./arkui-ts/ts-drawing-components-path.md#commands-1) | string | 是 | 是 | 路径绘制的指令字符串。像素单位的转换方法请参考[像素单位转换](./arkui-ts/ts-pixel-units.md#像素单位转换)。<br/>单位：px | 862 863## ShapeMask<sup>12+</sup> 864 865用于设置图形遮罩。 866 867### constructor<sup>12+</sup> 868 869constructor() 870 871ShapeMask的构造函数。 872 873**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 874 875**系统能力：** SystemCapability.ArkUI.ArkUI.Full 876 877### setRectShape<sup>12+</sup> 878 879setRectShape(rect: Rect): void 880 881用于设置矩形遮罩。 882 883**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 884 885**系统能力：** SystemCapability.ArkUI.ArkUI.Full 886 887**参数：** 888 889| 参数名 | 类型 | 必填 | 说明 | 890| ------ | ------------- | ---- | ------------ | 891| rect | [Rect](#rect12) | 是 | 矩形的形状。 | 892 893**示例：** 894 895```ts 896import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 897 898const mask = new ShapeMask(); 899mask.setRectShape({ left: 0, right: vp2px(150), top: 0, bottom: vp2px(150) }); 900mask.fillColor = 0X55FF0000; 901 902const renderNode = new RenderNode(); 903renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 904renderNode.backgroundColor = 0XFF00FF00; 905renderNode.shapeMask = mask; 906 907 908class MyNodeController extends NodeController { 909 private rootNode: FrameNode | null = null; 910 911 makeNode(uiContext: UIContext): FrameNode | null { 912 this.rootNode = new FrameNode(uiContext); 913 914 const rootRenderNode = this.rootNode.getRenderNode(); 915 if (rootRenderNode !== null) { 916 rootRenderNode.appendChild(renderNode); 917 } 918 919 return this.rootNode; 920 } 921} 922 923@Entry 924@Component 925struct Index { 926 private myNodeController: MyNodeController = new MyNodeController(); 927 928 build() { 929 Row() { 930 NodeContainer(this.myNodeController) 931 } 932 } 933} 934``` 935 936### setRoundRectShape<sup>12+</sup> 937 938setRoundRectShape(roundRect: RoundRect): void 939 940用于设置圆角矩形遮罩。 941 942**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 943 944**系统能力：** SystemCapability.ArkUI.ArkUI.Full 945 946**参数：** 947 948| 参数名 | 类型 | 必填 | 说明 | 949| --------- | ----------------------- | ---- | ---------------- | 950| roundRect | [RoundRect](#roundrect12) | 是 | 圆角矩形的形状。 | 951 952**示例：** 953 954```ts 955import { RenderNode, FrameNode, NodeController, ShapeMask,RoundRect} from '@kit.ArkUI'; 956 957const mask = new ShapeMask(); 958const roundRect: RoundRect = { 959 rect: { left: 0, top: 0, right: vp2px(150), bottom: vp2px(150) }, 960 corners: { 961 topLeft: { x: 32, y: 32 }, 962 topRight: { x: 32, y: 32 }, 963 bottomLeft: { x: 32, y: 32 }, 964 bottomRight: { x: 32, y: 32 } 965 } 966} 967mask.setRoundRectShape(roundRect); 968mask.fillColor = 0X55FF0000; 969 970const renderNode = new RenderNode(); 971renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 972renderNode.backgroundColor = 0XFF00FF00; 973renderNode.shapeMask = mask; 974 975 976class MyNodeController extends NodeController { 977 private rootNode: FrameNode | null = null; 978 979 makeNode(uiContext: UIContext): FrameNode | null { 980 this.rootNode = new FrameNode(uiContext); 981 982 const rootRenderNode = this.rootNode.getRenderNode(); 983 if (rootRenderNode !== null) { 984 rootRenderNode.appendChild(renderNode); 985 } 986 987 return this.rootNode; 988 } 989} 990 991@Entry 992@Component 993struct Index { 994 private myNodeController: MyNodeController = new MyNodeController(); 995 996 build() { 997 Row() { 998 NodeContainer(this.myNodeController) 999 } 1000 } 1001} 1002``` 1003 1004### setCircleShape<sup>12+</sup> 1005 1006setCircleShape(circle: Circle): void 1007 1008用于设置圆形遮罩。 1009 1010**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1011 1012**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1013 1014**参数：** 1015 1016| 参数名 | 类型 | 必填 | 说明 | 1017| ------ | ----------------- | ---- | ------------ | 1018| circle | [Circle](#circle12) | 是 | 圆形的形状。 | 1019 1020**示例：** 1021 1022```ts 1023import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1024 1025const mask = new ShapeMask(); 1026mask.setCircleShape({ centerY: vp2px(75), centerX: vp2px(75), radius: vp2px(75) }); 1027mask.fillColor = 0X55FF0000; 1028 1029const renderNode = new RenderNode(); 1030renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1031renderNode.backgroundColor = 0XFF00FF00; 1032renderNode.shapeMask = mask; 1033 1034 1035class MyNodeController extends NodeController { 1036 private rootNode: FrameNode | null = null; 1037 1038 makeNode(uiContext: UIContext): FrameNode | null { 1039 this.rootNode = new FrameNode(uiContext); 1040 1041 const rootRenderNode = this.rootNode.getRenderNode(); 1042 if (rootRenderNode !== null) { 1043 rootRenderNode.appendChild(renderNode); 1044 } 1045 1046 return this.rootNode; 1047 } 1048} 1049 1050@Entry 1051@Component 1052struct Index { 1053 private myNodeController: MyNodeController = new MyNodeController(); 1054 1055 build() { 1056 Row() { 1057 NodeContainer(this.myNodeController) 1058 } 1059 } 1060} 1061``` 1062 1063### setOvalShape<sup>12+</sup> 1064 1065setOvalShape(oval: Rect): void 1066 1067用于设置椭圆形遮罩。 1068 1069**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1070 1071**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1072 1073**参数：** 1074 1075| 参数名 | 类型 | 必填 | 说明 | 1076| ------ | ------------- | ---- | -------------- | 1077| oval | [Rect](#rect12) | 是 | 椭圆形的形状。 | 1078 1079**示例：** 1080 1081```ts 1082import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1083 1084const mask = new ShapeMask(); 1085mask.setOvalShape({ left: 0, right: vp2px(150), top: 0, bottom: vp2px(100) }); 1086mask.fillColor = 0X55FF0000; 1087 1088const renderNode = new RenderNode(); 1089renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1090renderNode.backgroundColor = 0XFF00FF00; 1091renderNode.shapeMask = mask; 1092 1093 1094class MyNodeController extends NodeController { 1095 private rootNode: FrameNode | null = null; 1096 1097 makeNode(uiContext: UIContext): FrameNode | null { 1098 this.rootNode = new FrameNode(uiContext); 1099 1100 const rootRenderNode = this.rootNode.getRenderNode(); 1101 if (rootRenderNode !== null) { 1102 rootRenderNode.appendChild(renderNode); 1103 } 1104 1105 return this.rootNode; 1106 } 1107} 1108 1109@Entry 1110@Component 1111struct Index { 1112 private myNodeController: MyNodeController = new MyNodeController(); 1113 1114 build() { 1115 Row() { 1116 NodeContainer(this.myNodeController) 1117 } 1118 } 1119} 1120``` 1121 1122### setCommandPath<sup>12+</sup> 1123 1124setCommandPath(path: CommandPath): void 1125 1126用于设置路径绘制指令。 1127 1128**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1129 1130**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1131 1132**参数：** 1133 1134| 参数名 | 类型 | 必填 | 说明 | 1135| ------ | --------------------------- | ---- | -------------- | 1136| path | [CommandPath](#commandpath12) | 是 | 路径绘制指令。 | 1137 1138**示例：** 1139 1140```ts 1141import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1142 1143const mask = new ShapeMask(); 1144mask.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1145mask.fillColor = 0X55FF0000; 1146 1147const renderNode = new RenderNode(); 1148renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1149renderNode.backgroundColor = 0XFF00FF00; 1150renderNode.shapeMask = mask; 1151 1152 1153class MyNodeController extends NodeController { 1154 private rootNode: FrameNode | null = null; 1155 1156 makeNode(uiContext: UIContext): FrameNode | null { 1157 this.rootNode = new FrameNode(uiContext); 1158 1159 const rootRenderNode = this.rootNode.getRenderNode(); 1160 if (rootRenderNode !== null) { 1161 rootRenderNode.appendChild(renderNode); 1162 } 1163 1164 return this.rootNode; 1165 } 1166} 1167 1168@Entry 1169@Component 1170struct Index { 1171 private myNodeController: MyNodeController = new MyNodeController(); 1172 1173 build() { 1174 Row() { 1175 NodeContainer(this.myNodeController) 1176 } 1177 } 1178} 1179``` 1180 1181### fillColor<sup>12+</sup> 1182 1183fillColor: number 1184 1185遮罩的填充颜色，使用ARGB格式。默认值为`0XFF000000`。 1186 1187**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1188 1189**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1190 1191**示例：** 1192 1193```ts 1194import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1195 1196const mask = new ShapeMask(); 1197mask.setRectShape({ left: 0, right: 150, top: 0, bottom: 150 }); 1198mask.fillColor = 0X55FF0000; 1199 1200const renderNode = new RenderNode(); 1201renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1202renderNode.backgroundColor = 0XFF00FF00; 1203renderNode.shapeMask = mask; 1204 1205 1206class MyNodeController extends NodeController { 1207 private rootNode: FrameNode | null = null; 1208 1209 makeNode(uiContext: UIContext): FrameNode | null { 1210 this.rootNode = new FrameNode(uiContext); 1211 1212 const rootRenderNode = this.rootNode.getRenderNode(); 1213 if (rootRenderNode !== null) { 1214 rootRenderNode.appendChild(renderNode); 1215 } 1216 1217 return this.rootNode; 1218 } 1219} 1220 1221@Entry 1222@Component 1223struct Index { 1224 private myNodeController: MyNodeController = new MyNodeController(); 1225 1226 build() { 1227 Row() { 1228 NodeContainer(this.myNodeController) 1229 } 1230 } 1231} 1232``` 1233 1234### strokeColor<sup>12+</sup> 1235 1236strokeColor: number 1237 1238遮罩的边框颜色，使用ARGB格式。默认值为`0XFF000000`。 1239 1240**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1241 1242**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1243 1244**示例：** 1245 1246```ts 1247import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1248 1249const mask = new ShapeMask(); 1250mask.setRectShape({ left: 0, right: 150, top: 0, bottom: 150 }); 1251mask.strokeColor = 0XFFFF0000; 1252mask.strokeWidth = 24; 1253 1254const renderNode = new RenderNode(); 1255renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1256renderNode.backgroundColor = 0XFF00FF00; 1257renderNode.shapeMask = mask; 1258 1259 1260class MyNodeController extends NodeController { 1261 private rootNode: FrameNode | null = null; 1262 1263 makeNode(uiContext: UIContext): FrameNode | null { 1264 this.rootNode = new FrameNode(uiContext); 1265 1266 const rootRenderNode = this.rootNode.getRenderNode(); 1267 if (rootRenderNode !== null) { 1268 rootRenderNode.appendChild(renderNode); 1269 } 1270 1271 return this.rootNode; 1272 } 1273} 1274 1275@Entry 1276@Component 1277struct Index { 1278 private myNodeController: MyNodeController = new MyNodeController(); 1279 1280 build() { 1281 Row() { 1282 NodeContainer(this.myNodeController) 1283 } 1284 } 1285} 1286``` 1287 1288### strokeWidth<sup>12+</sup> 1289 1290strokeWidth: number 1291 1292遮罩的边框宽度，单位为px。默认值为0。 1293 1294**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1295 1296**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1297 1298**示例：** 1299 1300```ts 1301import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1302 1303const mask = new ShapeMask(); 1304mask.setRectShape({ left: 0, right: 150, top: 0, bottom: 150 }); 1305mask.strokeColor = 0XFFFF0000; 1306mask.strokeWidth = 24; 1307 1308const renderNode = new RenderNode(); 1309renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1310renderNode.backgroundColor = 0XFF00FF00; 1311renderNode.shapeMask = mask; 1312 1313 1314class MyNodeController extends NodeController { 1315 private rootNode: FrameNode | null = null; 1316 1317 makeNode(uiContext: UIContext): FrameNode | null { 1318 this.rootNode = new FrameNode(uiContext); 1319 1320 const rootRenderNode = this.rootNode.getRenderNode(); 1321 if (rootRenderNode !== null) { 1322 rootRenderNode.appendChild(renderNode); 1323 } 1324 1325 return this.rootNode; 1326 } 1327} 1328 1329@Entry 1330@Component 1331struct Index { 1332 private myNodeController: MyNodeController = new MyNodeController(); 1333 1334 build() { 1335 Row() { 1336 NodeContainer(this.myNodeController) 1337 } 1338 } 1339} 1340``` 1341 1342## ShapeClip<sup>12+</sup> 1343 1344用于设置图形裁剪。 1345 1346### constructor<sup>12+</sup> 1347 1348constructor() 1349 1350ShapeClip的构造函数。 1351 1352**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1353 1354**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1355 1356### setRectShape<sup>12+</sup> 1357 1358setRectShape(rect: Rect): void 1359 1360用于裁剪矩形。 1361 1362**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1363 1364**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1365 1366**参数：** 1367 1368| 参数名 | 类型 | 必填 | 说明 | 1369| ------ | ------------- | ---- | ------------ | 1370| rect | [Rect](#rect12) | 是 | 矩形的形状。 | 1371 1372**示例：** 1373 1374```ts 1375import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI'; 1376 1377const clip = new ShapeClip(); 1378clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1379 1380const renderNode = new RenderNode(); 1381renderNode.frame = { 1382 x: 0, 1383 y: 0, 1384 width: 150, 1385 height: 150 1386}; 1387renderNode.backgroundColor = 0XFF00FF00; 1388renderNode.shapeClip = clip; 1389const shapeClip = renderNode.shapeClip; 1390 1391class MyNodeController extends NodeController { 1392 private rootNode: FrameNode | null = null; 1393 1394 makeNode(uiContext: UIContext): FrameNode | null { 1395 this.rootNode = new FrameNode(uiContext); 1396 1397 const rootRenderNode = this.rootNode.getRenderNode(); 1398 if (rootRenderNode !== null) { 1399 rootRenderNode.appendChild(renderNode); 1400 } 1401 1402 return this.rootNode; 1403 } 1404} 1405 1406@Entry 1407@Component 1408struct Index { 1409 private myNodeController: MyNodeController = new MyNodeController(); 1410 1411 build() { 1412 Column() { 1413 NodeContainer(this.myNodeController) 1414 .borderWidth(1) 1415 Button("setRectShape") 1416 .onClick(() => { 1417 shapeClip.setRectShape({ 1418 left: 0, 1419 right: 150, 1420 top: 0, 1421 bottom: 150 1422 }); 1423 renderNode.shapeClip = shapeClip; 1424 }) 1425 } 1426 } 1427} 1428``` 1429 1430### setRoundRectShape<sup>12+</sup> 1431 1432setRoundRectShape(roundRect: RoundRect): void 1433 1434用于裁剪圆角矩形。 1435 1436**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1437 1438**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1439 1440**参数：** 1441 1442| 参数名 | 类型 | 必填 | 说明 | 1443| --------- | ----------------------- | ---- | ---------------- | 1444| roundRect | [RoundRect](#roundrect12) | 是 | 圆角矩形的形状。 | 1445 1446**示例：** 1447```ts 1448import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI'; 1449 1450const clip = new ShapeClip(); 1451clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1452 1453const renderNode = new RenderNode(); 1454renderNode.frame = { 1455 x: 0, 1456 y: 0, 1457 width: 150, 1458 height: 150 1459}; 1460renderNode.backgroundColor = 0XFF00FF00; 1461renderNode.shapeClip = clip; 1462 1463class MyNodeController extends NodeController { 1464 private rootNode: FrameNode | null = null; 1465 1466 makeNode(uiContext: UIContext): FrameNode | null { 1467 this.rootNode = new FrameNode(uiContext); 1468 1469 const rootRenderNode = this.rootNode.getRenderNode(); 1470 if (rootRenderNode !== null) { 1471 rootRenderNode.appendChild(renderNode); 1472 } 1473 1474 return this.rootNode; 1475 } 1476} 1477 1478@Entry 1479@Component 1480struct Index { 1481 private myNodeController: MyNodeController = new MyNodeController(); 1482 1483 build() { 1484 Column() { 1485 NodeContainer(this.myNodeController) 1486 .borderWidth(1) 1487 Button("setRoundRectShape") 1488 .onClick(() => { 1489 renderNode.shapeClip.setRoundRectShape({ 1490 rect: { 1491 left: 0, 1492 top: 0, 1493 right: vp2px(150), 1494 bottom: vp2px(150) 1495 }, 1496 corners: { 1497 topLeft: { x: 32, y: 32 }, 1498 topRight: { x: 32, y: 32 }, 1499 bottomLeft: { x: 32, y: 32 }, 1500 bottomRight: { x: 32, y: 32 } 1501 } 1502 }); 1503 renderNode.shapeClip = renderNode.shapeClip; 1504 }) 1505 } 1506 } 1507} 1508``` 1509 1510### setCircleShape<sup>12+</sup> 1511 1512setCircleShape(circle: Circle): void 1513 1514用于裁剪圆形。 1515 1516**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1517 1518**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1519 1520**参数：** 1521 1522| 参数名 | 类型 | 必填 | 说明 | 1523| ------ | ----------------- | ---- | ------------ | 1524| circle | [Circle](#circle12) | 是 | 圆形的形状。 | 1525 1526**示例：** 1527 1528```ts 1529import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI'; 1530 1531const clip = new ShapeClip(); 1532clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1533 1534const renderNode = new RenderNode(); 1535renderNode.frame = { 1536 x: 0, 1537 y: 0, 1538 width: 150, 1539 height: 150 1540}; 1541renderNode.backgroundColor = 0XFF00FF00; 1542renderNode.shapeClip = clip; 1543 1544class MyNodeController extends NodeController { 1545 private rootNode: FrameNode | null = null; 1546 1547 makeNode(uiContext: UIContext): FrameNode | null { 1548 this.rootNode = new FrameNode(uiContext); 1549 1550 const rootRenderNode = this.rootNode.getRenderNode(); 1551 if (rootRenderNode !== null) { 1552 rootRenderNode.appendChild(renderNode); 1553 } 1554 1555 return this.rootNode; 1556 } 1557} 1558 1559@Entry 1560@Component 1561struct Index { 1562 private myNodeController: MyNodeController = new MyNodeController(); 1563 1564 build() { 1565 Column() { 1566 NodeContainer(this.myNodeController) 1567 .borderWidth(1) 1568 Button("setCircleShape") 1569 .onClick(() => { 1570 renderNode.shapeClip.setCircleShape({ centerY: 75, centerX: 75, radius: 75 }); 1571 renderNode.shapeClip = renderNode.shapeClip; 1572 1573 }) 1574 } 1575 } 1576} 1577``` 1578 1579### setOvalShape<sup>12+</sup> 1580 1581setOvalShape(oval: Rect): void 1582 1583用于裁剪椭圆形。 1584 1585**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1586 1587**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1588 1589**参数：** 1590 1591| 参数名 | 类型 | 必填 | 说明 | 1592| ------ | ------------- | ---- | -------------- | 1593| oval | [Rect](#rect12) | 是 | 椭圆形的形状。 | 1594 1595**示例：** 1596 1597```ts 1598import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI'; 1599 1600const clip = new ShapeClip(); 1601clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1602 1603const renderNode = new RenderNode(); 1604renderNode.frame = { 1605 x: 0, 1606 y: 0, 1607 width: 150, 1608 height: 150 1609}; 1610renderNode.backgroundColor = 0XFF00FF00; 1611renderNode.shapeClip = clip; 1612 1613class MyNodeController extends NodeController { 1614 private rootNode: FrameNode | null = null; 1615 1616 makeNode(uiContext: UIContext): FrameNode | null { 1617 this.rootNode = new FrameNode(uiContext); 1618 1619 const rootRenderNode = this.rootNode.getRenderNode(); 1620 if (rootRenderNode !== null) { 1621 rootRenderNode.appendChild(renderNode); 1622 } 1623 1624 return this.rootNode; 1625 } 1626} 1627 1628@Entry 1629@Component 1630struct Index { 1631 private myNodeController: MyNodeController = new MyNodeController(); 1632 1633 build() { 1634 Column() { 1635 NodeContainer(this.myNodeController) 1636 .borderWidth(1) 1637 Button("setOvalShape") 1638 .onClick(() => { 1639 renderNode.shapeClip.setOvalShape({ 1640 left: 0, 1641 right: vp2px(150), 1642 top: 0, 1643 bottom: vp2px(100) 1644 }); 1645 renderNode.shapeClip = renderNode.shapeClip; 1646 }) 1647 } 1648 } 1649} 1650``` 1651 1652### setCommandPath<sup>12+</sup> 1653 1654setCommandPath(path: CommandPath): void 1655 1656用于裁剪路径绘制指令。 1657 1658**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1659 1660**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1661 1662**参数：** 1663 1664| 参数名 | 类型 | 必填 | 说明 | 1665| ------ | --------------------------- | ---- | -------------- | 1666| path | [CommandPath](#commandpath12) | 是 | 路径绘制指令。 | 1667 1668**示例：** 1669 1670```ts 1671import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI'; 1672 1673const clip = new ShapeClip(); 1674clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1675 1676const renderNode = new RenderNode(); 1677renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1678renderNode.backgroundColor = 0XFF00FF00; 1679renderNode.shapeClip = clip; 1680 1681class MyNodeController extends NodeController { 1682 private rootNode: FrameNode | null = null; 1683 1684 makeNode(uiContext: UIContext): FrameNode | null { 1685 this.rootNode = new FrameNode(uiContext); 1686 1687 const rootRenderNode = this.rootNode.getRenderNode(); 1688 if (rootRenderNode !== null) { 1689 rootRenderNode.appendChild(renderNode); 1690 } 1691 1692 return this.rootNode; 1693 } 1694} 1695 1696@Entry 1697@Component 1698struct Index { 1699 private myNodeController: MyNodeController = new MyNodeController(); 1700 1701 build() { 1702 Column() { 1703 NodeContainer(this.myNodeController) 1704 .borderWidth(1) 1705 Button("setCommandPath") 1706 .onClick(()=>{ 1707 renderNode.shapeClip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1708 renderNode.shapeClip = renderNode.shapeClip; 1709 }) 1710 } 1711 } 1712} 1713``` 1714 1715## edgeColors<sup>12+</sup> 1716 1717edgeColors(all: number): Edges\<number> 1718 1719用于生成边框颜色均设置为传入值的边框颜色对象。 1720 1721**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1722 1723**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1724 1725**参数：** 1726 1727| 参数名 | 类型 | 必填 | 说明 | 1728| ------ | ------ | ---- | -------------------- | 1729| all | number | 是 | 边框颜色，ARGB格式。 | 1730 1731**返回值：** 1732 1733| 类型 | 说明 | 1734| ------------------------ | -------------------------------------- | 1735| [Edges\<number>](#edgest12) | 边框颜色均设置为传入值的边框颜色对象。 | 1736 1737**示例：** 1738 1739```ts 1740import { RenderNode, FrameNode, NodeController, edgeColors } from '@kit.ArkUI'; 1741 1742const renderNode = new RenderNode(); 1743renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1744renderNode.backgroundColor = 0XFF00FF00; 1745renderNode.borderWidth = { left: 8, top: 8, right: 8, bottom: 8 }; 1746renderNode.borderColor = edgeColors(0xFF0000FF); 1747 1748 1749class MyNodeController extends NodeController { 1750 private rootNode: FrameNode | null = null; 1751 1752 makeNode(uiContext: UIContext): FrameNode | null { 1753 this.rootNode = new FrameNode(uiContext); 1754 1755 const rootRenderNode = this.rootNode.getRenderNode(); 1756 if (rootRenderNode !== null) { 1757 rootRenderNode.appendChild(renderNode); 1758 } 1759 1760 return this.rootNode; 1761 } 1762} 1763 1764@Entry 1765@Component 1766struct Index { 1767 private myNodeController: MyNodeController = new MyNodeController(); 1768 1769 build() { 1770 Row() { 1771 NodeContainer(this.myNodeController) 1772 } 1773 } 1774} 1775``` 1776 1777## edgeWidths<sup>12+</sup> 1778 1779edgeWidths(all: number): Edges\<number> 1780 1781用于生成边框宽度均设置为传入值的边框宽度对象。 1782 1783**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1784 1785**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1786 1787**参数：** 1788 1789| 参数名 | 类型 | 必填 | 说明 | 1790| ------ | ------ | ---- | -------------------- | 1791| all | number | 是 | 边框宽度，单位为vp。 | 1792 1793**返回值：** 1794 1795| 类型 | 说明 | 1796| ------------------------ | -------------------------------------- | 1797| [Edges\<number>](#edgest12) | 边框宽度均设置为传入值的边框宽度对象。 | 1798 1799**示例：** 1800 1801```ts 1802import { RenderNode, FrameNode, NodeController, edgeWidths } from '@kit.ArkUI'; 1803 1804const renderNode = new RenderNode(); 1805renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1806renderNode.backgroundColor = 0XFF00FF00; 1807renderNode.borderWidth = edgeWidths(8); 1808renderNode.borderColor = { left: 0xFF0000FF, top: 0xFF0000FF, right: 0xFF0000FF, bottom: 0xFF0000FF }; 1809 1810 1811class MyNodeController extends NodeController { 1812 private rootNode: FrameNode | null = null; 1813 1814 makeNode(uiContext: UIContext): FrameNode | null { 1815 this.rootNode = new FrameNode(uiContext); 1816 1817 const rootRenderNode = this.rootNode.getRenderNode(); 1818 if (rootRenderNode !== null) { 1819 rootRenderNode.appendChild(renderNode); 1820 } 1821 1822 return this.rootNode; 1823 } 1824} 1825 1826@Entry 1827@Component 1828struct Index { 1829 private myNodeController: MyNodeController = new MyNodeController(); 1830 1831 build() { 1832 Row() { 1833 NodeContainer(this.myNodeController) 1834 } 1835 } 1836} 1837``` 1838 1839## borderStyles<sup>12+</sup> 1840 1841borderStyles(all: BorderStyle): Edges\<BorderStyle> 1842 1843用于生成边框样式均设置为传入值的边框样式对象。 1844 1845**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1846 1847**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1848 1849**参数：** 1850 1851| 参数名 | 类型 | 必填 | 说明 | 1852| ------ | ---------------------------------------------------------- | ---- | ---------- | 1853| all | [BorderStyle](./arkui-ts/ts-appendix-enums.md#borderstyle) | 是 | 边框样式。 | 1854 1855**返回值：** 1856 1857| 类型 | 说明 | 1858| --------------------------------------------------------------------------- | -------------------------------------- | 1859| [Edges](#edgest12)<[BorderStyle](./arkui-ts/ts-appendix-enums.md#borderstyle)> | 边框样式均设置为传入值的边框样式对象。 | 1860 1861**示例：** 1862 1863```ts 1864import { RenderNode, FrameNode, NodeController, borderStyles } from '@kit.ArkUI'; 1865 1866const renderNode = new RenderNode(); 1867renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1868renderNode.backgroundColor = 0XFF00FF00; 1869renderNode.borderWidth = { left: 8, top: 8, right: 8, bottom: 8 }; 1870renderNode.borderColor = { left: 0xFF0000FF, top: 0xFF0000FF, right: 0xFF0000FF, bottom: 0xFF0000FF }; 1871renderNode.borderStyle = borderStyles(BorderStyle.Dotted); 1872 1873 1874class MyNodeController extends NodeController { 1875 private rootNode: FrameNode | null = null; 1876 1877 makeNode(uiContext: UIContext): FrameNode | null { 1878 this.rootNode = new FrameNode(uiContext); 1879 1880 const rootRenderNode = this.rootNode.getRenderNode(); 1881 if (rootRenderNode !== null) { 1882 rootRenderNode.appendChild(renderNode); 1883 } 1884 1885 return this.rootNode; 1886 } 1887} 1888 1889@Entry 1890@Component 1891struct Index { 1892 private myNodeController: MyNodeController = new MyNodeController(); 1893 1894 build() { 1895 Row() { 1896 NodeContainer(this.myNodeController) 1897 } 1898 } 1899} 1900``` 1901 1902## borderRadiuses<sup>12+</sup> 1903 1904borderRadiuses(all: number): BorderRadiuses 1905 1906用于生成边框圆角均设置为传入值的边框圆角对象。 1907 1908**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1909 1910**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1911 1912**参数：** 1913 1914| 参数名 | 类型 | 必填 | 说明 | 1915| ------ | ------ | ---- | ---------- | 1916| all | number | 是 | 边框圆角。 | 1917 1918**返回值：** 1919 1920| 类型 | 说明 | 1921| --------------------------------- | -------------------------------------- | 1922| [BorderRadiuses](#borderradiuses12) | 边框圆角均设置为传入值的边框圆角对象。 | 1923 1924**示例：** 1925 1926```ts 1927import { RenderNode, FrameNode, NodeController, borderRadiuses } from '@kit.ArkUI'; 1928 1929const renderNode = new RenderNode(); 1930renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1931renderNode.backgroundColor = 0XFF00FF00; 1932renderNode.borderRadius = borderRadiuses(32); 1933 1934 1935class MyNodeController extends NodeController { 1936 private rootNode: FrameNode | null = null; 1937 1938 makeNode(uiContext: UIContext): FrameNode | null { 1939 this.rootNode = new FrameNode(uiContext); 1940 1941 const rootRenderNode = this.rootNode.getRenderNode(); 1942 if (rootRenderNode !== null) { 1943 rootRenderNode.appendChild(renderNode); 1944 } 1945 1946 return this.rootNode; 1947 } 1948} 1949 1950@Entry 1951@Component 1952struct Index { 1953 private myNodeController: MyNodeController = new MyNodeController(); 1954 1955 build() { 1956 Row() { 1957 NodeContainer(this.myNodeController) 1958 } 1959 } 1960} 1961``` 1962