• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 鼠标光标开发指导
2
3## 场景介绍
4
5鼠标光标控制提供鼠标光标显示和隐藏、光标样式查询和设置的能力。使用场景例如：用户在全屏观看视频时，开发者可以控制鼠标光标的显示隐藏；当用户执行取色时，开发者可以将鼠标光标样式切换为取色器样式。
6
7## 导入模块
8
9```js
10import { pointer } from '@kit.InputKit';
11```
12
13## 接口说明
14
15鼠标光标控制常用接口如下表所示，接口详细介绍请参见[ohos.multimodalInput.pointer文档](../../reference/apis-input-kit/js-apis-pointer.md)。
16
17| 接口名称                                                       | 描述                                                         |
18| ------------------------------------------ | ------------------------------------------------------- |
19| isPointerVisible(callback: AsyncCallback\<boolean>): void | 获取鼠标指针显示或隐藏状态。                                 |
20| setPointerVisible(visible: boolean, callback: AsyncCallback\<void>): void | 设置鼠标指针显示或隐藏状态，该接口会影响全局鼠标光标的显示状态。 |
21| setPointerStyle(windowId: number, pointerStyle: PointerStyle, callback: AsyncCallback\<void>): void | 设置鼠标光标样式，该接口会影响指定窗口鼠标光标样式。         |
22| getPointerStyle(windowId: number, callback: AsyncCallback\<PointerStyle>): void | 查询鼠标光标样式。                                           |
23
24## 设置鼠标光标隐藏
25
26用户在全屏观看视频时，可以调用鼠标光标的隐藏接口设置鼠标光标不可见，提升用户体验。
27
28### 开发步骤
29
301. 应用切换到全屏播放。
312. 在应用中调用鼠标光标隐藏接口隐藏光标。
323. 应用退出全屏播放。
334. 在应用中调用鼠标光标显示接口显示光标。
34
35```js
36import { pointer } from '@kit.InputKit';
37
38@Entry
39@Component
40struct Index {
41  build() {
42    RelativeContainer() {
43      Text()
44        .onClick(() => {
45          // 1.应用切换到全屏播放
46          // 2.调用鼠标光标隐藏接口隐藏光标
47          try {
48            pointer.setPointerVisible(false, (error: Error) => {
49              if (error) {
50                console.error(`Set pointer visible failed, error: ${JSON.stringify(error, ["code", "message"])}`);
51                return;
52              }
53              console.info(`Set pointer visible success.`);
54            });
55          } catch (error) {
56            console.error(`The mouse pointer hide attributes is failed. ${JSON.stringify(error, ["code", "message"])}`);
57          }
58
59          // 3.应用退出全屏播放
60          // 4.调用鼠标光标显示接口显示光标
61          try {
62            pointer.setPointerVisible(true, (error: Error) => {
63              if (error) {
64                console.error(`Set pointer visible failed, error: ${JSON.stringify(error, ["code", "message"])}`);
65                return;
66              }
67              console.info(`Set pointer visible success.`);
68            });
69          } catch (error) {
70            console.error(`Set pointer visible failed, ${JSON.stringify(error, ["code", "message"])}`);
71          }
72        })
73    }
74  }
75}
76```
77
78## 设置鼠标光标样式
79
80当开发者设计取色器特性时，可以将鼠标光标样式切换为取色器样式，完成取色后，设置鼠标光标样式为默认样式，该接口设置和查询当前应用内指定窗口的光标样式，总共可设置43种光标样式，具体参考[光标样式](../../reference/apis-input-kit/js-apis-pointer.md#pointerstyle)。
81
82### 开发步骤
83
841. 开发者使能取色功能。
852. 调用窗口实例获取对应的窗口id。
863. 设置鼠标光标样式为取色器样式。
874. 取色结束。
885. 设置鼠标光标样式为默认样式。
89
90```js
91import { pointer } from '@kit.InputKit';
92import { BusinessError } from '@kit.BasicServicesKit';
93import { window } from '@kit.ArkUI';
94
95@Entry
96@Component
97struct Index {
98  build() {
99    RelativeContainer() {
100      Text()
101        .onClick(() => {
102          // 1.开发者使能取色功能
103          // 2.调用窗口实例获取对应的窗口id
104          window.getLastWindow(this.getUIContext().getHostContext(), (error: BusinessError, windowClass: window.Window) => {
105            if (error.code) {
106              console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(error));
107              return;
108            }
109            let windowId = windowClass.getWindowProperties().id;
110            if (windowId < 0) {
111              console.info(`Invalid windowId`);
112              return;
113            }
114            try {
115              // 3.设置鼠标光标样式为取色器样式
116              pointer.setPointerStyle(windowId, pointer.PointerStyle.COLOR_SUCKER).then(() => {
117                console.info(`Successfully set mouse pointer style`);
118              });
119            } catch (error) {
120              console.error(`Failed to set the pointer style, error=${JSON.stringify(error)}, msg=${error.message}`);
121            }
122          });
123        })
124    }
125  }
126}
127```
128
129```js
130import { pointer } from '@kit.InputKit';
131import { BusinessError } from '@kit.BasicServicesKit';
132import { window } from '@kit.ArkUI';
133
134@Entry
135@Component
136struct Index {
137  build() {
138    RelativeContainer() {
139      Text()
140        .onClick(() => {
141          // 4.取色结束
142          window.getLastWindow(this.getUIContext().getHostContext(), (error: BusinessError, windowClass: window.Window) => {
143            if (error.code) {
144              console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(error));
145              return;
146            }
147            let windowId = windowClass.getWindowProperties().id;
148            if (windowId < 0) {
149              console.info(`Invalid windowId`);
150              return;
151            }
152            try {
153              // 5.设置鼠标光标样式为默认样式
154              pointer.setPointerStyle(windowId, pointer.PointerStyle.DEFAULT).then(() => {
155                console.info(`Successfully set mouse pointer style`);
156              });
157            } catch (error) {
158              console.error(`Failed to set the pointer style, error=${JSON.stringify(error)}, msg=${error.message}`);
159            }
160          });
161        })
162    }
163  }
164}
165```
166