1# XComponent 2 3提供用于图形绘制和媒体数据写入的Surface，XComponent负责将其嵌入到视图中，支持应用自定义Surface位置和大小。具体指南请参考[自定义渲染 (XComponent)文档](../../../ui/napi-xcomponent-guidelines.md)。 4 5> **说明：** 6> 7> 该组件从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11无 12 13## 接口 14 15### XComponent<sup>12+</sup> 16 17XComponent(options: XComponentOptions) 18 19**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 20 21**系统能力：** SystemCapability.ArkUI.ArkUI.Full 22 23**参数:** 24 25| 参数名 | 类型 | 必填 | 说明 | 26| ------- | --------------------------------------- | ---- | ------------------------------ | 27| options | [XComponentOptions](#xcomponentoptions12) | 是 | 定义XComponent的具体配置参数。 | 28 29### XComponent<sup>10+</sup> 30 31XComponent(value: {id: string, type: XComponentType, libraryname?: string, controller?: XComponentController}) 32 33该接口从API version 12开始不再演进，推荐使用[XComponent(options: XComponentOptions)](#xcomponent12)。 34 35**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39**参数:** 40 41| 参数名 | 类型 | 必填 | 说明 | 42| ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ | 43| id | string | 是 | 组件的唯一标识，支持最大的字符串长度128。 | 44| type | [XComponentType](ts-appendix-enums.md#xcomponenttype10) | 是 | 用于指定XComponent组件类型。 | 45| libraryname | string | 否 | 用Native层编译输出动态库名称（对应的动态库不支持跨模块加载），仅类型为SURFACE或TEXTURE时有效。 | 46| controller | [XComponentController](#xcomponentcontroller) | 否 | 给组件绑定一个控制器，通过控制器调用组件方法，仅类型为SURFACE或TEXTURE时有效。 | 47 48### XComponent<sup>(deprecated)</sup> 49 50XComponent(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}) 51 52**说明：** 53 54从API version 12开始废弃，建议使用[XComponent(options: XComponentOptions)](#xcomponent12)替代。 55 56**系统能力：** SystemCapability.ArkUI.ArkUI.Full 57 58**参数:** 59 60| 参数名 | 类型 | 必填 | 说明 | 61| ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ | 62| id | string | 是 | 组件的唯一标识，支持最大的字符串长度128。 | 63| type | string | 是 | 用于指定XComponent组件类型，可选值仅有两个为：<br/>-"surface"：用于EGL/OpenGLES和媒体数据写入，开发者定制的绘制内容单独展示到屏幕上。<br/>-"component"<sup>9+</sup> ：XComponent将变成一个容器组件，并可在其中执行非UI逻辑以动态加载显示内容。<br/>其他值均会被视为"surface"类型 | 64| libraryname | string | 否 | 应用Native层编译输出动态库名称（对应的动态库不支持跨模块加载），仅XComponent类型为"surface"时有效。 | 65| controller | [XComponentcontroller](#xcomponentcontroller) | 否 | 给组件绑定一个控制器，通过控制器调用组件方法，仅XComponent类型为"surface"时有效。 | 66 67## XComponentOptions<sup>12+</sup> 68 69定义XComponent的具体配置参数。 70 71**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 72 73**系统能力：** SystemCapability.ArkUI.ArkUI.Full 74 75| 名称 | 类型 | 必填 | 说明 | 76| -------- | -------- | -------- | -------- | 77| type | [XComponentType](ts-appendix-enums.md#xcomponenttype10) | 是 | 用于指定XComponent组件类型。 | 78| controller | [XComponentController](#xcomponentcontroller) | 是 | 给组件绑定一个控制器，通过控制器调用组件方法，仅类型为SURFACE或TEXTURE时有效。 | 79| imageAIOptions | [ImageAIOptions](ts-image-common.md#imageaioptions) | 否 | 给组件设置一个AI分析选项，通过此项可配置分析类型或绑定一个分析控制器。 | 80 81 82## 属性 83除支持通用属性外，还支持以下属性： 84 > 85 > **说明：** 86 > 87 > 不支持foregroundColor、obscured和pixelStretchEffect属性，并且type为SURFACE类型时也不支持动态属性设置、自定义绘制、背景设置(backgroundColor除外)、图像效果(shadow除外)、maskShape和foregroundEffect属性。 88 > 89 > 对于TEXTURE和SURFACE类型的XComponent组件，当不设置[renderFit](./ts-universal-attributes-renderfit.md)属性时，取默认值为RenderFit.RESIZE_FILL。 90 > 91 > 对于SURFACE类型的XComponent组件，当组件背景色为不透明的纯黑色时，其[renderFit](./ts-universal-attributes-renderfit.md)通用属性仅支持设置为RenderFit.RESIZE_FILL，不推荐设置为其他的RenderFit枚举值。 92 > 93 > 对于使用[ArkUI NDK接口](../../../ui/ndk-access-the-arkts-page.md)创建的XComponent组件，不支持使用属性获取函数[getAttribute](../_ark_u_i___native_node_a_p_i__1.md#getattribute)获取其renderFit属性值。 94 95### enableAnalyzer<sup>12+</sup> 96 97enableAnalyzer(enable: boolean) 98 99设置组件支持AI分析，当前支持主体识别、文字识别和对象查找等功能。 100本功能需要搭配XComponentController的[StartImageAnalyzer](#startimageanalyzer12)和[StopImageAnalyzer](#stopimageanalyzer12)一起使用。 101不能和[overlay](ts-universal-attributes-overlay.md)属性同时使用，两者同时设置时overlay中CustomBuilder属性将失效。该特性依赖设备能力。 102 103**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 104 105**系统能力：** SystemCapability.ArkUI.ArkUI.Full 106 107**参数：** 108 109| 参数名 | 类型 | 必填 | 说明 | 110| -------- | -------- | -------- | -------- | 111| enable | boolean | 是 | 是否启用图像分析功能。 | 112 113 > **说明：** 114 > 115 > 仅type为SURFACE和TEXTURE时该功能有效。 116 117### enableSecure<sup>13+</sup> 118 119enableSecure(isSecure: boolean) 120 121防止组件内自绘制内容被截屏、录屏。 122 123**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 124 125**系统能力：** SystemCapability.ArkUI.ArkUI.Full 126 127**参数：** 128 129| 参数名 | 类型 | 必填 | 说明 | 130| -------- | ------- | ---- | ---------------------- | 131| isSecure | boolean | 是 | 是否开启隐私图层模式。 | 132 133 > **说明：** 134 > 135 > 仅type为SURFACE时有效。 136 > 137 > 不支持[ArkUI NDK接口](../../../ui/ndk-build-ui-overview.md)创建的XComponent组件。 138 139## 事件 140 141从API version 12开始，type为SURFACE或TEXTURE时，支持[通用事件](ts-component-general-events.md)。 142 143> **说明：** 144> 145> 当配置libraryname参数时，[点击事件](ts-universal-events-click.md)、[触摸事件](ts-universal-events-touch.md)、[挂载卸载事件](ts-universal-events-show-hide.md)、[按键事件](ts-universal-events-key.md)、[焦点事件](ts-universal-focus-event.md)、[鼠标事件](ts-universal-mouse-key.md)仅响应C-API侧事件接口。 146 147**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 148 149仅type为SURFACE或TEXTURE时以下事件有效： 150 151### onLoad 152 153onLoad(callback: (event?: object) => void) 154 155插件加载完成时回调事件。 156 157**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 158 159**系统能力：** SystemCapability.ArkUI.ArkUI.Full 160 161**参数:** 162 163| 参数名 | 类型 | 必填 | 说明 | 164| ----- | ------ | ---- | ---------------------------------------- | 165| event | object | 否 | 获取XComponent实例对象的context，context上挂载的方法由开发者在c++层定义。 | 166 167### onDestroy 168 169onDestroy(event: () => void) 170 171插件卸载完成时回调事件。 172 173**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 174 175**系统能力：** SystemCapability.ArkUI.ArkUI.Full 176 177## XComponentController 178 179XComponent组件的控制器，可以将此对象绑定至XComponent组件，然后通过控制器来调用组件方法。 180 181**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 182 183**系统能力：** SystemCapability.ArkUI.ArkUI.Full 184 185### 创建对象 186 187``` 188xcomponentController: XComponentController = new XComponentController() 189``` 190 191**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 192 193### constructor 194 195constructor() 196 197XComponentController的构造函数。 198 199**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 200 201**系统能力：** SystemCapability.ArkUI.ArkUI.Full 202 203### getXComponentSurfaceId<sup>9+</sup> 204 205getXComponentSurfaceId(): string 206 207获取XComponent对应Surface的ID，供@ohos接口使用，使用方式可参考[相机管理](../../apis-camera-kit/js-apis-camera.md)，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 208 209**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 210 211**系统能力：** SystemCapability.ArkUI.ArkUI.Full 212 213**返回值:** 214 215| 类型 | 描述 | 216| ------ | ----------------------- | 217| string | XComponent持有Surface的ID。 | 218 219 220### setXComponentSurfaceSize<sup>(deprecated)</sup> 221 222setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}): void 223 224设置XComponent持有Surface的宽度和高度，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 225 226该接口从API Version 12开始废弃，建议使用[setXComponentSurfaceRect](#setxcomponentsurfacerect12)替代。 227 228**系统能力：** SystemCapability.ArkUI.ArkUI.Full 229 230**参数:** 231 232| 参数名 | 类型 | 必填 | 说明 | 233| ------------- | ------ | ---- | ----------------------- | 234| surfaceWidth | number | 是 | XComponent持有Surface的宽度。 | 235| surfaceHeight | number | 是 | XComponent持有Surface的高度。 | 236 237 238### getXComponentContext 239 240getXComponentContext(): Object 241 242获取XComponent实例对象的context，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 243 244**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 245 246**系统能力：** SystemCapability.ArkUI.ArkUI.Full 247 248**返回值:** 249 250| 类型 | 描述 | 251| ------ | ------------------------------------------------------------ | 252| Object | 获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义，context内容与onLoad回调中的第一个参数一致。 | 253 254### setXComponentSurfaceRect<sup>12+</sup> 255 256setXComponentSurfaceRect(rect: SurfaceRect): void 257 258设置XComponent持有Surface的显示区域，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 259 260**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 261 262**系统能力：** SystemCapability.ArkUI.ArkUI.Full 263 264**参数:** 265 266| 参数名 | 类型 | 必填 | 说明 | 267| ------ | ------------------------------------ | ---- | --------------------------------- | 268| rect | [SurfaceRect](#surfacerect12对象说明) | 是 | XComponent持有Surface的显示区域。 | 269 270> **说明：** 271> 272> rect参数中的offsetX/offsetY不设置时，Surface显示区域相对于XComponent左上角x/y轴的偏移效果默认按照居中显示。 273> 274> rect参数中的surfaceWidth和surfaceHeight存在0或负数时，调用该接口设置显示区域不生效。 275> 276> 该方法优先级高于[border](ts-universal-attributes-border.md#border)、[padding](ts-universal-attributes-size.md#padding)等可以改变内容偏移和大小的属性。 277 278### getXComponentSurfaceRect<sup>12+</sup> 279 280getXComponentSurfaceRect(): SurfaceRect 281 282获取XComponent持有Surface的显示区域，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 283 284**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 285 286**系统能力：** SystemCapability.ArkUI.ArkUI.Full 287 288**返回值:** 289 290| 类型 | 描述 | 291| ------------------------------------ | ------------------------------------- | 292| [SurfaceRect](#surfacerect12对象说明) | 获取XComponent持有Surface的显示区域。 | 293 294### onSurfaceCreated<sup>12+</sup> 295 296onSurfaceCreated(surfaceId: string): void 297 298当XComponent持有的Surface创建后进行该回调，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 299 300**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 301 302**系统能力：** SystemCapability.ArkUI.ArkUI.Full 303 304**参数:** 305 306| 参数名 | 类型 | 必填 | 说明 | 307| --------- | -------- | ---- | ------------------------------------------------- | 308| surfaceId | string | 是 | 回调该方法的时候，绑定XComponent持有Surface的ID。 | 309 310> **说明：** 311> 312> 仅当XComponent组件未设置libraryname参数时，会进行该回调。 313 314### onSurfaceChanged<sup>12+</sup> 315 316onSurfaceChanged(surfaceId: string, rect: SurfaceRect): void 317 318当XComponent持有的Surface大小改变后（包括首次创建时的大小改变）进行该回调，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 319 320**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 321 322**系统能力：** SystemCapability.ArkUI.ArkUI.Full 323 324**参数:** 325 326| 参数名 | 类型 | 必填 | 说明 | 327| --------- | ------------------------------------- | ---- | ------------------------------------------------------- | 328| surfaceId | string | 是 | 回调该方法的时候，绑定XComponent持有Surface的ID。 | 329| rect | [SurfaceRect](#surfacerect12对象说明) | 是 | 回调该方法的时候，绑定XComponent持有Surface的显示区域。 | 330 331> **说明：** 332> 333> 仅当XComponent组件未设置libraryname参数时，会进行该回调。 334 335### onSurfaceDestroyed<sup>12+</sup> 336 337onSurfaceDestroyed(surfaceId: string): void 338 339当XComponent持有的Surface销毁后进行该回调，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 340 341**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 342 343**系统能力：** SystemCapability.ArkUI.ArkUI.Full 344 345**参数:** 346 347| 参数名 | 类型 | 必填 | 说明 | 348| --------- | -------- | ---- | ------------------------------------------------- | 349| surfaceId | string | 是 | 回调该方法的时候，绑定XComponent持有Surface的ID。 | 350 351> **说明：** 352> 353> 仅当XComponent组件未设置libraryname参数时，会进行该回调。 354 355### startImageAnalyzer<sup>12+</sup> 356 357startImageAnalyzer(config: ImageAnalyzerConfig): Promise\<void> 358 359配置AI分析并启动AI分析功能，使用前需先[启用图像AI分析能力](#enableanalyzer12)。<br>该方法调用时，将截取调用时刻的画面帧进行分析，使用时需注意启动分析的时机，避免出现画面和分析内容不一致的情况。<br>若该方法尚未执行完毕，此时重复调用，则会触发错误回调。 360 361> **说明：** 362> 363> 分析类型不支持动态修改。 364> 该特性依赖设备能力，不支持该能力的情况下，将返回错误码。 365 366**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 367 368**系统能力：** SystemCapability.ArkUI.ArkUI.Full 369 370**参数：** 371 372| 参数名 | 类型 | 必填 | 说明 | 373| ------ | --------- | ---- | ---------------------------------------------------------------------- | 374| config | [ImageAnalyzerConfig](ts-image-common.md#imageanalyzerconfig) | 是 | 执行AI分析所需要的入参，用于配置AI分析功能。 | 375 376**返回值：** 377 378| 类型 | 说明 | 379| ----------------- | ------------------------------------ | 380| Promise\<void> | Promise对象，用于获取AI分析是否成功执行。 | 381 382**错误码：** 383 384以下错误码的详细介绍请参见[AI分析类库错误码](../errorcode-image-analyzer.md)。 385 386| 错误码ID | 错误信息 | 387| -------- | -------------------------------------------- | 388| 110001 | Image analysis feature is unsupported. | 389| 110002 | Image analysis is currently being executed. | 390| 110003 | Image analysis is stopped. | 391 392### stopImageAnalyzer<sup>12+</sup> 393 394stopImageAnalyzer(): void 395 396停止AI分析功能，AI分析展示的内容将被销毁。 397 398> **说明：** 399> 400> 在startImageAnalyzer方法未返回结果时调用本方法，会触发其错误回调。 401> 该特性依赖设备能力。 402 403**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 404 405**系统能力：** SystemCapability.ArkUI.ArkUI.Full 406 407### setXComponentSurfaceRotation<sup>12+</sup> 408 409setXComponentSurfaceRotation(rotationOptions: SurfaceRotationOptions): void 410 411设置XComponent持有Surface在屏幕旋转时是否锁定方向，仅XComponent类型为SURFACE("surface")时有效。 412 413**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 414 415**系统能力：** SystemCapability.ArkUI.ArkUI.Full 416 417**参数:** 418 419| 参数名 | 类型 | 必填 | 说明 | 420| ------ | ------------------------------------ | ---- | --------------------------------- | 421| rotationOptions | [SurfaceRotationOptions](#surfacerotationoptions12对象说明) | 是 | 设置XComponent持有Surface在屏幕旋转时是否锁定方向。 | 422 423> **说明：** 424> 425> rotationOptions未配置时，默认XComponent持有Surface在屏幕旋转时不锁定方向，跟随屏幕进行旋转。 426> 427> 仅在屏幕旋转过程中生效，旋转完成后不再锁定Surface。 428> 429> 仅在屏幕旋转90°，即发生横竖屏切换时生效。 430> 431> 锁定旋转后的Buffer宽高需要保持不变，否则会有拉伸问题。 432 433### getXComponentSurfaceRotation<sup>12+</sup> 434 435getXComponentSurfaceRotation(): Required\<SurfaceRotationOptions> 436 437获取XComponent持有Surface在屏幕旋转时是否锁定方向的设置，仅XComponent类型为SURFACE("surface")时有效。 438 439**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 440 441**系统能力：** SystemCapability.ArkUI.ArkUI.Full 442 443**返回值:** 444 445| 类型 | 描述 | 446| ------------------------------------ | ------------------------------------- | 447| [SurfaceRotationOptions](#surfacerotationoptions12对象说明) | 获取XComponent持有Surface在屏幕旋转时是否锁定方向的设置。 | 448 449## SurfaceRotationOptions<sup>12+</sup>对象说明 450 451用于描述XComponent持有Surface在屏幕旋转时是否锁定方向的设置。 452 453**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 454 455**系统能力：** SystemCapability.ArkUI.ArkUI.Full 456 457| 名称 | 类型 | 必填 | 说明 | 458| ------------- | ------ | ---- | ------------------------------------------------------------ | 459| lock | boolean | 否 | Surface在屏幕旋转时是否锁定方向，未设置时默认取值为false，即不锁定方向。 | 460 461## SurfaceRect<sup>12+</sup>对象说明 462 463用于描述XComponent持有Surface的显示区域。 464 465**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 466 467**系统能力：** SystemCapability.ArkUI.ArkUI.Full 468 469| 名称 | 类型 | 必填 | 说明 | 470| ------------- | ------ | ---- | ------------------------------------------------------------ | 471| offsetX | number | 否 | Surface显示区域相对于XComponent组件左上角的x轴坐标，单位：px。 | 472| offsetY | number | 否 | Surface显示区域相对于XComponent组件左上角的y轴坐标，单位：px。 | 473| surfaceWidth | number | 是 | Surface显示区域的宽度，单位：px。 | 474| surfaceHeight | number | 是 | Surface显示区域的高度，单位：px。 | 475 476> **说明：** 477> 478> surfaceWidth和surfaceHeight属性在未调用[setXComponentSurfaceRect](ts-basic-components-xcomponent.md#setxcomponentsurfacerect12)也未设置[border](ts-universal-attributes-border.md#border)和[padding](ts-universal-attributes-size.md#padding)等属性时，其取值大小为XComponent组件的大小。 479> 480> surfaceWidth和surfaceHeight属性的取值都不可超过8192px，否则会导致渲染异常。 481 482## 示例 483 484示例效果请以真机运行为准，当前DevEco Studio预览器不支持。 485 486 487### 示例1（图像AI分析功能） 488 489使用enableAnalyzer属性开启图像AI分析功能。可通过XComponentController控制开始、停止图形AI分析。 490 491<!--Del--> 492> **说明：** 493> 494> 本示例画图逻辑具体实现（和nativeRender相关的函数实现）可以参考[ArkTSXComponent示例](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Native/ArkTSXComponent) 495<!--DelEnd--> 496 497```ts 498// xxx.ets 499import { BusinessError } from '@kit.BasicServicesKit'; 500import nativeRender from 'libnativerender.so'; 501 502class CustomXComponentController extends XComponentController { 503 onSurfaceCreated(surfaceId: string): void { 504 console.log(`onSurfaceCreated surfaceId: ${surfaceId}`); 505 nativeRender.SetSurfaceId(BigInt(surfaceId)); 506 } 507 508 onSurfaceChanged(surfaceId: string, rect: SurfaceRect): void { 509 console.log(`onSurfaceChanged surfaceId: ${surfaceId}, rect: ${JSON.stringify(rect)}}`); 510 nativeRender.ChangeSurface(BigInt(surfaceId), rect.surfaceWidth, rect.surfaceHeight); 511 } 512 513 onSurfaceDestroyed(surfaceId: string): void { 514 console.log(`onSurfaceDestroyed surfaceId: ${surfaceId}`); 515 nativeRender.DestroySurface(BigInt(surfaceId)); 516 } 517} 518 519@Entry 520@Component 521struct XComponentExample { 522 xComponentController: XComponentController = new CustomXComponentController(); 523 private config: ImageAnalyzerConfig = { 524 types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT] 525 }; 526 private aiController: ImageAnalyzerController = new ImageAnalyzerController(); 527 private options: ImageAIOptions = { 528 types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT], 529 aiController: this.aiController 530 }; 531 @State xcWidth: string = "320px"; 532 @State xcHeight: string = "480px"; 533 @State currentStatus: string = "index"; 534 535 build() { 536 Column({ space: 5 }) { 537 Button("change size") 538 .onClick(() => { 539 this.xcWidth = "640px"; 540 this.xcHeight = "720px"; 541 }) 542 Button('start AI analyze') 543 .onClick(() => { 544 this.xComponentController.startImageAnalyzer(this.config) 545 .then(() => { 546 console.log("analysis complete"); 547 }) 548 .catch((error: BusinessError) => { 549 console.log("error code: " + error.code); 550 }) 551 }) 552 Button('stop AI analyze') 553 .onClick(() => { 554 this.xComponentController.stopImageAnalyzer(); 555 }) 556 Button('get analyzer types') 557 .onClick(() => { 558 this.aiController.getImageAnalyzerSupportTypes(); 559 }) 560 Button('Draw Star') 561 .fontSize('16fp') 562 .fontWeight(500) 563 .margin({ bottom: 24 }) 564 .onClick(() => { 565 let surfaceId = this.xComponentController.getXComponentSurfaceId(); 566 this.xComponentController.getXComponentSurfaceRect(); 567 nativeRender.DrawPattern(BigInt(surfaceId)); 568 let hasDraw: boolean = false; 569 if (nativeRender.GetXComponentStatus(BigInt(surfaceId))) { 570 hasDraw = nativeRender.GetXComponentStatus(BigInt(surfaceId)).hasDraw; 571 } 572 if (hasDraw) { 573 this.currentStatus = "draw star"; 574 } 575 }) 576 XComponent({ 577 type: XComponentType.SURFACE, 578 controller: this.xComponentController, 579 imageAIOptions: this.options 580 }) 581 .width(this.xcWidth) 582 .height(this.xcHeight) 583 .enableAnalyzer(true) 584 Text(this.currentStatus) 585 .fontSize('24fp') 586 .fontWeight(500) 587 } 588 .width("100%") 589 } 590} 591``` 592<!--RP1--><!--RP1End--> 593 594### 示例2（在surface旋转过程中锁定） 595 596通过setXComponentSurfaceRotation设置surface在屏幕旋转过程中锁定方向，不跟随屏幕进行旋转。 597 598```ts 599// xxx.ets 600@Entry 601@Component 602struct Index { 603 @State isLock: boolean = true; 604 @State xc_width: number = 500; 605 @State xc_height: number = 700; 606 myXComponentController: XComponentController = new XComponentController(); 607 608 build() { 609 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) { 610 XComponent({ 611 id: 'xComponentId', 612 type: XComponentType.SURFACE, 613 libraryname: 'nativerender', 614 controller: this.myXComponentController 615 }) 616 .width(this.xc_width) 617 .height(this.xc_height) 618 .onLoad(() => { 619 let surfaceRotation: SurfaceRotationOptions = { lock: this.isLock }; 620 this.myXComponentController.setXComponentSurfaceRotation(surfaceRotation); 621 console.log("Surface getXComponentSurfaceRotation lock = " + 622 this.myXComponentController.getXComponentSurfaceRotation().lock); 623 }) 624 } 625 .width('100%') 626 .height('100%') 627 } 628} 629``` 630 631