自前 Dragger #03
前回に引き続き、自前ドラック機構を用いた Flex の Tips を解説します。
お題「回転ボタン」
描画ツールの変形機能などに存在する回転ボタンですが、Flex の Panel コンポーネントを拡張して、Panel 自身がクルクル回る機能を実装してみましょう。
Panel の回転は、行列 (Matrix) を用います。マウスが移動するたびに Panel の中心座標とマウス座標の 2 点から角度を算出し、この値を基に行列変換処理を行い、Panel の transform.matrix プロパティにセットすることで実現可能です。
実装コード (RotatablePanel.as)
package jp.classmethod.sample {
import flash.events.MouseEvent;
import flash.geom.Matrix;
import flash.geom.Point;
import spark.components.Button;
import spark.components.Panel;
public class RotatablePanel extends Panel {
protected const PI:Number = Math.PI;
[SkinPart]
public var rotateButton :Button;
protected var startCenterX :int;
protected var startCenterY :int;
protected var startRadians :Number;
protected var startRotateMatrix :Matrix;
public function RotatablePanel() {
super();
minWidth = 200;
minHeight = 200;
maxWidth = 500;
maxHeight = 500;
setStyle("skinClass", RotatablePanelSkin);
}
protected override function partAdded(partName:String, instance:Object):void {
super.partAdded(partName, instance);
if(instance == rotateButton) {
rotateButton.addEventListener(MouseEvent.MOUSE_DOWN, rotateButtonMouseDownHandler);
}
}
protected function rotateButtonMouseDownHandler(event:MouseEvent):void {
var gp:Point;
var dx:int;
var dy:int
startRotateMatrix = transform.matrix;
gp = localToGlobal( new Point(width * 0.5, height * 0.5) );
startCenterX = gp.x;
startCenterY = gp.y;
dx = stage.mouseX - startCenterX;
dy = stage.mouseY - startCenterY;
startRadians = Math.atan2(dy, dx);
stage.addEventListener(MouseEvent.MOUSE_MOVE, stageRotateMouseMoveHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, stageRotateMouseUpHandler);
}
protected function stageRotateMouseMoveHandler(event:MouseEvent):void {
var dx :int = stage.mouseX - startCenterX;
var dy :int = stage.mouseY - startCenterY;
var angle :Number = Math.atan2(dy, dx) - startRadians;
var m :Matrix = startRotateMatrix.clone();
var lp :Point = globalToLocal( new Point(startCenterX, startCenterY) );
rotateAroundInternalPoint(m, width * 0.5, height * 0.5, angle);
transform.matrix = m;
event.updateAfterEvent();
}
protected function stageRotateMouseUpHandler(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, stageRotateMouseMoveHandler);
stage.removeEventListener(MouseEvent.MOUSE_UP, stageRotateMouseUpHandler);
}
protected function rotateAroundInternalPoint(m:Matrix, x:Number, y:Number, radians:Number):void {
var p:Point;
p = new Point(x, y);
p = m.transformPoint(p);
m.tx = m.tx - p.x;
m.ty = m.ty - p.y;
m.rotate(radians);
m.tx = m.tx + p.x;
m.ty = m.ty + p.y;
}
}
}
実装コード (RotatablePanelSkin.mxml)
<?xml version="1.0" encoding="utf-8"?>
<s:Skin
xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
mouseEnabled = "false"
minWidth = "131"
minHeight = "127"
alpha.disabled = "0.5"
alpha.disabledWithControlBar = "0.5"
>
<fx:Metadata>
<![CDATA[
[HostComponent("jp.classmethod.sample.RotatablePanel")]
]]>
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" stateGroups="withControls" />
<s:State name="disabledWithControlBar" stateGroups="withControls" />
</s:states>
<s:Group left="0" right="0" top="0" bottom="0">
<s:Group id="topGroupMask" left="1" top="1" right="1" bottom="1">
<s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
<s:fill>
<s:SolidColor alpha="0" />
</s:fill>
</s:Rect>
</s:Group>
<s:Group id="bottomGroupMask" left="1" top="1" right="1" bottom="1"
includeIn="normalWithControlBar, disabledWithControlBar">
<s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
<s:fill>
<s:SolidColor alpha="0" />
</s:fill>
</s:Rect>
</s:Group>
<s:Rect id="border" left="0" right="0" top="0" bottom="0" >
<s:stroke>
<s:SolidColorStroke id="borderStroke" weight="1" />
</s:stroke>
</s:Rect>
<s:Rect id="background" left="1" top="1" right="1" bottom="1">
<s:fill>
<s:SolidColor id="backgroundFill" color="#FFFFFF" />
</s:fill>
</s:Rect>
<s:Group id="contents" left="1" right="1" top="1" bottom="1">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<s:Group id="topGroup" mask="{topGroupMask}">
<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xE2E2E2" />
<s:GradientEntry color="0xD9D9D9" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xEAEAEA" />
<s:GradientEntry color="0xD9D9D9" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
<s:fill>
<s:SolidColor color="0xC0C0C0" />
</s:fill>
</s:Rect>
<s:Label
id="titleDisplay" left="9" right="3" top="1" bottom="0" minHeight="30"
maxDisplayedLines="1" verticalAlign="middle" textAlign="start" fontWeight="bold" />
</s:Group>
<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
</s:Group>
<s:Button
id="rotateButton"
width="30" height="30" bottom="0" right="0"
buttonMode="true" chromeColor="0x000099" />
</s:Group>
</s:Skin>
実装コード (Main.mxml)
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:cm = "jp.classmethod.sample.*"
backgroundAlpha = "1"
backgroundColor = "0x333333"
>
<cm:RotatablePanel width="200" height="200" verticalCenter="0" horizontalCenter="-150">
<cm:layout>
<s:VerticalLayout paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="40" />
</cm:layout>
<s:Button width="100%" height="100%" />
<s:Button width="100%" height="100%" />
<s:Button width="100%" height="100%" />
<s:Button width="100%" height="100%" />
</cm:RotatablePanel>
<cm:RotatablePanel width="200" height="200" verticalCenter="0" horizontalCenter="150">
<cm:layout>
<s:VerticalLayout paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="40" />
</cm:layout>
<s:Button width="100%" height="100%" />
<s:Button width="100%" height="100%" />
<s:Button width="100%" height="100%" />
<s:Button width="100%" height="100%" />
</cm:RotatablePanel>
</s:Application>
出力結果
出力結果は次の通り
[SWF]http://publick-blog.s3.amazonaws.com/wp-content/uploads/2011/07/DragLesson03.swf,640,480[/SWF]
