[플래시] 이미지 확대하기_zoom in

줌인을 이용해 이미지를 단계별로 확대했다,축소도하는 기능을 만들어 보려고 합니다.

나중엔 미니맵도 추가하고 ,휠 기능이나 , 단계별 버튼도 추가할거구요

이번엔 단순히 클릭지점을 중심으로잡고, 그 지점을 확대하는 기능을 알아보겠습니다.ㅎ

코드도 그렇게 많이 되지 않습니다.

간단히 살펴보겠습니다.

원본파일은 첨부해놓겠습니다.ㅎ

원리가 이미지를 클릭했을 경우 일정 비율만큼 scalex와 sc

aley를 더해 이미지 넓이와 높이가 넓어지게 합니다.

이때 클릭된 위치를 중심으로 이미지를 확대시키려면 그 넓어진 넓이 만큼 이미지를 이동시켜줘야겠죠?

그 공식이 들어간 코드입니다.

우선 이미지를 로드합니다.

로드가 완료되면 이미지를 stage에 맞게 이미지를 고정시킵니다.

이부분이 되겠죠.

imageMc.width = stage.stageWidth;

imageMc.height = stage.stageHeight;

그 축소된 이미지의 scalex와 scaley값도 저장해둡니다.

scalex = imageMc.scaleX;

scaley = imageMc.scaleY;

그리고 확대된 만큼 이미지의 위치를 이동시켜주는 코드입니다.

클릭되기전 이미지에서 클릭후 일정비율 스케일이 증가한 이미지 넓이를 구하는 코드입니다.

nextWidth = (oldWidth/scalex)*(scalex+per);

nextHeight = (oldHeight/scaley)*(scaley+per);

그후 확대될 이미지크기에서 클릭되기전 이미지의 넓이를 빼서 그 확대되는 만큼의 수치를 구합니다.

그 수치와  클릭되기전 이미지 위치와 스테이지에서 마우스가 클릭된 지점, 클릭되기전 이미지 넓이를 이용해

확대했을 경우 이미지가 이동되어야할만큼의 수치를 계산합니다.

그 계산한 수치를 현재 이미지 위치에서 빼주시면 끝! 

var xx:Number=Math.round((nextWidth-imageMc.width)*(Math.abs(imageMc.x-mouseX)/imageMc.width));

var yy:Number=Math.round((nextHeight-imageMc.height)*(Math.abs(imageMc.y-mouseY)/imageMc.height));

현재 기능은 확대되는 기능만 있기 때문에 일정 비율이 되면 처음 상태로 되돌아 가게만 해놨습니다.reset()함수

*com폴더는 fla파일과 같은 곳에 두시면 됩니다.

모바일에선 안보일 수 있습니다.ㅎ 

궁금하신 점 있으시면 질문주세요~

 zoom.zip