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

Question

我使用 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 参考文献的 link：https://github.com/nwjs/nw.js/wiki/menu

Answer 1

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

固定代码：

// 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)
    );
})

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

Context menu off center when zoomed

javascript

css

node-webkit