[Flex] Mask 를 이용한 둥근 컴포넌트 만들기

Canvas에 cornerRadius="20" 을 주어서 테두리를 라운드하게 변환한다고 하더라도, 자식 객체인 Button이 라운드 처리된 영역을 빠져나가면 아래와 같이 Button이 라운드 처리된 영역을 빠져나와있는 것을 보실 수 있습니다.

<mx:Canvas width="113" height="107" horizontalCenter="0" verticalCenter="0" backgroundColor="#FFFFFF" cornerRadius="20" borderStyle="solid" > <mx:Button label="Button" width="70" height="70" x="-3" y="-7"/> </mx:Canvas>

라운드로 처리하더라도 벗어나는 자식객체가 문제가 됩니다.
그렇다면, 만약에 컴포넌트가 원형이어야 된다면 어떨까요? 라운드 처리된 곳도 빠져나가는데, 원형의 컴포넌트가 필요하다면?
원형을 벗어나는 영역은 화면에서 나타나지 않게 하면 간단하게 해결 할 수 있습니다. 이럴 때 mask를 쓰면 됩니다.

mask는 DisplayObject 의 속성으로 mask로 할당된 DisplayObject 의 영역만큼만 해당 컴포넌트를 보여주게 됩니다.
나머지는 화면에 나타나지 않게 되죠. 아래는 레퍼런스에 있는 마스크 예제입니다.
 package { import flash.display.Sprite; import flash.events.MouseEvent; import flash.text.TextField; public class maskExample extends Sprite { private var tf:TextField; private var square:Sprite; public function maskExample() { tf = new TextField(); tf.text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, " + "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. " tf.selectable = false; tf.wordWrap = true; tf.width = 150; addChild(tf); // TextField 추가 square = new Sprite(); square.graphics.beginFill(0xFF0000); square.graphics.drawRect(0, 0, 40, 40); // 네모형태로 그리기 addChild(square); // 마스크용 Sprite 추가 tf.mask = square; // TextField의 마스크를 square로 설정 tf.addEventListener(MouseEvent.MOUSE_DOWN, drag); tf.addEventListener(MouseEvent.MOUSE_UP, noDrag); // 마스크 움직일 수 있도록 설정 function drag(event:MouseEvent):void { square.startDrag(); // 마스크 움직이기 } function noDrag(event:MouseEvent):void { square.stopDrag(); // 마스크 멈추기 } } } }

 

▲ 네모난 mask를 Drag 해보세요. mask 영역만큼만 TextField가 보입니다.

그럼 위에서 보신 mask를 이용하여 Canvas를 상속받은 myCircleCanvas라는 이름의 둥근 컴포넌트를 만들도록 하겠습니다.
위의 소스에서는 mask를 Sprite 객체를 이용하였습니다만, Flex에서는 Canvas에 Sprite 객체를 addChild 하면 오류가 나므로(Canvas가 상속하고 있는 Container에 addChild 시 IUIComponent가 구현되어있어야 하므로), UIComponent를 이용하도록 하겠습니다.

( 참고: 왜 Sprite는 Canvas에 addChild 안되는 걸까요? )

 UIComponent FlexSprite Sprite DisplayObjectContainer InteractiveObject DisplayObject

레퍼런스에서 마스크로 사용하였던 Sprite 나 현재 mask로 사용하는 UIComponent는
둘 다 DisplayObject를 상속하고 있으므로 mask 로 할당하여도 됩니다.

아래는 myCircleCanvas 클래스의 코드입니다.
컴포넌트의 구분을 위해 결과물에는 backgroundColor 값을 주었습니다.

package { import flash.events.MouseEvent; import mx.containers.Canvas; import mx.core.UIComponent; public class myCircleCanvas extends Canvas { private var circleMask:UIComponent; // 마스크용 UIComponent public function myCircleCanvas() { super(); circleMask = new UIComponent(); this.addEventListener(MouseEvent.MOUSE_DOWN, drag); this.addEventListener(MouseEvent.MOUSE_UP, noDrag); // 컴포넌트 드래그해서 움직이게 함. (너무 소스가 허전해서 넣었;;) } override protected function createChildren():void { super.createChildren(); this.addChild(circleMask); //마스크를 추가 } override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); /* * 컴포넌트의 크기변화에 따라 mask도 크기 변하도록 제어 */ circleMask.graphics.clear(); circleMask.graphics.beginFill(0xFF0000); circleMask.graphics.drawCircle(unscaledWidth>>1, unscaledHeight>>1, unscaledWidth>>1); //마스크를 원형으로 그림 this.mask = circleMask; // 마스크 설정 } private function drag(evt:MouseEvent):void { this.startDrag(); // 움직이게 } private function noDrag(evt:MouseEvent):void { this.stopDrag(); // 그만 움직이게 } } }

 

결과물은 myCircleCanvas 객체에 Button을 올려놓은 모습입니다.
둥근 mask 영역 밖으로 벗어나는 Button의 영역은 화면에서 나타나지 않음을 확인하실 수 있습니다.
이상 mask를 이용하여 둥근 컴포넌트를 생성하는 것에 대해 간단하게 다루어 보았습니다.