Rust利用tauri制作個效率小工具

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

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

先看效果

要解決的問題

喚起方式

因為要通過鼠標進行交互，所以必然會影響系統(tǒng)默認的鼠標行為。

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

就要解決如下問題：

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

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

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

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

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

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)建個異步任務(wù)

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

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

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

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

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

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

由于rdev的鼠標點擊事件沒有鼠標位置信息，所以我們要在鼠標移動時保存坐標信息

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

按下鼠標是傳遞坐標

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è)置全屏展示，這樣系統(tǒng)的坐標 == 鼠標在窗口的坐標。

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

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

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

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

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

在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獲取鼠標所在的塊上，當(dāng)松開鼠標時就能執(zhí)行對應(yīng)的任務(wù)。