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