뷰티솔루션 테크닉 : BitmapData를 이용한 아웃마스크 구현

아이디어

 

     플래시에서 많이 사용하는 기술중에 하나가 마스크 기법이다. 마스크 기법이란 선택영역을 제외한 나머지

     영역을 숨기는 기술이다. 즉 선택된 곳만 보이게 된다. 그런데 생각을 바꿔서 선택된 영역만 사라지게

     하려면 어떻게 해야할까? 회사에서 근무할 때 '뷰티솔루션' 관련 사이트를 알게됐었는데, taaz라는 사이트에서

     그러한 기술을 적용해서 사용하고 있었다. 그 당시 2명이서 감당하기엔 기술력이나 인력이 너무 부족해서 잠시
     보류해 뒀었다, 하지만 꼭 구현해 보고 싶었던 마음의 여운이 남아서 틈틈히 연구를 계속했었는데,

     이제야 뭔가 결과물이 나온거 같아 소개한다.

 

     기본 아이디어는 대상( 큰원 )이 있고, 마스크( 작은원 )를 클릭한 후 드래그 해서 큰원 위쪽 영역으로 올려 놓으면,

     마스크영역 만큼 큰원영역이 사라지게 하는게 포인트다. 마우스업을 할 때 적용된다. 적용된 최종상태는

     마스크영역과 겹친 대상 배경의 그레이원{ 크기: 100, 알파: 0.1, 설명 : 배경과 구분용 }영역이 보이게 된다.

 

구성

 

     대상( 빨간원{ 크기: 100 } ),
     대상배경( 그레이원{ 크기: 100, 알파: 0.1, 설명 : 배경과 구분용 }),
     마스크( 그레이원{ 크기: 80, 알파: 0.8 }),
     마스크외각라인({ 크기: 80 })

 

알고리즘

 

     1. 대상객체( A 클래스 )와 마스크객체( B 클래스 )를 생성한다.( 이하 A와 B라 표현한다 )

     2. B를 MOUSE_DOWN해서 MOUSE_MOVE( 드래그 )해서 위치를 이동시킨다.

     3. MOUSE_UP할 때 A와 B를 각각 위치를 설정하고 BitmapData로 변환한다.

     4. canvas 라는 BitmapData를 생성하고 A와 B를 다시 합쳐서 그려준다.

     5. canvas에서 B의 Shape영역을 setPixel32로 투명하게 처리한다.

 

최종구현