本文測試透過的 Tauri 版本為
1.0和1.2。
滑鼠穿透
依賴
在 cargo.toml 中新增
windows = { version = "0.43.0", features = [
"Win32_Foundation",
"Win32_UI_WindowsAndMessaging",
] }程式碼
初始化視窗時透過 setup 傳閉包拿到 window 進行操作。只支援 Windows。
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 應該也是可以的。
"tauri": {
…,
"windows": [
{
"fullscreen": true,
"resizable": false,
"transparent": true,
"alwaysOnTop": true
}
]
}CSS
另外，不要忘記修改需要透明的地方的 CSS。如果你使用了 SvelteKit 模板，可以在 +layout.svelte 中新增：
<style>
main {
background: transparent;
}
</style>以上。
版权许可
- 本作品 采用 知识共享 署名—非商业性使用 4.0 国际许可协议（CC BY-NC 4.0 International）许可，阁下可自由地共享（复制、发行） 和演绎（修改、转换或二次创作） 这一作品，唯须遵守许可协议条款。
评论