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

    Nov

    8

    Canvas 组件不能将 BitmapData 实例作为 backgroundImage 样式属性值,是因为在AS3中,setStyle() 和 getStyle() 方法都是基于CSS的,而CSS中只能使用URL、URI、数字、字符串、字体等值,无法使用字节数据值。而BitmapData是一种字节数据值类型,所以无法使用。

    但 Canvas 继续自 Sprite类,所以每个Canvas 实例与 Sprite 的实例一样都带有 graphics 属性实例作,graphics 属性实例因为可以使用 beginBitmapFill() 方法,所以可以将 BitmapData 间接的填充到Canvas 的 backgroundImage 样式属性中。在 beginBitmapFill() 方法中,可以使用一个Matrix类的实例矩阵变形来模似 Canvas 组件中的 backgroundSize 样式属性。

    以下为一个样例代码: 

    var canvas:Canvas=new Canvas();
    canvas.width=500;
    canvas.height=500;
    var matrix:Matrix = new Matrix();
    matrix.scale(canvas.width/bitmapData.width,canvas.height/bitmapData.height);
    canvas.graphics.clear();
    canvas.graphics.beginBitmapFill(bitmapData,matrix,true,true);
    canvas.graphics.drawRect(0,0,canvas.width,canvas.height);
    canvas.graphics.endFill();