electron 全局鼠标事件

在 Electron 中，可以使用 `globalShortcut` 模块来实现全局鼠标事件。以下是一个简单的示例代码：

const { app, globalShortcut } = require('electron');

app.on('ready', () => {
  // 注册全局快捷键，当鼠标左键点击时触发
  globalShortcut.register('MouseLeft', () => {
    console.log('鼠标左键点击');
  });

  // 注册全局快捷键，当鼠标右键点击时触发
  globalShortcut.register('MouseRight', () => {
    console.log('鼠标右键点击');
  });
});

app.on('will-quit', () => {
  // 注销所有全局快捷键
  globalShortcut.unregisterAll();
});

在上面的示例中，我们在应用程序准备就绪时注册了两个全局快捷键，分别对应鼠标左键和鼠标右键的点击事件。当触发这些事件时，控制台会输出相应的信息。

需要注意的是，全局鼠标事件只能在主进程中使用，所以以上代码应该在主进程中执行。

相关问题

如何解决 Electron 下 Leaflet 交互问题与鼠标穿透问题？

在 Electron 环境下，由于渲染进程和主进程之间的隔离，可能会遇到地图交互（如点击、拖拽等）的问题，以及鼠标穿透现象。以下是解决这些问题的一些策略：

1. **全局事件处理器**：为了确保事件能够跨渲染和主进程，可以使用 Electron 的 `webContents.send()` 方法来发送消息，将地图的交互事件传递给主进程。主进程收到消息后再触发相应的交互操作。

// main.js 或 app.js (main process)
const { webContents } = require('electron')

webContents.fromId(<your-webview-id>).on('leaflevent', (e, latlng) => {
  // 在这里处理 Leaflet 事件，比如更新地图标记位置
  // ...

  // 通过 send 方法触发回调在渲染进程中
  webContents.send('mapInteraction', latlng)
})

// vue 组件（渲染进程）
methods: {
  handleLeafletEvent(e) {
    this.$emit('leaflevent', e.latlng)
  },
  // ...其他地图事件处理
}

2. **防止鼠标穿透**：你可以尝试禁用默认的鼠标事件处理，让 Leaflet 来接管鼠标移动事件。在 Leaflet 初始化时设置 `interactive: false`，然后手动添加交互元素。

L.map("map").setView([51.505, -0.09], 13).options({
  interactive: false,
});
// 使用自定义 click 组件或其他方式添加交互

3. **使用 Leaflet 插件**：有些 Leaflet 插件（如 leaflet-polyline-editable）可能已针对 Electron 进行了优化，可以考虑使用它们来避免一些底层问题。

请注意，以上步骤可能需要根据您的实际项目结构和需求调整。如果问题仍然存在，可能需要查阅 Leaflet 的文档或社区论坛寻找更具体的解决方案。

electron 新建窗口 new BrowserWindow 全屏之后，放置一张图片 如何使用鼠标滑动选择区域，实现自定义截图

实现自定义截图可以借助 `electron-localshortcut` 库来注册全局快捷键，监听鼠标事件，绘制矩形框等方式来实现。具体步骤如下：

1. 安装 `electron-localshortcut` 库。

   npm install electron-localshortcut

2. 监听全局快捷键 `Ctrl+Shift+A`，用于开始自定义截图。

   const { globalShortcut } = require('electron');
   const currentWindow = electron.remote.getCurrentWindow();

   const startScreenshot = () => {
     // 在这里开始自定义截图
   };

   // 注册全局快捷键
   globalShortcut.register('Ctrl+Shift+A', startScreenshot);

3. 在 `startScreenshot()` 函数中，监听鼠标事件，并绘制矩形框。

   const { screen } = require('electron');
   const { BrowserWindow } = electron.remote;
   const { globalShortcut } = require('electron-localshortcut');

   let selectionWindow = null;
   const selectionBounds = { x: 0, y: 0, width: 0, height: 0 };

   const startScreenshot = () => {
     // 创建选择窗口
     selectionWindow = new BrowserWindow({
       width: screen.getPrimaryDisplay().size.width,
       height: screen.getPrimaryDisplay().size.height,
       frame: false,
       transparent: true,
       alwaysOnTop: true,
       skipTaskbar: true,
       webPreferences: {
         nodeIntegration: true,
       },
     });

     // 监听鼠标事件