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 プロパティでリサイズのオン/オフができます。

解説するところが特にないほど簡単!

2 Responses to “Flex でドラッグでリサイズできる Panel を作る”

  1. DUANE Says:
    7月 7th, 2010 at 04:24


    PillSpot.org. Canadian Health&Care.Special Internet Prices.Best quality drugs.No prescription online pharmacy. Online Pharmacy. Buy drugs online

    Buy:Acomplia.Lasix.Aricept.Amoxicillin.Cozaar.Buspar.Ventolin.Prozac.Wellbutrin SR.Advair.Benicar.Nymphomax.Zocor.Lipitor.SleepWell.Lipothin.Female Cialis.Seroquel.Female Pink Viagra.Zetia.

  2. ENRIQUE Says:
    7月 16th, 2010 at 06:29


    Pillspot.org. Canadian Health&Care.Best quality drugs.Special Internet Prices.No prescription online pharmacy. No prescription drugs. Order pills online

    Buy:SleepWell.Acomplia.Wellbutrin SR.Prozac.Female Cialis.Buspar.Seroquel.Female Pink Viagra.Lipitor.Zetia.Advair.Lipothin.Lasix.Ventolin.Aricept.Benicar.Cozaar.Amoxicillin.Nymphomax.Zocor.

Leave a Reply