(同步) 使用 electronjs 实现 ibus 输入法的用户界面
内容提要
本文介绍了使用electronjs开发ibus输入法用户界面的方法，包括透明窗口和光标跟随等功能的实现。electronjs是一个跨平台的桌面应用程序开发框架，可以简单方便地开发丰富多样的输入法用户界面。
延伸解读
为什么选择 Electron 而非 ibus 自带界面
ibus 输入法框架自带一套用户界面，但文章指出，从灵敏程度和可扩展性考虑，最好另想办法实现界面。Electron 结合了 Chromium 和 Node.js，允许使用 HTML、CSS、JavaScript 等 Web 技术开发桌面应用，开发速度快、成本低，且一套代码可跨 GNU/Linux、Windows、macOS 三个平台运行。对于输入法这种需要丰富交互和快速迭代的场景，Electron 提供了比传统 GUI 技术更灵活的选择。
候选框窗口的关键技术点
实现输入法候选框需要解决三个窗口特性：无边框、透明和不可获取焦点。无边框通过 frame: false 实现，透明需设置 transparent: true 并配合 CSS 背景透明。最关键的是 focusable: false，因为同一时间只能有一个窗口获得焦点，若候选框获取焦点会导致正在输入的窗口失去焦点，输入被取消，表现为候选框闪烁后消失。这些设置共同保证了候选框不干扰正常输入流程。
光标跟随的实现机制
光标跟随依赖 ibus 框架通过 D-Bus 接口 org.freedesktop.IBus.Engine 的 SetCursorLocation 方法发送光标位置。该方法传递四个参数：光标的 x、y 坐标和宽高，坐标相对于整个屏幕。输入法端接收这些信息后，通过 Electron 的 IPC 机制调用窗口移动接口，将候选框定位到光标下方。文章示例中，候选框的 y 坐标设置为光标 y 加上光标高度再加 16 像素，确保候选框出现在光标下方适当位置。
页面与 Electron 的桥接方式
为了让网页代码能够控制 Electron 窗口，文章使用 preload 脚本作为桥接。通过 contextBridge.exposeInMainWorld 暴露一组接口，如窗口显示、隐藏、设置位置和大小等。页面调用这些接口时，实际通过 ipcRenderer.invoke 发送到主进程，主进程用 ipcMain.handle 注册对应处理函数，最终操作 BrowserWindow 对象。这种设计将页面逻辑与窗口控制分离，既保证了安全性，又让页面代码可以方便地调整候选框行为。
Q&A
如何使用electronjs开发ibus输入法的用户界面？
使用electronjs开发ibus输入法用户界面可以通过创建透明窗口和实现光标跟随等功能来完成。
electronjs的主要优点是什么？
electronjs的主要优点是开发速度快和低成本，能够使用web技能进行跨平台开发。
如何实现透明窗口和无结构窗口？
透明窗口可以通过设置new BrowserWindow({ transparent: true })和相应的CSS样式来实现；无结构窗口则使用new BrowserWindow({ frame: false })创建。
如何获取光标位置以实现候选框跟随？
光标位置的获取通过D-Bus接口实现，输入法可以接收光标的坐标信息，并根据这些信息移动候选框窗口。
为什么候选框窗口不能获取焦点？
候选框窗口不能获取焦点是为了避免在输入内容时出现问题，确保输入流畅。
使用electronjs开发的用户界面与ibus自带的界面有什么区别？
使用electronjs开发的用户界面在灵敏程度和可扩展性上优于ibus自带的界面，能够更灵活地满足用户需求。
