[공지]이미지나 링크가 깨졌다면 댓글 부탁드립니다.
Flex에서 Button(
mx.controls.Button )을 다루다 보면 버튼을 임의의 각도로 회전시키고 싶은 경우가 있다. ( 굳이 Button뿐 아니라 Label, TextField와 같은 컴포넌트도 모두 마찬가지이다.)
하지만 Button의 속성값인 rotation이 0이 아닌 순간 버튼안에 글자가 사라져버린다.
영어든, 한글이든 마찬가지이다. 버튼은 내부적으로 글자를 UITextField를 addChild해서 사용하는데...
회전만 했다하면 UITextField에 label 글자 내용은 있으나 View상에서는 사라진다.
의외로 이러한 부분에 많이 어려워하시는 분들이 계셔서 도와드리는 차원에서 간단하게 컴포넌트를 만들었다.
사실 나도 Flex를 초반에 공부할 때, 이것때문에 꽤나 고생한 기억이 있다. ^^;
이 문제를 해결하기 위해서 크게 2가지 해결방법이 있다.
실제 폰트를 Embed 하는 방법 (SWF용량이 늘어나는 단점이 있음)http://blog.jidolstar.com/101 를 참고한다.
Bitmap 을 이용하는 방법(Bitmap이라 회전하면 약간 일그러지는 단점 있음) 여기서 언급하는 방법은 바로 bitmap을 이용하는 방법이다.
기본적으로 Button을 상속받아 사용했고 label과 rotation을 override시켜서 기능을 확장했다.
RotationButton.as (Language : java) package
{
import mx.controls.Button;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.AntiAliasType;
import flash.text.TextFormat;
import flash.display.BitmapData;
import flash.display.Bitmap;
import mx.core.UITextField;
import mx.events.FlexEvent;
import flash.events.MouseEvent;
public class RotationButton
extends Button {
public function RotationButton
( )
{
super ( ) ;
this .
addEventListener ( FlexEvent.
CREATION_COMPLETE , onInit
) ;
}
private function onInit
( event:FlexEvent
) :
void
{
this .
label =
super .
label ;
}
override
public function set label
( value:
String ) :
void
{
super .
label = value;
setRotationLabel
( ) ;
}
override
public function set rotation
( value:
Number ) :
void
{
super .
rotation = value;
setRotationLabel
( ) ;
}
private function setRotationLabel
( ) :
void
{
var tf:UITextField =
super .
textField ;
if ( null == tf
) return ;
var bmp:Bitmap;
bmp = Bitmap
( this .
getChildByName ( "bitmapLabel" ) ) ;
if ( null != bmp
)
{
bmp.
bitmapData .
dispose ( ) ;
this .
removeChild ( bmp
) ;
}
var bmpData:BitmapData =
new BitmapData
( tf.
width , tf.
height ,
true , 0x00CCCCCC
) ;
bmpData.
draw ( tf
) ;
bmp =
new Bitmap
( bmpData,
"auto" ,
false ) ;
bmp.
smoothing =
true ;
bmp.
name =
"bitmapLabel" ;
bmp.
x =
this .
width /
2 - tf.
width /
2 ;
bmp.
y =
this .
height /
2 - tf.
height /
2 ;
this .
addChild ( bmp
) ;
}
}
}
아래 소스는 RotationButton을 활용한 예제이다.
RotationButtonTest.mxml (Language : xml) <?xml version ="1.0" encoding ="utf-8" ?> <mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="absolute" xmlns:local ="*" creationComplete ="startTimer()" > <mx:Script> <
RotationButton.as
ㅎㅎ 텍스트 필드를 아이템화 해서 사용자가 마음대로 크기, 각도를 컨트롤 해야했었는데 이런 방법이..
100% 같은 방법이 아니었지만 저한테 맞게 응용했네요 ㅎㅎ
한수 배웠습니다! ^^
정말 오래전에 Flex공부하면서 썼던 글이네요.
이걸 보니 컴포넌트 회전시 글자가 없어지는 문제로 고민했던 적이 생각이 납니다.
다시한번 상기 시켜주셔서 감사~ ^^
블로그 잘 보고 갑니다
위의 소스 중에..
setRotationLabel () 메소드 안에
var tf:UITextField = super.textField; 이 부분에서
형변환 오류가 발생하면서 컴파일이 안되네요..?
이 코드가 Flex2 시절에 만든거라 소스가 약간 수정될 수 있습니다.
디버깅을 통해 super.textField가 null이 아니고 UITextField인지 확인해보세요.