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




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

maskDisplayObject 의 속성으로 mask로 할당된 DisplayObject 의 영역만큼만 해당 컴포넌트를 보여주게 됩니다.
나머지는 화면에 나타나지 않게 되죠. 아래는 레퍼런스에 있는 마스크 예제입니다.
 
 

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


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

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

 UIComponent Inheritance FlexSprite Inheritance Sprite Inheritance DisplayObjectContainer Inheritance InteractiveObject Inheritance DisplayObject

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


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


 


결과물은 myCircleCanvas 객체에 Button을 올려놓은 모습입니다.
둥근 mask 영역 밖으로 벗어나는 Button의 영역은 화면에서 나타나지 않음을 확인하실 수 있습니다.
이상 mask를 이용하여 둥근 컴포넌트를 생성하는 것에 대해 간단하게 다루어 보았습니다.
신고
Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 | 2008.05.14 01:39 신고 | PERMALINK | EDIT/DEL | REPLY
좋은 팁입니다. ^^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.14 01:44 신고 | PERMALINK | EDIT/DEL
태일러님이 카페에 질문해놓으셨길래요 ㅋㅋ
마스크가 있는 줄은 알고 있었는데 이렇게 쓸 수 있을 줄은 저도 몰랐습니다. ㅋ
덕분에 저도 하나 배웠음.!
후니 | 2008.05.14 11:40 신고 | PERMALINK | EDIT/DEL | REPLY
요즘도 2시까지 하는 거삼 ㅋㅋ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.14 13:13 신고 | PERMALINK | EDIT/DEL
넵. 너무 노는거 같아서 다시 공부중 ㅋ
시드 | 2008.05.14 13:17 신고 | PERMALINK | EDIT/DEL | REPLY
너무 졸려요~ -_ㅠ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.14 13:57 신고 | PERMALINK | EDIT/DEL
그럼 자...
잘 자~
박스농사 | 2008.05.15 08:55 신고 | PERMALINK | EDIT/DEL | REPLY
여기 낙서장 아니였나요?
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.15 09:28 신고 | PERMALINK | EDIT/DEL
낙서해놓은거 안보이세요?
아델 | 2008.07.23 13:12 신고 | PERMALINK | EDIT/DEL | REPLY
여기 검쉰님 블로그네~
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.23 14:50 신고 | PERMALINK | EDIT/DEL
그렇죠~ 제 블로그입니다 ㅋ
Favicon of http://butterguy.tistory.com BlogIcon 버터백통 | 2008.07.30 17:07 신고 | PERMALINK | EDIT/DEL | REPLY
오 그렇군요~~잘보고 갑니다~~
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.30 21:41 신고 | PERMALINK | EDIT/DEL
방문 감사합니다. ;)
Favicon of http://reikop.raony.net/blog BlogIcon reikop | 2009.06.23 15:02 신고 | PERMALINK | EDIT/DEL | REPLY
명품 예제네요 감사합니다. ^^
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.06.24 11:21 신고 | PERMALINK | EDIT/DEL
방문 감사드립니다 ;)
| 2010.05.07 03:32 | PERMALINK | EDIT/DEL | REPLY
비밀댓글입니다
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2010.05.07 11:20 신고 | PERMALINK | EDIT/DEL
방문 감사드립니다. 위의 코드를 보시면 마스크를 원형으로 그렸을뿐, 어떠한 모양으로 그리더라도 상관은 없습니다. 그림의 패스를 어떻게 그리냐가 중요하죠.
이미지또한 마스크로 사용가능 합니다.
http://www.cynergysystems.com/blogs/blogs/andrew.trice/masks/masks.html
여기를 참고해보시면 좋겠네요 ;)

아마 위의 링크로 해결가능할 것 같습니다만, 혹 안되신다면 제가 네이트온은 현 사무실에서 사용이 안되어서, 가능하시면 gtalk 으로 연결 부탁드릴께요. 주소는 프로필 사진 아래에 있습니다 ;)
| 2010.05.11 04:38 | PERMALINK | EDIT/DEL | REPLY
비밀댓글입니다
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2010.05.11 09:23 신고 | PERMALINK | EDIT/DEL
네~ 추가하였습니다 ;)
좋은 하루되세요! ^^
택이 | 2016.01.04 16:13 | PERMALINK | EDIT/DEL | REPLY
관리자의 승인을 기다리고 있는 댓글입니다
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2007.12.04 10:33
왜 Sprite는 Canvas에 addChild 안되는 걸까요?

- Sprite는 무엇인가요?

먼저 Sprite는 무엇인지 잘 모르는 분들을 위해 설명을 곁들여보죠.
ActionScript 3 에서는 Sprite Class라 불리우는 새로운 Class를 사용하게 되는데... Sprite Object는 Movie Clip과 유사합니다만, Timeline이 없다는 것이 큰 차이점입니다. Sprite는 timeline을 요구하진 않는 곳에서 쓰일 수 있는 적합한 Base Class 입니다.


물론, Sprite를 FLEX에서 사용하고 싶다면 UIComponent에 addChild  하여서 사용하면 됩니다. (참고 : 지돌스타님 블로그)

하지만, UIComponent를 상속하고 있는 Canvas에는 왜 addChild가 되지 않는가 하는 것이 이 글의 주요 주제죠.


- Sprite을 Canvas에 addChild 하면 ?

