본문 바로가기

silverlight

Coposition에서의 ViewPort, AspectRatio, 좌표계, ElementalPoint, LogicalPoint

AspectRatio
MultiScaleImage 의 Source Image의 가로 세로 비율.
the width of the image divided by its height. ( 이미지의 가로를 세로로 나눈 )
Readonly Property.    

AspectRatio Property의 활용 : ?  

ViewPort
ViewPort 란 MultiScaleImage Control의 Source Image를 보는 창이다.
(Source Image의 특정 영역을 보는 데 사용하는 사각형 영역) Source Image를 삼차원으로 다루는 하나의 방식이라고 생각할 수 있다.

ViewPort 를 제어 할 수 있는 Property로 ViewportWidth와 ViewportOrigin 가 있다.
ViewportWidth property는 크기를, ViewportOrigin property는 위치를 제어한다.

ViewportWidth
Default로 ViewPort는 MultiScaleImage컨트롤의 크기와 같지만, ViewportWidth property를 통해 변경 할 수도 있다.
ViewportWidth property(double value)를 1.0로 설정하면, ViewPort는 MultiScaleImage control과 동일한 크기가 된다.
ViewportWidth property를 1.0보다 크게 변경하면, MultiScaleImage control 보다 사이즈가 더 커지고, 이것은 사용자가 볼 때는 Source Image를 축소한 것과 같은 효과를 보인다.
반대로 ViewportWidth property를 1.0보다 작게 변경하면, MultiScaleImage control 보다 사이즈가 더 작아지고, 사용자가 볼 때는 Source Image를 확대한 것과 같은 효과를 보이게 된다.

ViewportOrigin
ViewportOrigin property는 ViewPort의 최상단 좌측의 좌표이다.   

좌표계
좌표계란 어떤 공간 내의 한 점의 위치를 기준점(원점)과 비교하여 거리를 설명하는 방법을 말한다.
MultiScaleImage Control에서 좌표를 표현하는 방법은 ElementPoint와 LogicalPoint 두 가지가 있다.


ElementPoint
ElementPoint는 컨트롤의 좌측 최상단을 원점으로 하여,
임의의 지점을 X(수평), Y(수직) Point로 하여 X,Y를 픽셀로 표시하는 것을 말한다.
예를 들어, Width, Height 가 각각 500, 300 인 MultiScaleImage Control이 있다면,
MultiScaleImage Control 내 임의의 지점의 ElementPoint는 위 그림과 같이 (300, 150) 이다.

LogicalPoint
LogicalPoint는 컨트롤의 좌측 최상단(0,0)을 원점으로 하고,
컨트롤의 Width, Height 를 각각 1이라고 정의 한 뒤 임의의 지점을
0과 1사이의 논리적인 좌표로 표시하는 것을 말한다. (LogicalPoint를 논리 좌표계라고 한다.)
 
ElementPoint 의 예와 같은 MultiScaleImage Control의 임의의 지점을 LogicalPoint로 표시한다면,
그림과 같이 (0.6, 0.5)가 된다. 
   
MultiScaleImage Control은 ElementPoint와 LogicalPoint의 좌표 시스템을 상호 변환하는 함수를 제공한다.
ElementToLogicalPoint : ElementPoint를 LogicalPoint로 변환
LogicalToElementPoint : LogicalPoint를 ElementPoint로 변환 

두 함수를 반드시 숙지해야 하는 이유는, MultiScaleImage Control 의 Source Image를 축소, 확대 할 경우와,
축소, 확대 시 어떤 부분의 Source Image를 축소, 확대할 것인지를 선택하는데 중요하기 때문이다.

MultiScaleImage Control 을 제외한 대부분의 Silverlight Control은 ElementLogical을 사용한다.
예를 들어, Mouse Point 지점을 축소, 확대 하고자 한다면,
MultiScaleImage Control 상의 Mouse Point (ElementPoint)를 Logical Point로 변환 한 뒤,
ZoomAboutLogicalPoint 메서드의 파라미터 인자로 넘겨야 한다.
(ZoomAboutLogicalPoint는 MutiScaleImage Control 의 함수이며, 축소, 확대할 것인지와, 축소 또는 확대할 지점을 LogicalPoint로 받아서 처리한다.)

'silverlight' 카테고리의 다른 글

Style 정의하기  (0) 2009.06.16
VisualStateManager  (0) 2009.06.15
Storyboard (Animation in Silverlight)  (0) 2009.06.15
Layout Panel #5 (WrapPanel)  (0) 2009.06.12
Layout Panel #4 (DockPanel)  (0) 2009.06.12
Layout Panel #3 (StackPanel)  (0) 2009.06.12
Layout Panel #2 (Grid)  (0) 2009.06.11
Layout Panel #1 (Canvas)  (0) 2009.06.11
Deepzoom Composer로 Export 된 결과물  (0) 2009.06.09
Deepzoom  (0) 2009.06.09