'mask'에 해당되는 글 1건
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
prev"" #1 next

티스토리 툴바