electron如何设置无边框和透明窗口

设置无边框窗口,只需要加一个属性:frame,把frame属性设为false
例子如下:

const {app,BrowserWindow} = require('electron');

function createWindow(){
   win = new BrowserWindow({
    frame:false,
    width:800,
    height:600,
    webPreferences: {
        nodeIntegration: true
    }
   });
   win.loadFile('index.html');
   win.on('closed',()=>{
    console.log('closed');
    win = null;
   });
}

app.allowRendererProcessReuse = true;
app.on('ready',createWindow);
app.on('window-all-closed',()=>{
    console.log('window-all-closed');
    if(process.platform != 'darwin'){
        app.quit();
    }
});
app.on('activate',()=>{
    console.log('activate');
    if(win == null) {
        createWindow();
    }
});

设置透明窗口,只需要加一个属性:transparent,把transparent属性设为true
例子如下:

const {app,BrowserWindow} = require('electron');

function createWindow(){
   win = new BrowserWindow({
    transparent:true,
    frame:false,
    width:800,
    height:600,
    webPreferences: {
        nodeIntegration: true
    }
   });
   win.loadFile('index.html');
   win.on('closed',()=>{
    console.log('closed');
    win = null;
   });
}

app.allowRendererProcessReuse = true;
app.on('ready',createWindow);
app.on('window-all-closed',()=>{
    console.log('window-all-closed');
    if(process.platform != 'darwin'){
        app.quit();
    }
});
app.on('activate',()=>{
    console.log('activate');
    if(win == null) {
        createWindow();
    }
});

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: