操作系统原生的窗口样式中规中矩,看久了却难免会有些厌烦。所以在使用 electron
创建桌面应用的时候,有时候我们希望能完全掌控窗口的样式,而隐藏掉系统提供的窗口边框和标题栏等。
通过在创建窗口的时候,指定{frame:false}
或{titleBarStyle: 'hidden'}
(macOS only)即可达到隐藏边框的效果,甚至可以通过 {transparent:true}
来指定窗口透明,创建异形的窗口呈现。具体可见官方文档,这里不再赘述。
一个值得一提的问题是窗口的拖动。因为没有标题栏,所以需要自行实现窗口的拖动区域,否则就没法移动窗口位置了。可能的实现方案有下面几种:
方案一: -webkit-app-region: drag;
官方文档里有详细说明:
默认情况下, 无框窗口是 non-draggable 的。 应用程序需要指定 `-webkit-app-region: drag` 在 CSS 中告诉Electron哪个区域是可拖拽的 (像 OS 的标准标题栏), 并且应用程序也可以使用 `-webkit-app-region: no-drag` 来排除 draggable region 中的 non-draggable 区域。 请注意, 当前只支持矩形形状。
要使整个窗口可拖拽, 您可以添加 `-webkit-app-region: drag` 作为 `body` 的样式:
请注意, 如果您已使整个窗口draggable, 则必须将按钮标记为 non-draggable, 否则用户将无法单击它们:
button { -webkit-app-region: no-drag; }
如果你设置自定义标题栏为 draggable, 你也需要标题栏中所有的按钮都设为 non-draggable。
试下来拖拽效果很完美。但是,文档后面提到了这种方法较为致命的一个问题:
在某些平台上, 可拖拽区域将被视为 non-client frame, 因此当您右键单击它时, 系统菜单将弹出。 要使上下文菜单在所有平台上都正确运行, 您永远也不要在可拖拽区域上使用自定义上下文菜单。
不仅右键菜单,设置了这个样式的元素几乎无法响应所有的鼠标事件,包括点击、拖拽等。如果需要拖拽整个窗口,就相当尴尬了。
方案二:通过响应页面的 mousemove
事件
既然我们需要页面能够响应鼠标事件,那能不能就通过鼠标事件去解决问题呢?这是作为一名前端开发人员很容易想到的方案:通过网页的 mousemove
事件,我们可以得知当前鼠标在网页上的坐标,并与上一次的坐标进行比较,得出鼠标的位移数值。
然后,我们可以通过当前 electron 窗口上的 getPosition
方法获取窗口当前位置,加上鼠标位移得出新的位置,然后通过 setPosition
方法手动移动窗口,达到拖动的效果。
是不是看上去很美?很可惜不能高兴得太早。网页上的两次 mousemove
事件之间有一定时间间隔,这个间隔对于桌面客户端编程来说有点太长了。这就导致在性能比较差的情况下,有可能出现这样的情况:鼠标移动过快,移出了窗口的范围,而下一次 mousemove
还没来得及触发。这样窗口就跟不上鼠标,“掉下来”了……
方案三:electron-drag
在一度绝望的时候,发现了 electron-drag 这个库和它天才的想法:通过一个原生 Node.js 模块,跟踪鼠标在整个屏幕上的位移,然后手动设置窗口的位置。
这个库只在 Windows 和 macOS 下可用,不支持 Linux。因此,在不支持的平台上,需要使用方案一或者方案二进行容。
一个小插曲
在 Windows 上引用 electron-drag
时可能会抛出 Uncaught Error: A dynamic link library (DLL) initialization routine failed
的错误(macOS 上暂未遇到,不确定是否也有)。这是因为该库使用 win-mouse
和 osx-mouse
这两个原生模块进行鼠标位置的追踪,而 electron 和系统中安装的 Node.js 程序头文件未必相同,要使用原生模块必须使用正确版本的头文件进行编译。解决方式是安装 electron-rebuild
重新编译对应的模块。Windows 下的操作如下:
electron-rebuild -f -w win-mouse
最后上代码(TypeScript):
export function makeDraggable(el: HTMLElement | string) {
if (typeof el === 'string') { el = document.querySelector(el) as HTMLElement; }
try {
const drag = require('electron-drag');
if (drag.supported) {
drag(el);
} else {
makeDraggableFallback(el);
}
} catch (ex) {
makeDraggableFallback(el);
}
}
function makeDraggableFallback(el: HTMLElement) {
// 方案一
// el.style['-webkit-app-region'] = 'drag';
// 方案二
let dragging = false;
let mouseX = 0;
let mouseY = 0;
el.addEventListener('mousedown', (e) => {
dragging = true;
const { pageX, pageY } = e;
mouseX = pageX;
mouseY = pageY;
});
window.addEventListener('mouseup', () => {
dragging = false;
});
window.addEventListener('mousemove', (e: MouseEvent) => {
if (dragging) {
const { pageX, pageY } = e;
const win = require('electron').remote.getCurrentWindow();
const pos = win.getPosition();
pos[0] = pos[0] + pageX - mouseX;
pos[1] = pos[1] + pageY - mouseY;
win.setPosition(pos[0], pos[1], true);
}
});
}