サイズ変更可能なウィンドウの作成方法(2)

このページではドラッグすることによってウィンドウサイズの変更が可能な
WindowResizerアイテムの設定方法について説明します。

このページで使用するファイルについて
このページでの説明に使うサンプルフェイスは↓のzipファイルに入っています。
resize_test2.zip
このフェイスは前ページで使った、サイズ変更可能なフェイスとほぼ同じ内容ですが
WindowResizerアイテムを削除してあります。
(つまり、初期状態ではサイズ変更操作可能な領域は設定していません)
このページ内のini記述例を参考に、WindowResizerアイテムを追加してみて下さい。

前ページのものと同じくiniを編集する際には、iniファイル内の一番下の、
;ここから
の行の下以降にフィールドを追加していってください。


WindowResizerアイテムの設定方法

TypeWindowResizerを指定した画像アイテムを用意します。
ドラッグ操作が必要になるため、必ずEnable = Trueに設定してください。

[Resizer01]
Category = DynamicImage
Type = WindowResizer
TopLeftAnchor = BottomRight, -30, -30
BackgroundColor = 0xFFFF0000
Width = 20
Height = 20
Enable = True

上のように、WindowResizerのアイテムの表示位置は
必ずTopLeftAnchorキーで表示位置を指定してください。
TopLeftAnchorキーに指定された原点(基準位置)でドラッグ時のリサイズ方向を決定します。
原点がウィンドウ四隅(TopLeftTopRightBottomLeftBottomRight)に
指定されているときだけサイズ変更アイテムとして動作します。

記述したTopLeftAnchorキーが、
  • TopLeft(左上)を原点としたTopLeftAnchorキーであれば左上方向に
  • TopRight(右上)を原点としたTopLeftAnchorキーであれば右上方向に
  • BottomLeft(左下)を原点としたTopLeftAnchorキーであれば左下方向に
  • BottomRight(右下)を原点としたTopLeftAnchorキーであれば右下方向に
それぞれ、サイズを変更することができます。

上の例では、BottomRightを原点としたTopLeftAnchorキーなので
右下方向にウィンドウのサイズ変更ができます。

このため、ウィンドウ左上端に配置するWindowResizerのアイテムは、
PosXPosYキーではなく
(左上端に寄せるからといってPosXPosYキー省略(両方とも0扱い)で配置するのではなく)
TopLeftAnchorキーをTopLeftに原点を指定して作成してください。
左上端に配置する場合は
TopLeftAnchor = TopLeft, 0, 0
になります。

なお、通常はWindowResizerのアイテムはウィンドウ四隅や端に配置するのが基本ですが
ウィンドウ端から離れた位置に配置してもかまいません。
ウィンドウ内ならどこに配置しても「ドラッグでサイズ変更可能な領域」になります。
(広げられる方向は上記のとおり、TopLeftAnchorキーに指定した原点によって変わります)

現在のuLilithの仕様では、上下・左右各2方向のみ(幅のみ・高さのみ)のサイズ変更には対応していません。
必ず「上下左右4方向にドラッグできる(幅と高さを両方変更できる)サイズ変更アイテム」になります。
なので、通常の場合はWindowResizerのアイテムはウィンドウの四隅のみに配置するといいでしょう。
ウィンドウ上下左右の辺の部分にもWindowResizerのアイテムを配置してしまうと、
クリックした時のウィンドウの大きさや、TopLeftAnchorキーの指定内容にもよりますが、
辺の部分をクリックした時に、急にウィンドウサイズが大きく変化してしまう
(マウスでクリックした地点に急にウィンドウの角部分が移動してくる)おそれがあります。

左右(横)・上下(縦)のみにサイズ変更させたい場合は、
[Preference]フィールドに記述するMaxWidthキー・MaxHeightキーで
幅・高さのどちらか変更させないほうの最大サイズを
キャンバスサイズと同じサイズに指定することで対処してください。
なお、縦または横のみにサイズ変更する場合は、サイズを変更する方向の辺の部分のみであれば
(横のみにサイズ変更する場合は左辺・右辺、縦のみにサイズ変更する場合は上辺・下辺のみに)
WindowResizerのアイテムを追加で配置しても問題はありません。


