目录

Mouse Pointer Development

When to Use

Mouse 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.

Modules to Import

import { pointer } from '@kit.InputKit';

Available APIs

The following table lists common APIs for mouse pointer management. For details, see @ohos.multimodalInput.pointer (Mouse Pointer).

API Description
isPointerVisible(callback: AsyncCallback<boolean>): void Obtains the display/hide state of the current window.
setPointerVisible(visible: boolean, callback: AsyncCallback<void>): void Sets the pointer display/hide state, which applies to all windows of the current process.
setPointerStyle(windowId: number, pointerStyle: PointerStyle, callback: AsyncCallback<void>): void Sets the mouse pointer style type of the specified window. This API can only set the mouse pointer style type of windows in the current application process.
getPointerStyle(windowId: number, callback: AsyncCallback<PointerStyle>): void Obtains the mouse pointer style type of the specified window. This API can only obtain the mouse pointer style type of windows in the current application process.

Hiding the Mouse Pointer

When watching a video in full-screen mode, a user can hide the mouse pointer for an improved user experience.

[h2]How to Develop

  1. Switch to the full-screen playback mode.
  2. Hide the mouse pointer.
  3. Exit the full-screen playback mode.
  4. Display the mouse pointer.
Text("Click to hide pointer")
  .onClick(() => {
    // 1. Switch to the full-screen playback mode.
    // 2. Hide the mouse pointer.
    try {
      pointer.setPointerVisible(false, (error: Error) => {
        if (error) {
          hilog.error(DOMAIN, 'Pointer', `Set pointer visible failed, error: %{public}s`,
            JSON.stringify(error, ["code", "message"]));
          return;
        }
        hilog.info(DOMAIN, 'Pointer', 'Set pointer visible success.');
      });
    } catch (error) {
      hilog.error(DOMAIN, 'Pointer', `The mouse pointer hide attributes is failed. %{public}s`,
        JSON.stringify(error, ["code", "message"]));
    }
  })
  // ...

// 3. Exit the full-screen playback mode.
// 4. Display the mouse pointer.
Text("Click to display pointer")
  .onClick(() => {
    try {
      pointer.setPointerVisible(true, (error: Error) => {
        if (error) {
          hilog.error(DOMAIN, 'Pointer', `Set pointer visible failed, error: %{public}s`,
            JSON.stringify(error, ["code", "message"]));
          return;
        }
        hilog.info(DOMAIN, 'Pointer', 'Set pointer visible success.');
      });
    } catch (error) {
      hilog.error(DOMAIN, 'Pointer', `Set pointer visible failed, error: %{public}s`,
        JSON.stringify(error, ["code", "message"]));
    }
  })
  // ...

Setting the Mouse Pointer Style

When you design the color picker feature, you can switch the mouse pointer style to the color picker style, and set the mouse pointer style back to the default after color pickup is complete. This API sets and queries the pointer style of a specified window in the current application. A total of 49 pointer styles are available. For details, see PointerStyle.

[h2]How to Develop

  1. Enable the color pickup function.
  2. Obtain the window ID.
  3. Set the mouse pointer to the color picker style.
  4. End color pickup.
  5. Set the mouse pointer to the default style.
Text(`Click to set the mouse pointer style to the color picker style`)
  .onClick(() => {
    // 1. Enable the color pickup function.
    // 2. Obtain the window ID.
    window.getLastWindow(this.getUIContext().getHostContext(),
      (error: BusinessError, windowClass: window.Window) => {
        if (error.code) {
          hilog.error(DOMAIN, 'Pointer', 'Failed to obtain the top window. Cause: %{public}s',
            JSON.stringify(error));
          return;
        }
        let windowId = windowClass.getWindowProperties().id;
        if (windowId < 0) {
          hilog.info(DOMAIN, 'Pointer', 'Invalid windowId');
          return;
        }
        try {
          // 3. Set the mouse pointer to the color picker style.
          pointer.setPointerStyle(windowId, pointer.PointerStyle.COLOR_SUCKER).then(() => {
            hilog.info(DOMAIN, 'Pointer', 'Successfully set mouse pointer style');
          });
        } catch (error) {
          hilog.error(DOMAIN, 'Pointer', `Failed to set the pointer style, error=%{public}s, msg=%{public}s`,
            JSON.stringify(error), error.message);
        }
      });
  })
  // ...


Text(`Click to set the mouse pointer style to default style`)
  .onClick(() => {
    // 4. End color pickup.
    window.getLastWindow(this.getUIContext().getHostContext(),
      (error: BusinessError, windowClass: window.Window) => {
        if (error.code) {
          hilog.error(DOMAIN, 'Pointer', 'Failed to obtain the top window. Cause: %{public}s',
            JSON.stringify(error));
          return;
        }
        let windowId = windowClass.getWindowProperties().id;
        if (windowId < 0) {
          hilog.info(DOMAIN, 'Pointer', 'Invalid windowId');
          return;
        }
        try {
          // 5. Set the mouse pointer to the default style.
          pointer.setPointerStyle(windowId, pointer.PointerStyle.DEFAULT).then(() => {
            hilog.info(DOMAIN, 'Pointer', 'Successfully set mouse pointer style');
          });
        } catch (error) {
          hilog.error(DOMAIN, 'Pointer', `Failed to set the pointer style, error=%{public}s, msg=%{public}s`,
            JSON.stringify(error), error.message);
        }
      });
  })