[공지]이미지나 링크가 깨졌다면 댓글 부탁드립니다.
Flex 기본 Canvas 컴포넌트안에 추가된 Image를 scale할 경우 아래 프로그램에서 Sample 1을 선택해서 Scale하면 볼 수 있듯이 상좌측을 기준으로 정렬되어 확대/축소되는 것을 볼 수 있다.
때로는 Canvas의 중심을 기준으로 확대/축소를 할 수 있는데 Canvas의 validateDisplayList()를 override해서 horizontalPosition과 verticalPosition 값을 알맞게 조정하면 되겠다.
Box의 horizontalAlign, verticalAlign속성을 쓰면 Image Canvas내에 원하는 기준점으로 정렬에서 확대/축소 시킬 수 있겠다. (Sample 2, 3, 4 참고)
소스
확장한 Canvas소스 (Language : java) package com.
ticore .
uicomponents { import flash.geom.*; import mx.containers.Canvas; public class MyCanvas
extends Canvas { public function MyCanvas
( ) { super ( ) ;
} override
public function validateDisplayList
( ) :
void { var centerPercentX:
Number =
0 ;
var centerPercentY:
Number =
0 ;
if ( maxHorizontalScrollPosition >
0 ) { centerPercentX = horizontalScrollPosition / maxHorizontalScrollPosition;
} else { centerPercentX =
0.5 ;
} if ( maxVerticalScrollPosition >
0 ) { centerPercentY = verticalScrollPosition / maxVerticalScrollPosition;
} else { centerPercentY =
0.5 ;
} super .
validateDisplayList ( ) ;
if ( maxHorizontalScrollPosition >
0 ) { horizontalScrollPosition = maxHorizontalScrollPosition * centerPercentX;
} if ( maxVerticalScrollPosition >
0 ) { verticalScrollPosition = maxVerticalScrollPosition * centerPercentY;
} } } } Application소스 (Language : xml) <?xml version ="1.0" encoding ="utf-8" ?> <mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" xmlns:comp ="com.ticore.uicomponents.*" width ="100%" height ="100%" layout ="vertical" backgroundColor ="#E0E0E0" themeColor ="#000000" fontSize ="11" > <mx:Script> <![CDATA[ </mx:Script> <mx:ApplicationControlBar dock ="true" > <mx:LinkBar width ="100%" dataProvider ="{viewStack}" /> </mx:ApplicationControlBar> <mx:ViewStack id ="viewStack" width ="100%" height ="100%" > <mx:VBox width ="100%" height ="100%" label ="Sample 1" > <mx:Label text ="Align Top-Left & Zooming by Top-Left" /> <mx:Canvas borderColor ="#808080" borderStyle ="inset" width ="100%" height ="100%" > <mx:Image source ="{img}" scaleX ="{zoomSlider.value}" scaleY ="{zoomSlider.value}" /> </mx:Canvas> </mx:VBox> <mx:VBox width ="100%" height ="100%" label ="Sample 2" > <mx:Label text ="Align Top-Left & Zooming by Center" /> <comp:MyCanvas borderColor ="#808080" borderStyle ="inset" width ="100%" height ="100%" clipContent ="true" > <mx:Image source ="{img}" scaleX ="{zoomSlider.value}" scaleY ="{zoomSlider.value}" /> </comp:MyCanvas> </mx:VBox> <mx:VBox width ="100%" height ="100%" label ="Sample 3" > <mx:Label text ="Align Center & Zooming by Center" /> <comp:MyCanvas borderColor ="#808080" borderStyle ="inset" width ="100%" height ="100%" clipContent ="true" > <mx:Box width ="100%" height ="100%" horizontalAlign ="center" verticalAlign ="middle" > <mx:Image source ="{img}" scaleX ="{zoomSlider.value}" scaleY ="{zoomSlider.value}" /> </mx:Box> </comp:MyCanvas> </mx:VBox> <mx:VBox width ="100%" height ="100%" label ="Sample 4" > <mx:Label text ="Align Center & Zooming by Center" /> <comp:MyCanvas borderColor ="#808080" borderStyle ="inset" width ="100%" height ="100%" clipContent ="true" > <mx:Image source ="{img}" verticalCenter ="0" horizontalCenter ="0" scaleX ="{zoomSlider.value}" scaleY ="{zoomSlider.value}" /> </comp:MyCanvas> </mx:VBox> </mx:ViewStack> <mx:HSlider id ="zoomSlider" width ="100%" liveDragging ="true" labels ="['0.1x', '3x','6x']" tickValues ="[0.1, 1, 2, 3, 4, 5, 6]" value ="0.3" minimum ="0.1" maximum ="6" tickInterval ="1" /> </mx:Application>
출처 :
http://ticore.blogspot.com/2008/01/flex-skill-zoom-by-center.html 글쓴이 : 지돌스타(
http://blog.jidolstar.com/284 )
크리에이티브 커먼즈 라이선스
Adobe Flash Platform Canvas ,
flex ,
validateDisplayList
FlexZoomCenter.zip
좋은 소스 감사드립니다.
질문이 있는데요~ 이거 크기를 확대시키면 나타나는 스크롤바가 어느 정도
확대시키고 스크롤바를 최대로 올리면 이미지 윗부분과 옆부분이 짤려서
더이상 스크롤바가 올라가지 않는데 해결할 방법이 없을까요?
답변 좀 부탁드려요~ 감사합니다~
여러가지 방법이 있을 수 있겠습니다.
Canvas에 Image를 직접 올리지 않고
Image 크기와 좌우스크롤크기부분의 영역이 추가된 UIComponent에 Image를 addChild하면 될 것 같습니다.
즉 UIComponent의 setActualSize( image.width+vscroll.width, image.height+hscroll.height )
식으로 만들고 그 UIComponent에 addChild(image)를 하면 해결이 될 듯 합니다.