0
ElectronのGithubにあるTray Window号の問題を解決します。これは、トレイの中央にウィンドウを作成する方法を示しています。その上にあるスクリーンショットの一部には、トレイウィンドウと、トレイを示す上部矢印（soなど）が表示されます。しかし、私はthisのようなものしか得ていません。Electronウィンドウで上矢印を作成するにはどうすればいいですか？
var ids = [];
const {BrowserWindow,app,Tray} = require('electron');
var trayIcon = null;
const TRAY_ARROW_HEIGHT = 50; //px
const WINDOW_WIDTH = 400;
app.on('ready', function() {
const {screen} = require('electron')
window = new BrowserWindow({
width: WINDOW_WIDTH,
height: 420,
title: 'Hello World',
resizable: true,
frame: false,
transparent: true,
show: false
});
window.loadURL(`file://${__dirname}/main.html`);
window.on('close', function() {
window = null;
});
trayIcon = new Tray('tray.png');
trayIcon.on('click', function() {
var cursorPosition = screen.getCursorScreenPoint();
window.setPosition(cursorPosition.x - WINDOW_WIDTH/2, TRAY_ARROW_HEIGHT);
window.show();
window.focus();
});
window.on('blur', function() {
window.hide();
})
});
そしてmain.htmlと：：
html class="arrow_box">
<head>
<style>
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 30px;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 36px;
margin-left: -36px;
}
</style>
</head>
<body>
<div>This should have an arrow</div>
</body>
</html>