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-universal-events-click.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 14开始，该接口支持在原子化服务中使用。 158 159**系统能力：** SystemCapability.ArkUI.ArkUI.Full 160 161**参数:** 162 163| 参数名 | 类型 | 必填 | 说明 | 164| ----- | ------ | ---- | ---------------------------------------- | 165| event | object | 否 | 获取XComponent实例对象的context，context上挂载的方法由开发者在c++层定义。 | 166 167### onDestroy 168 169onDestroy(event: VoidCallback ) 170 171插件卸载完成时回调事件。 172 173**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 174 175**系统能力：** SystemCapability.ArkUI.ArkUI.Full 176 177**参数:** 178 179| 参数名 | 类型 | 必填 | 说明 | 180| ----- | ------ | ---- | ---------------------------------------- | 181| event | [VoidCallback](ts-types.md#voidcallback12) | 是 | XComponent销毁后回调事件。 | 182 183## XComponentController 184 185XComponent组件的控制器，可以将此对象绑定至XComponent组件，然后通过控制器来调用组件方法。 186 187**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 188 189**系统能力：** SystemCapability.ArkUI.ArkUI.Full 190 191### 创建对象 192 193``` 194xcomponentController: XComponentController = new XComponentController() 195``` 196 197**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 198 199### constructor 200 201constructor() 202 203XComponentController的构造函数。 204 205**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 206 207**系统能力：** SystemCapability.ArkUI.ArkUI.Full 208 209### getXComponentSurfaceId<sup>9+</sup> 210 211getXComponentSurfaceId(): string 212 213获取XComponent对应Surface的ID，供@ohos接口使用，使用方式可参考[相机管理](../../apis-camera-kit/js-apis-camera.md)，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 214 215**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 216 217**系统能力：** SystemCapability.ArkUI.ArkUI.Full 218 219**返回值:** 220 221| 类型 | 描述 | 222| ------ | ----------------------- | 223| string | XComponent持有Surface的ID。 | 224 225 226### setXComponentSurfaceSize<sup>(deprecated)</sup> 227 228setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}): void 229 230设置XComponent持有Surface的宽度和高度，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 231 232该接口从API Version 12开始废弃，建议使用[setXComponentSurfaceRect](#setxcomponentsurfacerect12)替代。 233 234**系统能力：** SystemCapability.ArkUI.ArkUI.Full 235 236**参数:** 237 238| 参数名 | 类型 | 必填 | 说明 | 239| ------------- | ------ | ---- | ----------------------- | 240| surfaceWidth | number | 是 | XComponent持有Surface的宽度。 | 241| surfaceHeight | number | 是 | XComponent持有Surface的高度。 | 242 243 244### getXComponentContext 245 246getXComponentContext(): Object 247 248获取XComponent实例对象的context，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 249 250**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 251 252**系统能力：** SystemCapability.ArkUI.ArkUI.Full 253 254**返回值:** 255 256| 类型 | 描述 | 257| ------ | ------------------------------------------------------------ | 258| Object | 获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义，context内容与onLoad回调中的第一个参数一致。 | 259 260### setXComponentSurfaceRect<sup>12+</sup> 261 262setXComponentSurfaceRect(rect: SurfaceRect): void 263 264设置XComponent持有Surface的显示区域，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 265 266**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 267 268**系统能力：** SystemCapability.ArkUI.ArkUI.Full 269 270**参数:** 271 272| 参数名 | 类型 | 必填 | 说明 | 273| ------ | ------------------------------------ | ---- | --------------------------------- | 274| rect | [SurfaceRect](#surfacerect12对象说明) | 是 | XComponent持有Surface的显示区域。 | 275 276> **说明：** 277> 278> rect参数中的offsetX/offsetY不设置时，Surface显示区域相对于XComponent左上角x/y轴的偏移效果默认按照居中显示。 279> 280> rect参数中的surfaceWidth和surfaceHeight存在0或负数时，调用该接口设置显示区域不生效。 281> 282> 该方法优先级高于[border](ts-universal-attributes-border.md#border)、[padding](ts-universal-attributes-size.md#padding)等可以改变内容偏移和大小的属性。 283 284### getXComponentSurfaceRect<sup>12+</sup> 285 286getXComponentSurfaceRect(): SurfaceRect 287 288获取XComponent持有Surface的显示区域，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 289 290**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 291 292**系统能力：** SystemCapability.ArkUI.ArkUI.Full 293 294**返回值:** 295 296| 类型 | 描述 | 297| ------------------------------------ | ------------------------------------- | 298| [SurfaceRect](#surfacerect12对象说明) | 获取XComponent持有Surface的显示区域。 | 299 300### onSurfaceCreated<sup>12+</sup> 301 302onSurfaceCreated(surfaceId: string): void 303 304当XComponent持有的Surface创建后进行该回调，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 305 306**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 307 308**系统能力：** SystemCapability.ArkUI.ArkUI.Full 309 310**参数:** 311 312| 参数名 | 类型 | 必填 | 说明 | 313| --------- | -------- | ---- | ------------------------------------------------- | 314| surfaceId | string | 是 | 回调该方法的时候，绑定XComponent持有Surface的ID。 | 315 316> **说明：** 317> 318> 仅当XComponent组件未设置libraryname参数时，会进行该回调。 319 320### onSurfaceChanged<sup>12+</sup> 321 322onSurfaceChanged(surfaceId: string, rect: SurfaceRect): void 323 324当XComponent持有的Surface大小改变后（包括首次创建时的大小改变）进行该回调，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 325 326**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 327 328**系统能力：** SystemCapability.ArkUI.ArkUI.Full 329 330**参数:** 331 332| 参数名 | 类型 | 必填 | 说明 | 333| --------- | ------------------------------------- | ---- | ------------------------------------------------------- | 334| surfaceId | string | 是 | 回调该方法的时候，绑定XComponent持有Surface的ID。 | 335| rect | [SurfaceRect](#surfacerect12对象说明) | 是 | 回调该方法的时候，绑定XComponent持有Surface的显示区域。 | 336 337> **说明：** 338> 339> 仅当XComponent组件未设置libraryname参数时，会进行该回调。 340 341### onSurfaceDestroyed<sup>12+</sup> 342 343onSurfaceDestroyed(surfaceId: string): void 344 345当XComponent持有的Surface销毁后进行该回调，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 346 347**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 348 349**系统能力：** SystemCapability.ArkUI.ArkUI.Full 350 351**参数:** 352 353| 参数名 | 类型 | 必填 | 说明 | 354| --------- | -------- | ---- | ------------------------------------------------- | 355| surfaceId | string | 是 | 回调该方法的时候，绑定XComponent持有Surface的ID。 | 356 357> **说明：** 358> 359> 仅当XComponent组件未设置libraryname参数时，会进行该回调。 360 361### startImageAnalyzer<sup>12+</sup> 362 363startImageAnalyzer(config: ImageAnalyzerConfig): Promise\<void> 364 365配置AI分析并启动AI分析功能，使用前需先[使能](#enableanalyzer12)图像AI分析能力。<br>该方法调用时，将截取调用时刻的画面帧进行分析，使用时需注意启动分析的时机，避免出现画面和分析内容不一致的情况。<br>若该方法尚未执行完毕，此时重复调用，则会触发错误回调。 366 367> **说明：** 368> 369> 分析类型不支持动态修改。 370> 该特性依赖设备能力，不支持该能力的情况下，将返回错误码。 371 372**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 373 374**系统能力：** SystemCapability.ArkUI.ArkUI.Full 375 376**参数：** 377 378| 参数名 | 类型 | 必填 | 说明 | 379| ------ | --------- | ---- | ---------------------------------------------------------------------- | 380| config | [ImageAnalyzerConfig](ts-image-common.md#imageanalyzerconfig) | 是 | 执行AI分析所需要的入参，用于配置AI分析功能。 | 381 382**返回值：** 383 384| 类型 | 说明 | 385| ----------------- | ------------------------------------ | 386| Promise\<void> | Promise对象，用于获取AI分析是否成功执行。 | 387 388**错误码：** 389 390以下错误码的详细介绍请参见[AI分析类库错误码](../errorcode-image-analyzer.md)。 391 392| 错误码ID | 错误信息 | 393| -------- | -------------------------------------------- | 394| 110001 | Image analysis feature is unsupported. | 395| 110002 | Image analysis is currently being executed. | 396| 110003 | Image analysis is stopped. | 397 398### stopImageAnalyzer<sup>12+</sup> 399 400stopImageAnalyzer(): void 401 402停止AI分析功能，AI分析展示的内容将被销毁。 403 404> **说明：** 405> 406> 在startImageAnalyzer方法未返回结果时调用本方法，会触发其错误回调。 407> 该特性依赖设备能力。 408 409**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 410 411**系统能力：** SystemCapability.ArkUI.ArkUI.Full 412 413### setXComponentSurfaceRotation<sup>12+</sup> 414 415setXComponentSurfaceRotation(rotationOptions: SurfaceRotationOptions): void 416 417设置XComponent持有Surface在屏幕旋转时是否锁定方向，仅XComponent类型为SURFACE("surface")时有效。 418 419**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 420 421**系统能力：** SystemCapability.ArkUI.ArkUI.Full 422 423**参数:** 424 425| 参数名 | 类型 | 必填 | 说明 | 426| ------ | ------------------------------------ | ---- | --------------------------------- | 427| rotationOptions | [SurfaceRotationOptions](#surfacerotationoptions12对象说明) | 是 | 设置XComponent持有Surface在屏幕旋转时是否锁定方向。 | 428 429> **说明：** 430> 431> rotationOptions未配置时，默认XComponent持有Surface在屏幕旋转时不锁定方向，跟随屏幕进行旋转。 432> 433> 仅在屏幕旋转过程中生效，旋转完成后不再锁定Surface。 434> 435> 仅在屏幕旋转90°，即发生横竖屏切换时生效。 436> 437> 锁定旋转后的Buffer宽高需要保持不变，否则会有拉伸问题。 438 439### getXComponentSurfaceRotation<sup>12+</sup> 440 441getXComponentSurfaceRotation(): Required\<SurfaceRotationOptions> 442 443获取XComponent持有Surface在屏幕旋转时是否锁定方向的设置，仅XComponent类型为SURFACE("surface")时有效。 444 445**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 446 447**系统能力：** SystemCapability.ArkUI.ArkUI.Full 448 449**返回值:** 450 451| 类型 | 描述 | 452| ------------------------------------ | ------------------------------------- | 453| [SurfaceRotationOptions](#surfacerotationoptions12对象说明) | 获取XComponent持有Surface在屏幕旋转时是否锁定方向的设置。 | 454 455## SurfaceRotationOptions<sup>12+</sup>对象说明 456 457用于描述XComponent持有Surface在屏幕旋转时是否锁定方向的设置。 458 459**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 460 461**系统能力：** SystemCapability.ArkUI.ArkUI.Full 462 463| 名称 | 类型 | 必填 | 说明 | 464| ------------- | ------ | ---- | ------------------------------------------------------------ | 465| lock | boolean | 否 | Surface在屏幕旋转时是否锁定方向，未设置时默认取值为false，即不锁定方向。 | 466 467## SurfaceRect<sup>12+</sup>对象说明 468 469用于描述XComponent持有Surface的显示区域。 470 471**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 472 473**系统能力：** SystemCapability.ArkUI.ArkUI.Full 474 475| 名称 | 类型 | 必填 | 说明 | 476| ------------- | ------ | ---- | ------------------------------------------------------------ | 477| offsetX | number | 否 | Surface显示区域相对于XComponent组件左上角的x轴坐标，单位：px。 | 478| offsetY | number | 否 | Surface显示区域相对于XComponent组件左上角的y轴坐标，单位：px。 | 479| surfaceWidth | number | 是 | Surface显示区域的宽度，单位：px。 | 480| surfaceHeight | number | 是 | Surface显示区域的高度，单位：px。 | 481 482> **说明：** 483> 484> surfaceWidth和surfaceHeight属性在未调用[setXComponentSurfaceRect](ts-basic-components-xcomponent.md#setxcomponentsurfacerect12)也未设置[border](ts-universal-attributes-border.md#border)和[padding](ts-universal-attributes-size.md#padding)等属性时，其取值大小为XComponent组件的大小。 485> 486> surfaceWidth和surfaceHeight属性的取值都不可超过8192px，否则会导致渲染异常。 487 488## 示例 489 490示例效果请以真机运行为准，当前DevEco Studio预览器不支持。 491 492 493### 示例1（图像AI分析功能） 494 495使用enableAnalyzer属性开启图像AI分析功能。可通过XComponentController控制开始、停止图形AI分析。 496 497<!--Del--> 498> **说明：** 499> 500> 本示例画图逻辑具体实现（和nativeRender相关的函数实现）可以参考[ArkTSXComponent示例](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Native/ArkTSXComponent) 501<!--DelEnd--> 502 503```ts 504// xxx.ets 505import { BusinessError } from '@kit.BasicServicesKit'; 506import nativeRender from 'libnativerender.so'; 507 508class CustomXComponentController extends XComponentController { 509 onSurfaceCreated(surfaceId: string): void { 510 console.log(`onSurfaceCreated surfaceId: ${surfaceId}`); 511 nativeRender.SetSurfaceId(BigInt(surfaceId)); 512 } 513 514 onSurfaceChanged(surfaceId: string, rect: SurfaceRect): void { 515 console.log(`onSurfaceChanged surfaceId: ${surfaceId}, rect: ${JSON.stringify(rect)}}`); 516 nativeRender.ChangeSurface(BigInt(surfaceId), rect.surfaceWidth, rect.surfaceHeight); 517 } 518 519 onSurfaceDestroyed(surfaceId: string): void { 520 console.log(`onSurfaceDestroyed surfaceId: ${surfaceId}`); 521 nativeRender.DestroySurface(BigInt(surfaceId)); 522 } 523} 524 525@Entry 526@Component 527struct XComponentExample { 528 xComponentController: XComponentController = new CustomXComponentController(); 529 private config: ImageAnalyzerConfig = { 530 types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT] 531 }; 532 private aiController: ImageAnalyzerController = new ImageAnalyzerController(); 533 private options: ImageAIOptions = { 534 types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT], 535 aiController: this.aiController 536 }; 537 @State xcWidth: string = "320px"; 538 @State xcHeight: string = "480px"; 539 @State currentStatus: string = "index"; 540 541 build() { 542 Column({ space: 5 }) { 543 Button("change size") 544 .onClick(() => { 545 this.xcWidth = "640px"; 546 this.xcHeight = "720px"; 547 }) 548 Button('start AI analyze') 549 .onClick(() => { 550 this.xComponentController.startImageAnalyzer(this.config) 551 .then(() => { 552 console.log("analysis complete"); 553 }) 554 .catch((error: BusinessError) => { 555 console.log("error code: " + error.code); 556 }) 557 }) 558 Button('stop AI analyze') 559 .onClick(() => { 560 this.xComponentController.stopImageAnalyzer(); 561 }) 562 Button('get analyzer types') 563 .onClick(() => { 564 this.aiController.getImageAnalyzerSupportTypes(); 565 }) 566 Button('Draw Star') 567 .fontSize('16fp') 568 .fontWeight(500) 569 .margin({ bottom: 24 }) 570 .onClick(() => { 571 let surfaceId = this.xComponentController.getXComponentSurfaceId(); 572 this.xComponentController.getXComponentSurfaceRect(); 573 nativeRender.DrawPattern(BigInt(surfaceId)); 574 let hasDraw: boolean = false; 575 if (nativeRender.GetXComponentStatus(BigInt(surfaceId))) { 576 hasDraw = nativeRender.GetXComponentStatus(BigInt(surfaceId)).hasDraw; 577 } 578 if (hasDraw) { 579 this.currentStatus = "draw star"; 580 } 581 }) 582 XComponent({ 583 type: XComponentType.SURFACE, 584 controller: this.xComponentController, 585 imageAIOptions: this.options 586 }) 587 .width(this.xcWidth) 588 .height(this.xcHeight) 589 .enableAnalyzer(true) 590 Text(this.currentStatus) 591 .fontSize('24fp') 592 .fontWeight(500) 593 } 594 .width("100%") 595 } 596} 597``` 598<!--RP1--><!--RP1End--> 599 600### 示例2（在surface旋转过程中锁定） 601 602通过setXComponentSurfaceRotation设置surface在屏幕旋转过程中锁定方向，不跟随屏幕进行旋转。 603 604```ts 605// xxx.ets 606@Entry 607@Component 608struct Index{ 609 @State isLock: boolean = true; 610 @State xc_width: number = 500; 611 @State xc_height: number = 700; 612 myXComponentController: XComponentController = new XComponentController(); 613 614 build() { 615 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) { 616 XComponent({ 617 id: 'xComponentId', 618 type: XComponentType.SURFACE, 619 libraryname: 'nativerender', 620 controller: this.myXComponentController 621 }) 622 .width(this.xc_width) 623 .height(this.xc_height) 624 .onLoad(() => { 625 let surfaceRotation: SurfaceRotationOptions = { lock: this.isLock }; 626 this.myXComponentController.setXComponentSurfaceRotation(surfaceRotation); 627 console.log("Surface getXComponentSurfaceRotation lock = " + 628 this.myXComponentController.getXComponentSurfaceRotation().lock); 629 }) 630 } 631 .width('100%') 632 .height('100%') 633 } 634} 635``` 636 637