About

<#TEMPLATE_INCLUDE_NINEPAGE_ABOUTME#>
  • Mar

    27

    Flash Pro CSx 版本的 fl.containers.ScrollPane 组件有一个 scrollDrag,通过这个属性可以设置滚动窗格中内容是否允许被拖动,但 Flex 内置的一些容器组件(比如 Canvas 、Box、 VBox、HBox 等)并不支持这个属性,也没对应的功能,需要自定义类才能实现。下面样例代码让自定义的 Canvas 子类实现窗格中内容可拖动能(其它容器也一样通用):

    package {
        import flash.events.Event;
        import flash.events.MouseEvent;
        import mx.containers.Canvas;
        import mx.core.mx_internal;

        use namespace mx_internal;

        public class PanCanvas extends Canvas {

            private var orgX:Number;
            private var orgY:Number;
            private var orgHScrollPosition:Number;
            private var orgVScrollPosition:Number;
            private var _childrenDoDrag:Boolean = true;

            public function get childrenDoDrag():Boolean {
                return this._childrenDoDrag;
            }

            public function set childrenDoDrag(value:Boolean):void {
                this._childrenDoDrag = value;
            }

            override protected function createChildren():void {
                super.createChildren();
                this.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
            }

            protected function startDragging(event:MouseEvent):void    {
                if(event.target.parent == this.verticalScrollBar ||    event.target.parent == this.horizontalScrollBar) {
                    return;
                }

                if(_childrenDoDrag || event.target == this) {
                    orgX = event.stageX;
                    orgY = event.stageY;


                    orgHScrollPosition = this.horizontalScrollPosition;
                    orgVScrollPosition = this.verticalScrollPosition;


                    systemManager.addEventListener(MouseEvent.MOUSE_MOVE    , systemManager_mouseMoveHandler, true);
                    systemManager.addEventListener(MouseEvent.MOUSE_UP        , systemManager_mouseUpHandler, true);
                    systemManager.stage.addEventListener(Event.MOUSE_LEAVE    , stage_mouseLeaveHandler);
                }
            }

            private function systemManager_mouseMoveHandler(event:MouseEvent):void {
                //event.stopImmediatePropagation();
                this.verticalScrollPosition = orgVScrollPosition - (event.stageY - orgY);
                this.horizontalScrollPosition = orgHScrollPosition - (event.stageX - orgX);
            }

            private function systemManager_mouseUpHandler(event:MouseEvent):void {
                if (!isNaN(orgX)){
                    stopDragging();
                }
            }

            private function stage_mouseLeaveHandler(event:Event):void {
                if (!isNaN(orgX)){
                    stopDragging();
                }
            }

            protected function stopDragging():void {
                systemManager.removeEventListener(MouseEvent.MOUSE_MOVE        , systemManager_mouseMoveHandler, true);
                systemManager.removeEventListener(MouseEvent.MOUSE_UP        , systemManager_mouseUpHandler, true);
                systemManager.stage.removeEventListener(Event.MOUSE_LEAVE    , stage_mouseLeaveHandler);
                orgX = NaN;
                orgY = NaN;
            }
         }
    }

    Nov

    28

    扩展任意一个 Flex 现有容器类(Canvas、Box、HBox、VBox等),可实现容器内容拖动的功能(类似 Flash 中的 ScrollPane 组件中将 scrollDrag 属性设为 true 值的效果) 。以 Canvas 为例扩展:

    类下载:PanCanvas.as