아 백만년만에 블로그 글 쓰는거 같네요~


그러므로 간단하게 ㄱㄱ



BitmapData를 동그랗게 보여주고 싶을 때


마스크는 부담스러울 때 쓸 수 있는 메소드입니다.



이런 고양이 비트맵을



이렇게 나타내줄 수 있습니다.





아래는 코드입니다.


import flash.display.Bitmap;
import flash.display.BitmapData;

var bitmap: BitmapData = new Cat;
var circleBitmap: BitmapData = copyToCircle( bitmap );

addChild( new Bitmap( circleBitmap ) );

function copyToCircle( $target: BitmapData ): BitmapData
{
     var width: int = $target.width;
     var height: int = $target.height;
     const RADIUS: int = width > height ? int( height / 2 ) : int( width / 2 );
     const DIAMETER: int = 2 * RADIUS;
     
     var data: BitmapData = new BitmapData( DIAMETER, DIAMETER );
     
     var circle: Shape = new Shape;
     circle.graphics.beginFill( 0xFF0000, 1 );
     circle.graphics.drawRect( 0, 0, DIAMETER, DIAMETER );
     circle.graphics.drawCircle( RADIUS, RADIUS, RADIUS );
     circle.graphics.endFill();
     
     data.draw( $target );
     data.draw( circle, nullnull, BlendMode.ERASE );
     
     return data;
}

원리는 draw를 해주는 두줄의 코드입니다.


data.draw( $target );


일단 복사를 한번 해주고요


미리 동그라미 모양을 Shape으로 그려놓은 다음에


data.draw( circle, null, null, BlendMode.ERASE );


BlendMode를 ERASE로 그려주면


됩니다.


※ 이때 동그라미 모양이 중요한데


반전된 동그라미 모양입니다.


사각형에서 가운데가 동그라미로 빠진 모습입니다.



이렇게요~


저 빨간 모양을 Shape으로 그려주는게 포인트인데


Shape의 Vector drawing을 이용하면 쉽습니다.


circle.graphics.drawRect( 0, 0, DIAMETER, DIAMETER );

circle.graphics.drawCircle( RADIUS, RADIUS, RADIUS );


그냥 사각형을 그려주고 그다음에 원을 그려주면


겹치는 영역은 자동으로 색이 빠져버립니다.


동그라미 두개를 겹쳐서 그리면 겹치는 부분은 색이 빠지는 것과 같은 원리입니다.




메소드 저장해놓고 ㄱㄱ~




p.s) draw 이기 때문에 sand box type에 유의해야합니다. 

저작자 표시 비영리 동일 조건 변경 허락
신고
  1. h 2012.08.28 22:31 신고

    Cat에서 문제가 생기는데요 대체 new Cat이 뭡니까?

    인스턴스 네임입니까?

    • Favicon of http://wooyaggo.tistory.com 우야꼬  2012.08.29 23:40 신고

      이미지 Linkage 네임이에요~
      라이브러리에 이미지 추가 하신 다음에 Liknage 명을 Cat으로 지정해주심 되여

+ Recent posts

티스토리 툴바