如何在 Electron 中跟踪 BrowserWindow 的拖动？

Question

我有一个 BrowserWindow 的实例。我想知道何时在屏幕上拖动/移动窗口。

我尝试过使用移动事件，但该事件仅在窗口移动后才会触发。拖动窗口时不会触发。

如何跟踪窗口何时被拖动？

Answer 1

我遇到了同样的问题，我用另一种方式解决了它。 我创建了一个无框架的 BrowserWindow，并使用我想要的图标和我想要在此窗口中加载的网页中的侦听器创建了我的“系统栏”。

这很好用，而且不贵。

    let wX;
    let wY;
    let dragging = false;
    $('#systembar').mousedown(function (e) {
        ipcRenderer.send('asynchronous-message', 'down')
        dragging = true;
        wX = e.pageX;
        wY = e.pageY;
    });

    $(window).mousemove(function (e) {
        e.stopPropagation();
        e.preventDefault();
        if (dragging) {
            var xLoc = e.screenX - wX;
            var yLoc = e.screenY - wY;

            try {
                remote.BrowserWindow.getFocusedWindow().setPosition(xLoc, yLoc);
            } catch (err) {
                console.log(err);
            }
        }
    });

    $('#systembar').mouseup(function () {
        dragging = false;
        ipcRenderer.send('asynchronous-message', 'up')
    });

Answer 2

每当窗口移动一个像素时，就会发出BrowserWindow 的move（和moved）事件。如果窗口被拖动和移动，则move 事件将持续触发，直到鼠标停止。

当检测到move 时，您可以获得窗口的位置

let position = window.GetPosition();
let x = position[0];
let y = position[1];

然后根据需要使用那些位置

Answer 3

Electron API 似乎没有在拖动过程中提供对实际窗口位置的跟踪。

但是，您可以在可拖动的窗口区域中在 mousedown 期间跟踪鼠标光标的移动，而不是尝试跟踪窗口本身的新位置。

代码大纲：

• 检测拖动事件
• 检查拖动事件是否在拖动区域范围内
• 使用mousemove 事件跟踪鼠标光标移动

Answer 4

您可以运行一个循环不断检查window.screenX 或window.screenY 值是否已更改。以下内容：

function onScreenMove(cb) {

    var lastScreenX;
    var lastScreenY;

    function detectScreenMove() {
        if (lastScreenY !== window.screenY || lastScreenX !== window.screenX) {
            lastScreenY = window.screenY;
            lastScreenX = window.screenX;
            cb();
        }
        requestAnimationFrame(detectScreenMove);
    }
    requestAnimationFrame(detectScreenMove);
}

onScreenMove(function() {
    // do something
});

据我所知，读取screenX/screenY 值的过程并不昂贵，因此您不会杀死处理器。

不幸的是，Object.observe() 自 v50 起已离开 Chrome，因此似乎没有更“隐藏”的方式来检查 window 属性更改。