MultiScaleImage의 SubImages 배치변경

Deepzoom에서도 SubImages의 배치를 변경하는 기능을 구현 해 보려고 합니다.

Deepzoom 을 원하는 만큼 제어할 수 있도록 하려면 ViewportWidth, ViewportOrigin, AspectRatio, Logical Point, Element Point 에 관한 이해를 먼저 하셔야 합니다.

도움이 되실 지 모르겠지만, 제가 포스팅 했던 글을 참조 해 보시기 바랍니다.

2009/06/10 - [Image/Deepzoom] - Coposition에서의 ViewPort, AspectRatio, 좌표계, ElementalPoint, LogicalPoint

---

그럼 기능 구현을 해보겠습니다.
Deepzoom Composer를 통해 이미지 피라미드를 구성하게 되면, Export 된 폴더에 이미지 피라미드 폴더와 dzc_output.xml 파일이 있습니다. Deepzoom Composer를 통해 배치 된 SubImages 의 ViewportOrigin 정보가 dzc_output.xml 에 포함 되 있습니다.
 

  <?xml version="1.0" encoding="utf-8" ?>
- <Collection MaxLevel="8" TileSize="256" Format="jpg" NextItemId="15" xmlns="http://schemas.microsoft.com/deepzoom/2008">
- <Items>
- <I Id="0" N="0" Source="dzc_output_images/humpback%20whale.xml">
  <Size Width="1024" Height="768" />
  <Viewport Width="5.455" X="-1.1" Y="-3.3299999999999996" />
  </I>
   .
   .
   .

바로 I 엘리먼트의 Viewport 엘리먼트 내 X, Y attribute입니다. Point(X, Y)가 ViewportOrigin 이 되는 것이죠.

dzc_output2.xml 이란 파일을 하나 추가하시고, 각 SubImage의 ViewportOrigin을 변경합니다. (저는, Deepzoom Composer를 이용해서 배치만 바꿔서 Export해서 사용했어요. 처음 MutiScaleImage의 Source가 될 dzc_output.xml 파일 외엔 원하시는 파일명으로 하셔도 됩니다.)
그런 후에, 사용자의 Action에 대한 Event로 다른 형태로 배치 될 xml 파일을 읽어 와서 각 SubImage의 ViewportOrigin을 변경 해 주면 됩니다. WebClient class 등을 이용해서 받으시고, xml파일에서 필요한 부분(ViewportOrigin = Point(X, Y))을 가지고 계셔야겠죠^^ (저는 ItemInfo 라는 클래스를 만들어서 xml 파일에서 필요한 부분을 관리 했습니다.)
 

private void arrange()
{
    int index = 0;
    foreach (var kvp in this.itemsInfo)
    {
        Storyboard sb = new Storyboard();
        PointAnimation pAni = new PointAnimation();
        pAni.From = this.myMSI.SubImages[index].ViewportOrigin;
        pAni.To = kvp.Value.ViewportOrigin;
        pAni.Duration = new Duration(new TimeSpan(0, 0, 1));
        sb.Children.Add(pAni);

#if Back
BackEase easing = new BackEase() { EasingMode = EasingMode.EaseInOut };
#endif
#if Bounce
BounceEase easing = new BounceEase() { EasingMode = EasingMode.EaseInOut };
#endif
#if Cubic
CubicEase easing = new CubicEase() { EasingMode = EasingMode.EaseInOut };
#endif
#if Elastic
ElasticEase easing = new ElasticEase() { EasingMode = EasingMode.EaseInOut };
#endif
#if Exponential
ExponentialEase easing = new ExponentialEase() { EasingMode = EasingMode.EaseInOut };
#endif
#if Power
PowerEase easing = new PowerEase() { EasingMode = EasingMode.EaseInOut };
#endif
#if Quadratic
QuadraticEase easing = new QuadraticEase() { EasingMode = EasingMode.EaseInOut };
#endif
#if Quartic
QuarticEase easing = new QuarticEase() { EasingMode = EasingMode.EaseInOut };
#endif
#if Quintic
QuinticEase easing = new QuinticEase() { EasingMode = EasingMode.EaseInOut };
#endif
#if Sine
SineEase easing = new SineEase() { EasingMode = EasingMode.EaseInOut };
#endif
        pAni.EasingFunction = easing;
        Storyboard.SetTarget(pAni, this.myMSI.SubImages[index++]);
        Storyboard.SetTargetProperty(pAni, new PropertyPath("ViewportOrigin"));
        sb.Begin();
    }
}

수정 될 ViewportOrigin을 바로 바꿔주면, 아무런 퍼포먼스 없이 배치가 변경 되기 때문에, 동적으로 Storyboard를 만들어서 약간의 효과를 입혔습니다. 덤으로 Silverlight3 에 추가 된 EasingFunction도 테스트 해 봤습니다. ㅎ 위 코드에서 보시는 바와 같이, 각각의 SubImage의 이전 ViewprtOrigin에서(PointAnimation.From) 새로 변경 될 ViewportOrigin(PointAnimation.To)로 1초 동안(Duration) 이동하는 Animation이 보여지게 됩니다. (#if #endif 부분은 EasingFunction 을 Test 해보려고 짠 코드라서 무시하시면 됩니다)