여기서 분명한 것은 Sprite를 Canvas에 addChild하면
"TypeError: Error #1034: 유형 강제 변환에 실패했습니다. flash.display::Sprite@45cd351을(를) mx.core.IUIComponent(으)로 변환할 수 없습니다."
라고 컴파일시에 Error가 난다는 겁니다.

오류가 난 곳을 따라가보면 Canvas가 상속하고 있는 Container 클래스의 addingChild 메소드에서 나는 것을 알 수 있습니다.
 override mx_internal function addingChild(child:DisplayObject):void
 {
        // Throw an RTE if child is not an IUIComponent.
      var uiChild:IUIComponent = IUIComponent(child);  // 이 줄에서 오류가 납니다.
        ...
}


IUIComponent 타입인지 확인하고 있는데, Sprite는 IUIComponent type이 아니기때문에 오류가 나고 있는 것입니다.


- IUIComponent는 무엇인가요?

그럼 IUIComponent는 무엇일까요?
클래스 안에 있는 주석으로 다음과 같이 설명되고 있습니다.

 The IUIComponent interface defines the basic set of APIs that you must implement to create a child of a Flex container or list.

FLEX의 Visual Component의 기본은 UIComponent 입니다.
IUIComponent 인터페이스는 이 UIComponent 가 구현하고 있는 인터페이스로서 위의 설명에 따르면,
Flex의 Container 나 List의 child들은 IUIComponent 인터페이스를 구현하고 있어야 된다고 합니다.
(아니면 위 에러메세지 처럼 IUIComponent 타입이 아니라서 오류나죠 ㅡㅂㅡ)


- 그렇다면 Canvas는?

 Canvas Inheritance Container Inheritance UIComponent Inheritance FlexSprite Inheritance Sprite Inheritance DisplayObjectContainer Inheritance InteractiveObject Inheritance DisplayObject Inheritance EventDispatcher Inheritance Object
인용 : Flexdocs.kr

위의 관계대로 만들어진 Canvas에는 IUIComponent가 구현된(다시 말해 UIComponent를 상속받는) 클래스들은
모두 addChild 될 수 있으나 그렇지 않은 클래스는 addChild 되지 못하게 됩니다.
Sprite는 IUIComponent 인터페이스를 구현하고 있지 않으므로
Container에는 addChild 할 수 없는 것입니다.




- Tip

Sprite를 Canvas 같은 Container 에 추가하여야 하는 일이 생긴다면 아래와 같이 클래스 만드셔서 addChild 하셔도 괜찮을 것 같네요. :)

package
{
    import flash.display.Sprite;
    import mx.core.UIComponent;

    public class mySprite extends UIComponent
    {
        private var sprite:Sprite;
 
        public function mySprite()
        {
             super();
   
             sprite = new Sprite();
         }
 
        override protected function createChildren():void
        {
            super.createChildren();
   
            this.addChild(sprite);
        }
        .....
    }
}

참고자료 :
[팁] Sprite 사용법
Flex 2 Beta 3 : Sprites

신고
Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 | 2007.12.10 09:59 신고 | PERMALINK | EDIT/DEL | REPLY
잘 읽었습니다. Canvas가 Sprit를 직접 올릴 수 없게 하는 이유를 나름대로 생각해보면
Sprit는 UIComponent가 기본적으로 가지는 CSS라든가 Canvas에서 Child에 접근할 때 공통적으로 접근하는 method가 정의되어 있지 않아서가 아닌가 싶습니다. 즉 IUIComponent로 Casting하는 절차가 바로 그것을 확인하는 작업이겠지요.
정확한 분석이 따라야 하지만 지금 생각에는 그럴 것 같다는 생각이 강하게 드는군요. ^^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2007.12.10 14:15 신고 | PERMALINK | EDIT/DEL
각 컴포넌트들이 구현하는 interface 에 대해서 자세히 알고 싶어지네요 ^^;
Favicon of http://blog.naver.com/eirene78 BlogIcon 에이레네 | 2008.01.30 11:35 신고 | PERMALINK | EDIT/DEL | REPLY
Canvas는 컨테이너 클래스를 상속했죠 ^^ UIComponent의 addChild 메소드는 기본적으로 대상이 Sprite를 상속한 클래스인데
컨테이너 클래스는 addChild 부분을 오버라이드하면서 대상을 IUIComponent 인터페이스를 구현한 클래스로 바꾸어 버렸더랬습니다;; 그래서 Canvas에는 Sprite를 addChild할 수가 없게 됐죠;;; 대신 이렇게 해서 좋아진 것은 Canvas의 numChildren에는 항상 UIComponent를 확장한 클래스 인스턴스들만 들어가게 되었다는;;; 또 Canvas의 rawChildren.addChild(new Sprite()); 하시면 여전히 Canvas에 Sprite를 추가하는 것도 가능합니다^^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.01.30 11:48 신고 | PERMALINK | EDIT/DEL
아하~ ^^
좋은 덧글 감사합니다. ;)
박스농사 | 2008.07.31 16:21 신고 | PERMALINK | EDIT/DEL | REPLY
사진바꼇네? 이제 사람좀 된듯
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.31 16:57 신고 | PERMALINK | EDIT/DEL
넌 애니메이션이자나.....ㅋ
Favicon of http://cyworld.com/aqua_mir BlogIcon 물빛미르 | 2009.12.15 11:15 신고 | PERMALINK | EDIT/DEL | REPLY
감사합니다... 족보를 알아야만 하는 문제였군요... 역시 초보는 배울게 많네요 ^^;
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
prev"" #1 next

티스토리 툴바