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// 1.应用切换到全屏播放
39// 2.调用鼠标光标隐藏接口隐藏光标
40try {
41  pointer.setPointerVisible(false, (error: Error) => {
42    if (error) {
43      console.log(`Set pointer visible failed, error: ${JSON.stringify(error, [`code`, `message`])}`);
44      return;
45    }
46    console.log(`Set pointer visible success.`);
47  });
48} catch (error) {
49  console.log(`The mouse pointer hide attributes is failed. ${JSON.stringify(error, [`code`, `message`])}`);
50}
51
52// 3.应用退出全屏播放
53// 4.调用鼠标光标显示接口显示光标
54try {
55  pointer.setPointerVisible(true, (error: Error) => {
56    if (error) {
57      console.log(`Set pointer visible failed, error: ${JSON.stringify(error, [`code`, `message`])}`);
58      return;
59    }
60    console.log(`Set pointer visible success.`);
61  });
62} catch (error) {
63  console.log(`Set pointer visible failed, ${JSON.stringify(error, [`code`, `message`])}`);
64}
65```
66
67## 设置鼠标光标样式
68
69当开发者设计取色器特性时，可以将鼠标光标样式切换为取色器样式，完成取色后，设置鼠标光标样式为默认样式，该接口设置和查询当前应用内指定窗口的光标样式，总共可设置43种光标样式，具体参考[光标样式](../../reference/apis-input-kit/js-apis-pointer.md#pointerstyle)。
70
71### 开发步骤
72
731. 开发者使能取色功能。
742. 调用窗口实例获取对应的窗口id。
753. 设置鼠标光标样式为取色器样式。
764. 取色结束。
775. 设置鼠标光标样式为默认样式。
78
79```js
80import { pointer } from '@kit.InputKit';
81import { BusinessError } from '@kit.BasicServicesKit';
82import { window } from '@kit.ArkUI';
83
84// 1.开发者使能取色功能
85// 2.调用窗口实例获取对应的窗口id
86window.getLastWindow(getContext(), (error: BusinessError, windowClass: window.Window) => {
87  if (error.code) {
88    console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(error));
89    return;
90  }
91  let windowId = windowClass.getWindowProperties().id;
92  if (windowId < 0) {
93    console.log(`Invalid windowId`);
94    return;
95  }
96  try {
97    // 3.设置鼠标光标样式为取色器样式
98    pointer.setPointerStyle(windowId, pointer.PointerStyle.COLOR_SUCKER).then(() => {
99      console.log(`Successfully set mouse pointer style`);
100    });
101  } catch (error) {
102    console.log(`Failed to set the pointer style, error=${JSON.stringify(error)}, msg=${JSON.stringify(`message`)}`);
103  }
104});
105// 4.取色结束
106window.getLastWindow(getContext(), (error: BusinessError, windowClass: window.Window) => {
107  if (error.code) {
108    console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(error));
109    return;
110  }
111  let windowId = windowClass.getWindowProperties().id;
112  if (windowId < 0) {
113    console.log(`Invalid windowId`);
114    return;
115  }
116  try {
117    // 5.设置鼠标光标样式为默认样式
118    pointer.setPointerStyle(windowId, pointer.PointerStyle.DEFAULT).then(() => {
119      console.log(`Successfully set mouse pointer style`);
120    });
121  } catch (error) {
122    console.log(`Failed to set the pointer style, error=${JSON.stringify(error)}, msg=${JSON.stringify(`message`)}`);
123  }
124});
125```
126