在 Tauri 中实现鼠标穿透和透明窗口

效果

本文测试通过的 Tauri 版本为 1.01.2

鼠标穿透

依赖

cargo.toml 中添加

1
2
3
4
windows = { version = "0.43.0", features = [
"Win32_Foundation",
"Win32_UI_WindowsAndMessaging",
] }

代码

初始化窗口时通过 setup 传闭包拿到 window 进行操作。只支持 Windows。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
tauri::Builder::default()
.setup(|app| {
let window = app.get_window("main").unwrap();
#[cfg(windows)]
{
use windows::Win32::Foundation::HWND;
let hwnd = window.hwnd().unwrap().0;
let hwnd = HWND(hwnd);
unsafe {
let mut style_ex = WINDOW_EX_STYLE(GetWindowLongW(hwnd, GWL_EXSTYLE) as u32);
style_ex |= WS_EX_APPWINDOW // for taskbar
| WS_EX_COMPOSITED
| WS_EX_LAYERED
| WS_EX_TRANSPARENT
| WS_EX_TOPMOST;
use windows::Win32::UI::WindowsAndMessaging::*;
let nindex = GWL_EXSTYLE;
let _pre_val = SetWindowLongA(hwnd, nindex, style_ex.0 as i32);
}
}
Ok(())
})
.invoke_handler(tauri::generate_handler![...])
.run(tauri::generate_context!())
.expect("error while running tauri application");

官方的实现目前还没有进入 tauri,只能先凑合用用。

Hi, since tauri-apps/tao#421 was merged into tao, can that function be exposed in tauri's api?

透明窗口

窗口设置

为了实现透明窗口,还需要修改 tauri.config.json。当然,直接修改 window 或者通过 tauri::Builder 应该也是可以的。

1
2
3
4
5
6
7
8
9
10
11
"tauri": {
,
"windows": [
{
"fullscreen": true,
"resizable": false,
"transparent": true,
"alwaysOnTop": true
}
]
}

CSS

另外,不要忘记修改需要透明的地方的 CSS。如果你使用了 SvelteKit 模板,可以在 +layout.svelte 中添加:

1
2
3
4
5
<style>
main {
background: transparent;
}
</style>

以上。🪟