[Flex][ActionScript]PDFビューアのようにマウスドラッグでスクロールする方法

Tweet

以下のように画像などのウィンドウ内のコンテンツをマウスでドラッグしてスクロールする方法。

Flexではこの処理が組み込まれているコンテナが無いように思う。 ということで仕方なしに自分で実装することに。

試行錯誤しながらなかなかうまくいかず、めんどくさいなぁ・・・と思ってたら、めちゃくちゃ簡単だった。 ポイントはたった１つ。

よく考えたらこれ、ドラッグじゃないじゃない

「じゃないじゃない」とかよくわからん言葉を使ってしまったが、要はドラッグではないだろう、ということ。 ドラッグってのはマウスの操作に従って、画像なりコンポーネントの座標を別の座標に変更すること。 で、よくよく考えたら、このドラッグでスクロールってのは画像の座標は変わってない。 常に (x, y) = (0, 0) のまま。

動いてるのはスクロールバーだけ

ってことだったのです。 ということがわかれば後は簡単。 以下の方針にしたがってチョコチョコっとコーディングするだけでした。

1. 画像上でのMOUSE_DOWNとMOUSE_UPのイベントを監視
2. MOUSE_DOWNするとMOUSE_MOVEのイベントの監視をスタート
3. MOUSE_MOVE時は前回のマウスカーソルの場所と、今回のマウスカーソルの位置の差（つまり移動量）を取得
4. パネルのスクロールバーの位置に上記の移動量を減算する

ポイントはスクロールバーはマウスカーソルとは反対の動きをしなくてはいけないので、移動量を加算ではなく減算するということ。 ドラッグしたまま画面からカーソルがはみ出たりした場合の処理はまだ入れてないが、そのあたりを調整すればこれで十分だと思う。

なんとなくドラッグだという固定観念から離れられずに時間を喰ってしまった。 こんなにも簡単にできるのか。コードもとっても短いです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="289" height="350" applicationComplete="init()">
    <mx:Script>
        <![CDATA[
            private var preMouseX:Number;
            private var preMouseY:Number;

            private function init():void{
                img.addEventListener(MouseEvent.MOUSE_DOWN, imageDragStart);
                img.addEventListener(MouseEvent.MOUSE_UP, imageDragEnd);
            }

            private function imageDragStart(event:MouseEvent):void{
                preMouseX = mouseX;
                preMouseY = mouseY;
                img.addEventListener(MouseEvent.MOUSE_MOVE, imageMove);
            }

            private function imageDragEnd(event:MouseEvent):void{
                img.removeEventListener(MouseEvent.MOUSE_MOVE, imageMove);
            }

            private function imageMove(event:MouseEvent):void{
                panel.horizontalScrollPosition -= mouseX - preMouseX;
                panel.verticalScrollPosition -= mouseY - preMouseY;
                preMouseX = mouseX;
                preMouseY = mouseY;
            }
        ]]>
    </mx:Script>
    <mx:Panel id="panel" x="0" y="0" width="289" height="350" layout="absolute">
        <mx:Image id="img" source="@Embed('animation.jpg')" buttonMode="true" x="0" y="0"/>
    </mx:Panel>
</mx:Application>