无星的electron之旅(八)—— 坐标

329 阅读1分钟

一、背景

希望窗口从某些固定区域弹出,比如右下角(如果有自定义弹窗需求,这就很常见了)

二、如何修改弹出位置

其实非常简单

const newWindow = new BrowserWindow({
    x: 400,
    y: 400,
    width: 400,
    height: 600,
    frame: false,
    webPreferences: {
      webSecurity: false,
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      enableRemoteModule: true,
      preload: path.join(__dirname, 'preload.js'),
    },
  });

关键就是这个x,y了

1.屏幕上的坐标轴

在屏幕上的坐标轴长这样

1

把你的鼠标放到屏幕四个角落,打印一下就可以验证了

const point = screen.getCursorScreenPoint();
console.log(point);

2.啥叫主屏幕

众所周知,用户可能有两个屏幕,甚至更多。

但主屏幕都只有一个。

现在来教大家如何区分主屏幕。


mac

设置-显示器-排列

2

注意上方这个白条,有白条的显示器叫做主屏幕

windows

桌面-右键-显示设置

3

这个蓝色窗口,代表你选中的窗口信息。继续往下滚,这里哪个窗口勾选了主屏幕,哪个就是主屏幕

4


那么我们可以获取

//主屏幕
const display = screen.getPrimaryDisplay();
//当前鼠标所在屏幕
const point = screen.getCursorScreenPoint();
const display2 = screen.getDisplayNearestPoint(point);

因此,你可能还需要判断你期望的屏幕位置是否是主屏幕,是否要配合进行计算

三、非主屏幕的坐标原点不是从(0,0)开始的!请注意

把你的鼠标放到第二块屏幕上,打印一下就可以验证了

const point = screen.getCursorScreenPoint();
console.log(point);

四、额外的坑

1.注意windows可能默认存在缩放

2.注意dip的转换

参考文章

electron的Screen