2015-10-01 4 views
3

Я работаю над приложением с безрамным окном и имеет элемент видео html5, который отображает веб-камеру, заполняющую document.body на 100%.Electron Resize the Frameless Window

У меня есть мой mainWindow набор для изменения размера mainWindow.isResizable(true), но я не могу изменить размер окна.

Когда я отлаживаюсь с помощью инструментов chrome dev, я могу изменить размер окна только с помощью боковых инструментов Chrome. (не уверен, что это помогает, но я разрабатываю это на дистрибутиве Linux под управлением Ubuntu 14.04 под названием Elementary OS Freya)

Может кто-нибудь объяснить, почему я не могу изменить размер моего изменяемого размера окна, хотя у меня есть мой основной набор для изменения размера ?

Кроме того, что я могу сделать для решения этой проблемы?

var app = require("app"); 
var BrowserWindow = require("browser-window"); 

var mainWindow = null; 

// Quit when all windows are closed. 
app.on("window-all-closed", function() { 
    app.quit(); 
}); 

app.on("ready", function() { 
    mainWindow = new BrowserWindow({ 
    width: 640, 
    height: 480, 
    frame: false 
    }); 
    mainWindow.loadUrl("file://" + __dirname + "/index.html"); 

    // Set Window Resizable 
    mainWindow.isResizable(true); 

    mainWindow.focus(); 
}); 

ответ

4

мне удалось выяснить, в чем проблема, и пришел узнать, не было даже Javascript проблема, Все, что я должен был сделать это мод мой CSS для того, что я хочу перетаскивать и то, что я не» т.

Поскольку мой html и body также настроены на перетаскивание, поэтому я не мог изменять размер. Вот мое решение ...

Мне пришлось сделать новый элемент (div.dialog) и заключить в него содержимое. Наряду со следующим CSS.

.dialog { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: #000; 
    background: rgba(0, 0, 0, 0.5); 
    -webkit-app-region: no-drag; 
} 
.tips { 
    position: absolute; 
    top: 4px; 
    left: 4px; 
    right: 4px; 
    bottom: 4px; 
    -webkit-app-region: drag; 
} 

HTML:

<div class="dialog" data-action="toggle"> 
    <header class="tips" data-action="toggle"> 
    <div> 
     <nav> 
     [Space] for Snapshot<br> 
     [Esc] to Close 
     <p data-action="toggle-tips">[Tab] to Toggle Dialog</p> 
     </nav> 
    </div> 
    </header> 
</div> 
+0

Спасибо. Это в основном отвечает на мой вопрос, когда вы отмечаете окно как «frame: false», а затем включаете «-webkit-app-region: drag», флаг перетаскивания отключает ручки изменения размера окна. Я надеялся, что есть еще одно решение, так как я уже разработал пользовательский интерфейс, но это только подтверждает мои подозрения, что вам нужно сделать границу «без перетаскивания», чтобы получить обратную обработку окон. –

1

Вы используете неправильный метод:

mainWindow.setResizable(false) Задает, будет ли окно можно вручную изменять размер пользователем.

mainWindow.isResizable() Возвращает логическое значение - можно ли вручную изменять размер окна пользователем.