マウスカーソルの現在位置を取得する

Recipe ID: win-023

スクリーン上でのマウスカーソルの絶対位置を取得する方法を紹介します。

スクリーンショットツールや、マウス追従型のオーバーレイアプリを作成する際に必須の機能です。
フロントエンドおよびバックエンドから座標(X, Y)を取得する手順について解説します。

前提条件

Permissions (権限) の設定

src-tauri/capabilities/default.json に以下の権限を追加します。

{
  "permissions": [
    ...,
    "core:window:default",
    "core:window:allow-cursor-position"
  ]
}

1. フロントエンドから変更する (TypeScript)

サンプルコード

import { cursorPosition } from '@tauri-apps/api/window';

// カーソル位置を取得 (画面座標)
const cursorPos = await cursorPosition();
console.log('Cursor X:', cursorPos.x, 'Y:', cursorPos.y);

// マウス移動を追跡する例
document.addEventListener('mousemove', async () => {
  const pos = await cursorPosition();
  document.getElementById('cursor-info')!.textContent = 
    'X: ' + pos.x + ', Y: ' + pos.y;
});

2. バックエンドから変更する (Rust)

use tauri::Manager;

#[tauri::command]
fn get_cursor_pos(app_handle: tauri::AppHandle) {
    if let Some(window) = app_handle.get_webview_window("main") {
        let pos = window.cursor_position().unwrap();
        println!("Cursor: {}, {}", pos.x, pos.y);
    }
}