Flex でドラッグでリサイズできる Panel を作る
Flex で mx.containers.Panel クラスを拡張してリサイズ可能なパネルを作ります。
Mac OS X のようにウィンドウの右下でのみリサイズできるように実装してみます。
完成形はこんな感じ。
This movie requires Flash Player 10
ソースは以下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | package jp.playwell.containers { import flash.display.Graphics; import flash.display.Sprite; import flash.events.MouseEvent; import flash.geom.Rectangle; import mx.containers.Panel; public class ResizablePanel extends Panel { protected var resizeHandle:Sprite; public function ResizablePanel() { super(); } //-------------------------------------- // resizable //-------------------------------------- private var _resizable:Boolean = true; [Bindable] [Inspectable(category="General", enumeration="true,false", defaultValue="true")] /** * resizable プロパティが true の場合、リサイズできます。 * @default true */ public function get resizable():Boolean { return _resizable; } public function set resizable(value:Boolean):void { _resizable = value; invalidateDisplayList(); } //-------------------------------------- // protected methods //-------------------------------------- override protected function createChildren():void { super.createChildren(); if (!resizeHandle) { resizeHandle = new Sprite(); resizeHandle.alpha = 0.6; // ドラッグハンドルを描画 var g:Graphics = resizeHandle.graphics; g.beginFill(0xFFFFFF, 0.0); g.drawRect(0, 0, 15, 15); g.endFill(); g.lineStyle(0, 0x111111); g.moveTo(3, 14); g.lineTo(14, 3); g.moveTo(7, 14); g.lineTo(14, 7); g.moveTo(11, 14); g.lineTo(14, 11); g.lineStyle(0, 0xFFFFFF); g.moveTo(4, 14); g.lineTo(14, 4); g.moveTo(8, 14); g.lineTo(14, 8); g.moveTo(12, 14); g.lineTo(14, 12); rawChildren.addChild(resizeHandle); resizeHandle.addEventListener(MouseEvent.MOUSE_DOWN, resizeHandle_mouseDownHandler); } } override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); resizeHandle.visible = resizable; resizeHandle.x = unscaledWidth - resizeHandle.width; resizeHandle.y = unscaledHeight - resizeHandle.height; } //-------------------------------------- // ドラッグ処理 //-------------------------------------- private var dragData:Rectangle; private function resizeHandle_mouseDownHandler(event:MouseEvent):void { dragData = new Rectangle(stage.mouseX, stage.mouseY, unscaledWidth, unscaledHeight); stage.addEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler); stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMoveHandler); } private function stage_mouseUpHandler(event:MouseEvent):void { dragData = null; stage.removeEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler); stage.removeEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMoveHandler); } private function stage_mouseMoveHandler(event:MouseEvent):void { if (!resizable) return; var w:Number = dragData.width + stage.mouseX - dragData.x; var h:Number = dragData.height + stage.mouseY - dragData.y; width = Math.min(maxWidth, Math.max(minWidth, resizeHandle.width, w)); height = Math.min(maxHeight, Math.max(minHeight, resizeHandle.height, h)); } } } |
いろいろ実装のやり方はあると思うけどかなりシンプルな方法でやってみました。
resizable プロパティでリサイズのオン/オフができます。
解説するところが特にないほど簡単!
Categories: Flex 3
2 Responses to “Flex でドラッグでリサイズできる Panel を作る”
-
DUANE Says:
7月 7th, 2010 at 04:24Buy:Acomplia.Lasix.Aricept.Amoxicillin.Cozaar.Buspar.Ventolin.Prozac.Wellbutrin SR.Advair.Benicar.Nymphomax.Zocor.Lipitor.SleepWell.Lipothin.Female Cialis.Seroquel.Female Pink Viagra.Zetia.
-
ENRIQUE Says:
7月 16th, 2010 at 06:29Buy:SleepWell.Acomplia.Wellbutrin SR.Prozac.Female Cialis.Buspar.Seroquel.Female Pink Viagra.Lipitor.Zetia.Advair.Lipothin.Lasix.Ventolin.Aricept.Benicar.Cozaar.Amoxicillin.Nymphomax.Zocor.
