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

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

Rust利用tauri制作個效率小工具_(dá)Rust語言

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

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

但quicke免費(fèi)版很多功能不支持，且它的觸發(fā)邏輯用的不舒服，經(jīng)常誤觸。

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

先看效果

要解決的問題

喚起方式

因為要通過鼠標(biāo)進(jìn)行交互，所以必然會影響系統(tǒng)默認(rèn)的鼠標(biāo)行為。

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

就要解決如下問題：

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

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

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

經(jīng)過一番搜索，找到了rdev這個包，它提供了基礎(chǔ)的系統(tǒng)級的鼠標(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)建個異步任務(wù)

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

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

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

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

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

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

由于rdev的鼠標(biāo)點擊事件沒有鼠標(biāo)位置信息，所以我們要在鼠標(biāo)移動時保存坐標(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è)置全屏展示，這樣系統(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)提前計算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)時就能執(zhí)行對應(yīng)的任務(wù)。

最后

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

后續(xù)還可以加上根據(jù)焦點應(yīng)用來分別展示不同的菜單數(shù)據(jù)。

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

欄目分類
最近更新