通常はメモ帳などのアプリケーションと同じタイトルバー付きのウィンドウになりますが、Window.create()のオプションでスタイルを指定する事で、枠のないウィンドウやタスクバーに表示されないウィンドウなども作れます。
今回は、これらのオプションを駆使してデスクトップ上に字幕を表示させる例を紹介します。
下記のようなスクリプトで、上の画像の「Warning!!」の部分のようなテキストを表示させられます。
var win=require('Window').Window.create({
isPopupWindow:true,hasTickFrame:false,hasBorder:false,hasDlgFrame:false,
toolWindow:true,
topmost:true,
transparent:true,
transparentColor:0xFF01FF,
alpha:196,
width:0,height:0,
children:{ie:{type:require('ATL').Trident,top:0,left:0,right:0,bottom:0}},
});
win.resize(800,120,true).moveToCenter();
win.ie.update('<body style="margin:0;background-color:#FF01FF;overflow:hidden;text-align:center; font-size:96px;color:#FF0000;">Warning!!</body>');
win.show();
sleep(3000);
win.close();
オプションの1行目の4つの項目は、タイトルバーやウィンドウ周辺の枠を無くすオプションです。余計な物をなるべく表示させたくないときに利用するといいでしょう。「toolWindow」は、タスクバー上にボタンを表示しないようにするするオプションです。
これらのオプションを指定すると、通常の方法ではウィンドウを閉じられなくなるので、必要に応じてウィンドウを隠したり閉じたりする処理を用意してください。
「topmost」は、ウィンドウを常に最前面に表示させるオプションです。アクティブウィンドウの上に表示させたい場合などに指定します。
「transparent」はクリックなどを下のウィンドウに透過させるオプションです。主にtopmostと組み合わせて使います。クリックして操作する必要のない情報表示用ウィンドウで、誤ってクリックして操作の妨げとなることを防ぎたい場合などに指定するといいでしょう。
「transparentColor」はウィンドウ上の特定の色の部分を完全に透明にするオプションです。字幕などを表示するときは、このオプションで背景を透過させます。透過色は「0xRRGGBB」の形式の数値で指定します。本来透過させるつもりでない部分に使われている色と被ってしまわないように、なるべく使われなさそうな色を指定します。
また、「alpha」では、透過色以外のウィンドウ全体の不透明度を0～255の数値で指定できます。ゼロに近いほど透明になります。
ウィンドウの大きさを指定する「width」と「height」は、作成オプションでは両方ゼロにしておき、後から「resize()」で適当な大きさにしています。これは、たまに透過指定した背景色が描画されていない状態で一瞬だけ表示されてしまうことがあるのを防ぐためです。なお、「moveToCenter()」は、ウィンドウを画面中央に位置するように移動するメソッドです。
ウィンドウ内に配置するコントロールを定義する「children」では、背景色や文字スタイルなどを柔軟に指定できるように、ウィンドウ全体にIEコンポーネントを配置することにします。
IEコンポーネント上に表示する内容は、後の「win.ie.update()」で指定します。ここでは、body要素のstyle属性で文字のスタイルや背景色を指定したり、マージンやスクロールバーなどを削除しています。背景色には、transparentColorで指定したのと同じ色を指定します。
body要素内のHTMLには、今回は単なるテキストを指定しましたが、HTMLで装飾を加えたりしてもよいでしょう。ただし、スタイルシートの透過機能などで背景色と混じった部分は透過されなくなってしまうので注意してください。
0 件のコメント:
コメントを投稿