[node-webkit] 透明視窗：陰影、拖曳

大多數的 node-webkit 程式開發者都會想用自製的視窗介面，好在 node-webkit 製作客製化視窗並不難，首先要先在 package.json 裡將視窗設定為透明：

透明視窗設定：

package.json:

{
   "main": "index.html",
   "name": "nw-demo",
   "description": "demo app of node-webkit",
   "version": "0.1.0",
   "keywords": [ "demo", "node-webkit" ],
   "window": {
      "title": "node-webkit demo",
      "icon": "icon.png",
      "toolbar": false,
      "frame": false,
      "width": 1200,
      "height": 800,
      "position": "mouse",
      "min_width": 400,
      "min_height": 200,
      "transparent": true
      }
}

網頁檔案的部分，將畫面分為 app-header 和 app-body 兩個部分，並用 app-wrapper 包起這兩個部分，在稍後的 app-wrapper 的 display 設為 table，兩個子項目設為 table-row，這樣方便讓標題列與內容區域的排版。

index.html:

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Hello</title>
   <link rel="stylesheet" type="text/css" href="appStyle.css" />
</head>
<body>

<div class="app-wrapper">
   <div class="app-header">
      <div class="app-header-title">Neri</div>
   </div>
   <div class="app-body">
      This is a transparent window!
   </div>
</div>

</body>
</html>

appStyle.css:

body {
   position: relative;
   padding: 10px;
   margin: 0px;
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
}

.app-wrapper {
   display: table;
   position: relative;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   background-color: #ccc;
   border: 1px solid #444;
   box-shadow: 0px 0px 10px rgba(0,0,0,0.6);
}

.app-header {
   display: table-row;
   height: 30px;
   background-color: #000;
   color: #fff;
   line-height: 29px;
   text-align: center;
   font-family: Arial;
   font-size: 13px;
}

.app-header-title {
   position: relative;
   -webkit-app-region: drag;
}

.app-body {
   display: table-row;
   height: 100%;
}

視窗陰影注意問題：

目前還未有原生產生視窗陰影的方法，但可以使用 css 來替代，上面的範例實作了有 10px 陰影的效果，但由於是在程式內製作的陰影，所以在陰影範圍內的滑鼠點擊，還是會算在 node-webkit 程式內，而不是使用者看到底下的程式。這是和原生視窗陰影最大的差異，所以避免將陰影範圍設定過大，否而使用者在操作上會有不良的體驗。

拖曳功能：

node-webkit 的視窗拖曳功能是靠 css 定義的，只要將視窗標題列的物件，在css加入下面這行，該物件的範圍就會成為拖曳區，程式執行後就可以按住這個物件來拖曳視窗了。

-webkit-app-region: drag;

但要注意的是，這功能會將該物件範圍內的東西都設為拖曳物件，所以如果範圍內還有其他按鈕，則必須將按鈕的 css 另外設為下方這行，否則無法正確使用，即使使用 z-index 將按鈕順序移到上方也無法。

-webkit-app-region: no-drag; // 將按鈕排除在拖曳區外

Grass Studies

搜尋此網誌