日常操作电脑中常会要用到一个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内3D渲染
<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获得电脑鼠标所属的块上，当放开电脑鼠标时就可实行相对应的每日任务。
最终
现阶段的菜单栏作用全是写死在编码中的，后会再加上配备作用，并且支持自身编写代码来调节每一个菜单栏相对应的具体步骤。
后面还能够再加上依据聚焦点运用来各自展现不同类型的菜单栏数据信息。