スクリーン上でのマウスカーソルの絶対位置を取得する方法を紹介します。
スクリーンショットツールや、マウス追従型のオーバーレイアプリを作成する際に必須の機能です。
フロントエンドおよびバックエンドから座標(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);
}
}