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

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

日常使用电脑中经常会用到一个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获取鼠标所在的块上，当松开鼠标时就能执行对应的任务。

最后

目前的菜单功能都是写死在代码里的，之后会加上配置功能，并且支持自己编写代码来控制每个菜单对应的具体操作。

后续还可以加上根据焦点应用来分别展示不同的菜单数据。

到此这篇关于Rust利用tauri制作个效率小工具的文章就介绍到这了,更多相关Rust tauri制作效率小工具内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

rust实现post小程序(完整代码)
这篇文章主要介绍了rust实现一个post小程序,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-04-04
Rust调用C程序的实现步骤
本文主要介绍了Rust调用C程序的实现步骤,包括创建C函数、编译C代码、链接Rust和C代码等步骤,具有一定的参考价值，感兴趣的可以了解一下
2023-12-12
rust 创建多线程web server的详细过程
web server 中主要的两个协议是 http 和 tcp,tcp 是底层协议,http 是构建在 tcp 之上的,本篇文章重点给大家介绍rust 创建多线程web server的详细过程,感兴趣的朋友跟随小编一起看看吧
2023-11-11
Rust 语言中的 into() 方法及代码实例
在 Rust 中,into() 方法通常用于将一个类型的值转换为另一个类型,这通常涉及到资源的所有权转移,本文给大家介绍Rust 语言中的 into() 方法及代码实例,感谢的朋友跟随小编一起看看吧
2024-03-03
Rust错误处理之`foo(...)?`的用法与错误类型转换小结
foo(...)?语法糖为Rust的错误处理提供了极大的便利,通过结合map_err方法和From trait的实现,你可以轻松地处理不同类型的错误,并保持代码的简洁性和可读性,这篇文章主要介绍了Rust错误处理：`foo(...)?`的用法与错误类型转换,需要的朋友可以参考下
2024-05-05
如何使用VSCode配置Rust开发环境(Rust新手教程)
这篇文章主要介绍了如何使用VSCode配置Rust开发环境(Rust新手教程),本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-07-07
Rust 语言中符号 :: 的使用场景解析
Rust 是一种强调安全性和速度的系统编程语言,这篇文章主要介绍了Rust 语言中符号 :: 的使用场景,本文给大家介绍的非常详细,需要的朋友可以参考下
2024-03-03
使用Rust语言管理Node.js版本
这篇文章主要介绍一个使用 Rust 进行编写的一体化版本管理工具 Rtx,比如使用它来管理 Node.js 版本,它很简单易用,使用了它,就可以抛弃掉 nvm 了,文中通过代码示例给大家介绍的非常详细，需要的朋友可以参考下
2023-12-12
Rust中引用和指针的区别详解
在 Rust 中,指针和引用都可以用来指向内存中的某个值,它们之间的主要区别在于它们的安全性和生命周期保证,本文将通过一个简单的示例给大家介绍一下Rust中引用和指针的区别,需要的朋友可以参考下
2023-08-08
详解Rust编程中的共享状态并发执行
虽然消息传递是一个很好的处理并发的方式,但并不是唯一一个,另一种方式是让多个线程拥有相同的共享数据,本文给大家介绍Rust编程中的共享状态并发执行,感兴趣的朋友一起看看吧
2023-11-11