日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：_十九 ? 更新時間： 2023-04-01 編程語言

日常使用電腦中經常會用到一個quicke工具中的輪盤菜單工具。

但quicke免費版很多功能不支持，且它的觸發邏輯用的不舒服，經常誤觸。

本著靠人不讓靠自己，自己動手豐衣足食的理念，用tauri擼一個小工具。

先看效果

要解決的問題

喚起方式

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

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

就要解決如下問題：

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

2、當右鍵按住時間小于設置長按喚起時間，要自動給系統發送一個右鍵按下和右鍵松開的事件

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

經過一番搜索，找到了rdev這個包，它提供了基礎的系統級的鼠標鍵盤事件處理。

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

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創建個異步任務

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

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

菜單出現的位置

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

1、獲取右擊按下時的系統坐標信息

2、把系統的坐標傳遞給菜單窗口實現定位

由于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 }
    }
}

同時我們把窗口設置全屏展示，這樣系統的坐標 == 鼠標在窗口的坐標。

接下來在窗口內繪制需要數量的扇形就完成了基本的制作。

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

菜單數據：

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

tip: 根據菜單數量已經提前計算path需要的坐標信息

在react內渲染

  <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'
              >
                關閉
              </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>

在窗口內通過document.addEventListener監聽mousemove獲取鼠標所在的塊上，當松開鼠標時就能執行對應的任務。

最后

目前的菜單功能都是寫死在代碼里的，之后會加上配置功能，并且支持自己編寫代碼來控制每個菜單對應的具體操作。

后續還可以加上根據焦點應用來分別展示不同的菜單數據。

原文鏈接：https://juejin.cn/post/7194780452106797117

欄目分類
最近更新