缩放时上下文菜单偏离中心

Context menu off center when zoomed

本文关键字：菜单 上下文 缩放      更新时间：2023-09-26

我使用node webkit的菜单API构建了一个右键单击上下文菜单。我遇到的问题是，当我增加页面的缩放时，比如从1到1.4，上下文菜单会偏离鼠标光标的中心。还有其他人遇到过这个问题或者有解决办法吗?

我是这样生成我的菜单的:

// Load native UI library
var gui = require('nw.gui');
// Create an empty menu
var menu = new gui.Menu();
// Add some items
menu.append(new gui.MenuItem({ label: 'Item A' }));
menu.append(new gui.MenuItem({ label: 'Item B' }));
menu.append(new gui.MenuItem({ type: 'separator' }));
menu.append(new gui.MenuItem({ label: 'Item C' }));
// Remove one item
menu.removeAt(1);
// Popup as context menu
$(document).on("contextmenu", function() {
    menu.popup();
})

这里是API参考的链接:https://github.com/nwjs/nw.js/wiki/menu

我们可以针对缩放级别调整鼠标位置，基于:

  • https://github.com/nwjs/nw.js/issues/2023 issuecomment - 71005188
  • https://github.com/nwjs/nw.js/wiki/menu menupopupint-x-int-y
固定代码:

// Load native UI library
var gui = require('nw.gui');
// window (needed to get zoom level)
var win = gui.Window.get();
// Create an empty menu
var menu = new gui.Menu();
// Add some items
menu.append(new gui.MenuItem({ label: 'Item A' }));
menu.append(new gui.MenuItem({ label: 'Item B' }));
menu.append(new gui.MenuItem({ type: 'separator' }));
menu.append(new gui.MenuItem({ label: 'Item C' }));
// Remove one item
menu.removeAt(1);
// Popup as context menu
$(document).on("contextmenu", function(ev) {
    // transform zoom level into factor
    var zoomFactor = Math.pow(1.2, win.zoomLevel);
    menu.popup(
        Math.round(zoomFactor * ev.clientX),
        Math.round(zoomFactor * ev.clientY)
    );
})
相关文章：