electron无边框窗口的拖拽问题

2018年08月13日Web前端、桌面应用

继续玩耍electron,当用到无边框窗口时,原本有的拖拽成了一个问题。

当new BrowserWindow时,设置了frame为false时,就能出现无边框的electron了,但是问题是如何拖动呢?

一、css处理方式

通过给body增加-webkit-app-region属性的方式,如下

body {
    font-size: 10px;
    height: 100%;
    font-family: 'monaco';
    -webkit-app-region: drag;
}

此时,鼠标在整个界面上都可以拖动了。

那么问题又来了,此时发现,鼠标的点击事件啥的都失灵了。。

还有,双击放大的这个功能本来是任务栏上的,现在直接在body上双击下,也有了这个功能。

二、利用鼠标事件

实际上我们可以计算鼠标的位置来给窗口重新设置位置,删除前面的css样式。

注:electron+React下通信的问题请看后面的文章。 大概代码是这样的:

let dragging = false, // 表示是否在拖拽中
    mouseX = 0, // 表示鼠标x轴位置
    mouseY = 0, // 表示鼠标y轴位置
    mainWindow = window.electron.remote.getCurrentWindow();

window.addEventListener('mousedown', function(e) {
    // 提前获得位置
    mouseX = e.pageX;
    mouseY = e.pageY;
    window.addEventListener('mousemove', mousemoveFn);
});

window.addEventListener('mouseup', function(e) {
    window.removeEventListener('mousemove', mousemoveFn);
});

function mousemoveFn(e) {
    let moveX = e.pageX - mouseX,
        moveY = e.pageY - mouseY,
        pos = mainWindow.getPosition(); // 当前窗口位置
    // 重新计算
    pos[0] = pos[0] + moveX;
    pos[1] = pos[1] + moveY;
    mainWindow.setPosition(pos[0], pos[1], true); // 重新设置窗口的位置
    mouseX = e.pageX;
    mouseY = e.pageY;
}

我们通过对鼠标事件的监听以及计算,再重新设置给窗口,使得窗口与鼠标同步。

实际效果并不理想,跟随比较慢且会来回闪烁。

三、设置可拖动的区域

我们可以在title上给定一个类似于导航栏一样的长条,这块区域内设置-webkit-app-region: drag;在配置自己加上最大化,最小化,关闭事件,最大的简化并个性化自己的程序。

可以查看下我的 https://github.com/2fps/never-forget 这个项目,就是设置了个可拖拽的title区域,欢迎star。