• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# XComponent
2
3  > **说明：**
4
5  > 该组件从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
6
7  可用于EGL/OpenGLES和媒体数据写入，并显示在XComponent组件。
8
9## 权限列表
10
11  无
12
13## 子组件
14
15  不支持。
16
17## 接口
18
19  XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\)
20
21**参数:**
22
23| 参数名       | 参数类型     | 必填   | 描述    |
24| --------- | ------ | ---- | ----- |
25| id  | string | 是    | 组件的唯一标识，支持最大的字符串长度128。 |
26| type      | string | 是    |  用于指定XComponent组件类型，可选值为：<br/>-surface：组件内容单独送显，直接合成到屏幕。<br/>-component：组件内容与其他组件合成后统一送显。 |
27| libraryname | string | 否    | 应用Native层编译输出动态库名称。 |
28| controller   | [XComponentcontroller](#xcomponentcontroller) | 否    | 给组件绑定一个控制器，通过控制器调用组件方法。 |
29
30## 事件
31
32### onLoad
33
34onLoad(callback: (event?: object) => void )
35
36插件加载完成时回调事件。
37
38**参数:**
39
40| 参数名           | 参数类型   | 必填  | 描述                      |
41| ------------- | ------ | ---- | ----------------------- |
42| event  | object |   否  | 获取XComponent实例对象的context，context上挂载的方法由开发者在c++层定义。 |
43
44### onDestroy
45
46onDestroy(event: () => void )
47
48插件卸载完成时回调事件。
49
50## XComponentController
51
52xcomponent 组件的控制器，可以将此对象绑定至XComponent组件，然后通过控制器来调用组件方法。
53
54### 创建对象
55
56```
57xcomponentController: XComponentController = new XComponentController()
58```
59
60### getXComponentSurfaceId
61
62getXComponentSurfaceId()
63
64获取XComponent对应Surface的ID，供@ohos接口使用，比如camera相关接口。
65
66**系统接口：** 此接口为系统接口。
67
68**返回值:**
69
70| 类型     | 描述                      |
71| ------ | ----------------------- |
72| string | XComponent持有Surface的ID。 |
73
74
75### setXComponentSurfaceSize
76
77setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number})
78
79设置XComponent持有Surface的宽度和高度。
80
81**系统接口：** 此接口为系统接口。
82
83**参数:**
84
85| 参数名           | 参数类型   | 必填  | 描述                      |
86| ------------- | ------ | ---- | ----------------------- |
87| surfaceWidth  | number | 是    | XComponent持有Surface的宽度。 |
88| surfaceHeight | number | 是    | XComponent持有Surface的高度。 |
89
90
91### getXComponentContext
92
93getXComponentContext()
94
95获取XComponent实例对象的context。
96
97**返回值:**
98
99| 类型     | 描述                                       |
100| ------ | ---------------------------------------- |
101| Object | 获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义。 |
102
103
104## 示例
105
106提供surface类型XComponent，支持相机预览等能力。
107示例效果请以真机运行为准，当前IDE预览器不支持。
108
109```ts
110// xxx.ets
111import camera from '@ohos.multimedia.camera';
112@Entry
113@Component
114struct PreviewArea {
115  private surfaceId : string =''
116  xcomponentController: XComponentController = new XComponentController()
117  build() {
118    Row() {
119      XComponent({
120        id: 'xcomponent',
121        type: 'surface',
122        controller: this.xcomponentController
123      })
124        .onLoad(() => {
125          this.xcomponentController.setXComponentSurfaceSize({surfaceWidth:1920,surfaceHeight:1080});
126          this.surfaceId = this.xcomponentController.getXComponentSurfaceId();
127          camera.createPreviewOutput(this.surfaceId).then((previewOutput) => {
128            console.log('Promise returned with the PreviewOutput instance');
129          })
130        })
131        .width('640px')
132        .height('480px')
133    }
134    .backgroundColor(Color.Black)
135    .position({x: 0, y: 48})
136  }
137}
138```
139