快捷導(dǎo)航

Rust利用tauri制作個(gè)效率小工具

更新時(shí)間：2023年02月02日 09:37:20 作者：_十九

日常使用電腦中經(jīng)常會(huì)用到一個(gè)quicke工具中的輪盤菜單工具。但quicke免費(fèi)版很多功能不支持，且它的觸發(fā)邏輯用的不舒服，經(jīng)常誤觸。所以本文就來用tauri自制一個(gè)小工具，希望對(duì)大家有所幫助

先看效果

要解決的問題

喚起方式

因?yàn)橐ㄟ^鼠標(biāo)進(jìn)行交互，所以必然會(huì)影響系統(tǒng)默認(rèn)的鼠標(biāo)行為。

為了減少交互沖突，選擇長(zhǎng)按右鍵喚起菜單。

就要解決如下問題：

1、默認(rèn)情況要阻止右鍵鼠標(biāo)的事件傳遞給操作系統(tǒng)

2、當(dāng)右鍵按住時(shí)間小于設(shè)置長(zhǎng)按喚起時(shí)間，要自動(dòng)給系統(tǒng)發(fā)送一個(gè)右鍵按下和右鍵松開的事件

由于tauri沒有提供相關(guān)的api，所以要從Rust的crate中找看看有沒有相關(guān)包。

經(jīng)過一番搜索，找到了rdev這個(gè)包，它提供了基礎(chǔ)的系統(tǒng)級(jí)的鼠標(biāo)鍵盤事件處理。

使用rdev::grab就可以監(jiān)聽鼠標(biāo)鍵盤事件, 并且阻止事件傳遞

tauri::async_runtime::spawn(async move {
    rdev::grab(move |event| {
        let is_block: bool = match event.event_type {
            EventType::ButtonPress(button) => {
                match button {
                    Button::Right => {
                         unsafe {
                            !IS_SIMULATE
                         }
                    }
                    _ => { false }
                }
            }
            EventType::ButtonRelease(button) => {
                match button {
                    Button::Right => {
                        unsafe {
                            !IS_SIMULATE
                        }
                    }
                    _ => { false }
                }
            }
            _ => { false }
        };
        if is_block {
            None
        } else {
            Some(event)
        }
    }).unwrap();
});

通過tauri::async_runtime::spawn創(chuàng)建個(gè)異步任務(wù)

IS_SIMULATE是一個(gè)全局變量默認(rèn)false會(huì)阻止右擊事件，自動(dòng)觸發(fā)事件前會(huì)設(shè)置為true，使事件不被阻止，完成后再設(shè)置為false

rdev::grab通過流處理讓右鍵的按下和松開返回個(gè)None阻止事件傳遞。

菜單出現(xiàn)的位置

我們希望喚起菜單中心在鼠標(biāo)當(dāng)前位置，所以

1、獲取右擊按下時(shí)的系統(tǒng)坐標(biāo)信息

2、把系統(tǒng)的坐標(biāo)傳遞給菜單窗口實(shí)現(xiàn)定位

由于rdev的鼠標(biāo)點(diǎn)擊事件沒有鼠標(biāo)位置信息，所以我們要在鼠標(biāo)移動(dòng)時(shí)保存坐標(biāo)信息

EventType::MouseMove { x, y } => {
    unsafe {
        MOUSE_POSITION = (x, y);
    }
    false
}

按下鼠標(biāo)是傳遞坐標(biāo)

EventType::ButtonPress(button) => {
    unsafe {
        if !IS_SIMULATE {
            roulette_window.emit("buttondown", ButtonPayload { button: get_button_name(&button), x: MOUSE_POSITION.0, y: MOUSE_POSITION.1 }).unwrap();
        }
    }
    match button {
        Button::Right => {
            unsafe {
                !IS_SIMULATE
            }
        }
        _ => { false }
    }
}

同時(shí)我們把窗口設(shè)置全屏展示，這樣系統(tǒng)的坐標(biāo) == 鼠標(biāo)在窗口的坐標(biāo)。

接下來在窗口內(nèi)繪制需要數(shù)量的扇形就完成了基本的制作。

這里使用SVG來繪制扇形菜單

菜單數(shù)據(jù)：

const config: {
  id: string;
  text?: string;
  image?: string;
  callback?: () => void;
}[] = []

tip: 根據(jù)菜單數(shù)量已經(jīng)提前計(jì)算path需要的坐標(biāo)信息

在react內(nèi)渲染

  <svg className='menu' width={SIZE * 2} height={SIZE * 2} xmlns="http://www.w3.org/2000/svg">
    <g>
      <circle id='center' className='center' cx={SIZE} cy={SIZE} r={CENTER_SIZE} />
      {
        active
        && (
          active.id === 'close'
            ? (
              <text
                className='center-text'
                x={SIZE}
                y={SIZE}
                fill='red'
              >
                關(guān)閉
              </text>
            )
            : (
              <text
                className='center-text'
                x={SIZE}
                y={SIZE}
              >
                {active?.text}
              </text>
            )
        )
      }
    </g>
    {
      menu.map(({ id, text, image, points, center }) => (
        <g key={id}>
          <path
            id={id}
            className='item' d={`M ${points[0][0]} ${points[0][1]} A ${SIZE} ${SIZE}, 0, 0, 1, ${points[1][0]} ${points[1][1]} L ${points[2][0]} ${points[2][1]} A ${CENTER_SIZE} ${CENTER_SIZE}, 0, 0, 0, ${points[3][0]} ${points[3][1]} Z`}
          />
          {
            image
            && (
              <image
                className='item-img'
                xlinkHref={image}
                x={center[0] - 15}
                y={center[1] - 25}
                width='30'
              />
            )
          }
          {
            text
            && (
              <text
                className='item-text'
                x={center[0]}
                y={center[1] + 25}
              >
                {text}
              </text>
            )
          }
        </g>
      ))
    }
  </svg>

在窗口內(nèi)通過document.addEventListener監(jiān)聽mousemove獲取鼠標(biāo)所在的塊上，當(dāng)松開鼠標(biāo)時(shí)就能執(zhí)行對(duì)應(yīng)的任務(wù)。