• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Mouse Pointer Development
2
3## When to Use
4
5Mouse pointer management provides the functions such as displaying or hiding the mouse pointer as well as querying and setting the pointer style. For example, you can determine whether to display or hide the mouse pointer when a user watches a video in full screen, and can switch the mouse pointer to a color picker when a user attempts color pickup.
6
7## Modules to Import
8
9```js
10import pointer from '@ohos.multimodalInput.pointer';
11```
12
13## Available APIs
14
15The following table lists the common APIs for mouse pointer management. For details about the APIs, see [ohos.multimodalInput.pointer](../reference/apis/js-apis-pointer.md).
16
17| Instance | API                                                      | Description                                                        |
18| ------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
19| pointer | function isPointerVisible(callback: AsyncCallback\<boolean>): void; | Checks the visible status of the mouse pointer.                                |
20| pointer | function setPointerVisible(visible: boolean, callback: AsyncCallback\<void>): void; | Sets the visible status of the mouse pointer. This setting takes effect for the mouse pointer globally.|
21| pointer | function setPointerStyle(windowId: number, pointerStyle: PointerStyle, callback: AsyncCallback\<void>): void; | Sets the mouse pointer style. This setting takes effect for the mouse pointer style of a specified window.        |
22| pointer | function getPointerStyle(windowId: number, callback: AsyncCallback\<PointerStyle>): void; | Obtains the mouse pointer style.                                          |
23
24## Hiding the Mouse Pointer
25
26When watching a video in full-screen mode, a user can hide the mouse pointer for an improved user experience.
27
28## How to Develop
29
301. Switch to the full-screen playback mode.
312. Hide the mouse pointer.
323. Exit the full-screen playback mode.
334. Display the mouse pointer.
34
35```js
36import pointer from '@ohos.multimodalInput.pointer';
37
38// 1. Switch to the full-screen playback mode.
39// 2. Hide the mouse pointer.
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. Exit the full-screen playback mode.
53// 4. Display the mouse pointer.
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## Setting the Mouse Pointer Style
68
69When designing a color picker, you can have the mouse pointer switched to the color picker style during color pickup and then switched to the default style on completion of color pickup. This setting takes effect for the pointer style of a specified window in the current application. A total of 43 pointer styles can be set. For details, see [Pointer Style](../reference/apis/js-apis-pointer.md#pointerstyle9).
70
71### How to Develop
72
731. Enable the color pickup function.
742. Obtain the window ID.
753. Set the mouse pointer to the color picker style.
764. End color pickup.
775. Set the mouse pointer to the default style.
78
79```js
80import { BusinessError }  from '@ohos.base';
81import pointer from '@ohos.multimodalInput.pointer';
82import window from '@ohos.window';
83
84// 1. Enable the color pickup function.
85// 2. Obtain the window 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. Set the mouse pointer to the color picker style.
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. End color pickup.
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. Set the mouse pointer to the default style.
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