マウスカーソルについて

Type = WindowResizerのアイテムは
アイテムにマウスオーバー/クリックしたときに
自動的にマウスカーソルが四隅のサイズ変更用のカーソル
(斜めに傾いた両方向の矢印   か   )になります。
フェイス自体のリサイズ可能な幅(高さ)を制限して
左右(上下)のみにサイズ変更するようにした場合でも、
カーソルはこの四隅用のカーソルのままになっていますので
MouseCursorキーで表示するカーソルを変更し、
SizeWEを指定して左右の矢印カーソル   にしてください。(上下   ならSizeNSになります)

MouseCursorキーで指定できるカーソルは以下のとおりです。
(Windows標準の白い矢印カーソル   の場合。
  カーソルが環境によって違う場合もあるので
  Windowsのコントロールパネル、マウスのプロパティの設定画面でのカーソル設定名も併記しておきます。)
MouseCursorの値   マウスのプロパティの
カーソル設定名
   MouseCursorの値   マウスのプロパティの
カーソル設定名
Normal 通常の選択 Help ヘルプの選択
Finger リンクの選択 Size 移動
Arrow 通常の選択 SizeNWSE 斜めに拡大/縮小 1
IBeam テキスト選択 SizeNESW 斜めに拡大/縮小 2
Wait 待ち状態 SizeWE 左右に拡大/縮小
Cross 領域選択 SizeNS 上下に拡大/縮小
UpArrow 代替選択 TopLeftResizer 斜めに拡大/縮小 1
No 利用不可 TopRightResizer 斜めに拡大/縮小 2
Hand リンクの選択 BottomLeftResizer 斜めに拡大/縮小 2
AppStarting バックグラウンドで
作業中
BottomRightResizer 斜めに拡大/縮小 1

MouseCursorの値   マウスのプロパティの
カーソル設定名
備考
Auto リンクの選択 WindowResizerアイテム以外
斜めに拡大/縮小 1 左上・右下のWindowResizerアイテム
斜めに拡大/縮小 2 右上・左下のWindowResizerアイテム
MouseCursorキーが省略された場合はAutoを指定した状態になります。

また、Windowsで現在使用中のカーソル以外にも
外部のカーソルファイルを使用することができます。
画像ファイルを置くのと同じように、使用したいカーソルの*.curファイルを
フェイスフォルダ内の適当な位置に置いた上で
MouseCursorキーに*.curのファイル名を指定してください。

なお、MouseCursorキーはWindowResizer以外でも
Enable = Trueのアイテムなら使用可能です。


ドラッグ領域を広げる方法

Type = WindowResizerはウィンドウ四隅の画像アイテムに設定するのが基本ですが、
画像のないDynamicImageアイテムにも設定できます。
四隅の画像部分が小さい場合
WindowResizerをこの四隅の画像アイテムに設定するのではなく
[Resizer02]
Category = DynamicImage
Type = WindowResizer
TopLeftAnchor = BottomRight, -30, -30
DisableRegion = True
Width = 30
Height = 30
Enable = True
Priority = 10
上記の記述例のような
  • DisableRegionキーをTrueに設定してある
  • BackgroundColorを省略(=0x00000000(透明)に指定)している
  • 他のアイテムよりもPriorityキーの数値を高く設定してある
透明なWindowResizerアイテムを追加すると
サイズ変更操作可能なドラッグ領域を大きめにとることができます。
(上の記述例ではウィンドウ右下に30px × 30pxのドラッグ領域を設定しています。)

なお、DisableRegionキーが有効でも
ウィンドウの角が丸まっていたりして透明部分がある場合は
その部分をクリックしてもサイズ変更はできません。
(ウィンドウの角で、画像がない部分は
  uLilithのウィンドウとして認識されないためクリックできなくなっています)
最終更新:2013年06月02日 13:06