Flexコンポーネントのリサイズ処理
コンポーネントのリサイズ処理実装の際に参考となるサイトと実装例を挙げておきます。
リサイズ
Flex で何かと使える TitleWindow をマウスで普通のウインドウみたいにリサイズを可能にしてみた。
Flex で TitleWindow を resize 可能にする - Enjoi Blog
dragTop/dragBottom/dragLeft/dragRightでそれぞれフラグを持って処理を行っているのが特徴的。この方法なら斜めリサイズもいけます。
ただ、リサイズ時にマウスカーソルが枠外にいったときのことを考慮して、mouseUpはstageのmouseUpイベントをとった方が良さげですね。
~ Flexメモ 其の五~ UIコンポーネントをリサイズ可能にするマネージャクラス: こはるびより(別館)
UIComponentをリサイズ可能とする機能を、UIComponentを引数としたメソッドで付与しています。
この方法なら、どんなコンポーネントでも対応できますね。
マウスカーソルの変更
幅を変更する処理を作成していて、リサイズするときに
マウスカーソルを変える CursorManager | 開発日記 〜Doinet〜
マウスカーソルをこんな感じ「←||→」に変更したいと思い調べました。
...
[Embed(source="Assets.swf", symbol="mx.skins.cursor.HBoxDivider")]
private var _hDivClass:Class;
このクラスを使ってマウスカーソルを変更します。
CursorManager.setCursor(_hDivClass,CursorManagerPriority.HIGH, 0, 0);
上記を参考に、縦横リサイズ時のカーソル変更を実装しました。
斜めリサイズの場合はどうしよう。rotationプロパティを使う?無理なら独自カーソル作成か。
/** 幅変更時カーソル */ [Embed(source="Assets.swf", symbol="mx.skins.cursor.HBoxDivider")] private static var _resizeWidthClass:Class; /** 高さ変更時カーソル */ [Embed(source="Assets.swf", symbol="mx.skins.cursor.VBoxDivider")] private static var _resizeHeightClass:Class; /** * カーソルを設定する */ private function setCursor():void { if (resizeTop || resizeBottom) { //高さ変更時 CursorManager.removeCursor(CursorManager.currentCursorID); CursorManager.setCursor(_resizeHeightClass, CursorManagerPriority.HIGH, 0, 0); } else if (resizeLeft || resizeRight) { //幅変更時 CursorManager.removeCursor(CursorManager.currentCursorID); CursorManager.setCursor(_resizeWidthClass, CursorManagerPriority.HIGH, 0, 0); } else { CursorManager.removeCursor(CursorManager.currentCursorID); } }
注意点
CursorManagerとContextMenuが併用できない
Busyカーソルの親はsystemManagerのようです。
http://www.fxug.net/modules/xhnewbb/viewtopic.php?viewmode=thread&topic_id=73&forum=2&post_id=3202
systemManagerのcontextMenuを設定したら表示されました。
まさにこれにはまりました。MouseOverの際に対象オブジェクトのcontextMenuをsystemManager.contextMenuに設定する方法で回避。