初尝Deep Zoom Composer

      上周黄继佳(微软中国有限公司开发和平台技术部开发合作经理)来到公司给我们开发小组做了一次技术
交流。其中主要是silver2.0 beta的新特性的介绍和演示。其中的Deep Zoom Composer的演示给我留
下了深刻印象。当然大家可以从他本人的BLOG上了解更多的相关信息。而本文就是通过他在BLOG上的介绍
自己动手演练的一个成果。注（本文所用图片系本人宝宝照片）
     
     当然本文只是初步功能的演示，相信园子里也有人做了这方面的介绍了。所以这里就不多说什么了。

    本文中的C#源码是在网上找到的，因为有一定的通用性，所以这里就直接使用了。
  
    相关代码如下:

  1      public   partial   class  Page : UserControl
  2      {
  3        Point lastMousePos = new Point();
  4
  5        bool mouseButtonPressed = false;
  6        bool mouseIsDragging = false;
  7        Point dragOffset;
  8        Point currentPosition;
  9
 10        public Page()
 11        {
 12            InitializeComponent();
 13            deepZoomObject.MouseMove += delegate(object sender, MouseEventArgs e)
 14            {
 15                if (mouseButtonPressed)
 16                {
 17                    mouseIsDragging = true;
 18                }
 19                lastMousePos = e.GetPosition(deepZoomObject);
 20            };
 21
 22            deepZoomObject.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
 23            {
 24                mouseButtonPressed = true;
 25                mouseIsDragging = false;
 26                dragOffset = e.GetPosition(this);
 27                currentPosition = deepZoomObject.ViewportOrigin;
 28            };
 29
 30            deepZoomObject.MouseLeave += delegate
 31            {
 32                mouseIsDragging = false;
 33            };
 34
 35            deepZoomObject.MouseLeftButtonUp += delegate
 36            {
 37                mouseButtonPressed = false;
 38                if (mouseIsDragging == false)
 39                {
 40                    if ((Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift)
 41                    {
 42                        Zoom(0.5, lastMousePos);
 43                    }
 44                    else
 45                    {
 46                        Zoom(2, lastMousePos);
 47                    }
 48
 49                }
 50                else
 51                {
 52                    mouseIsDragging = false;
 53                }
 54            };
 55
 56            deepZoomObject.MouseMove += delegate(object sender, MouseEventArgs e)
 57            {
 58                if (mouseIsDragging)
 59                {
 60                    Point newOrigin = new Point();
 61                    newOrigin.X = currentPosition.X - (((e.GetPosition(deepZoomObject).X - dragOffset.X) / deepZoomObject.ActualWidth) * deepZoomObject.ViewportWidth);
 62                    newOrigin.Y = currentPosition.Y - (((e.GetPosition(deepZoomObject).Y - dragOffset.Y) / deepZoomObject.ActualHeight) * deepZoomObject.ViewportWidth);
 63                    deepZoomObject.ViewportOrigin = newOrigin;
 64                }
 65            };
 66
 67            new MouseWheelHelper(deepZoomObject).Moved += delegate(object sender, MouseWheelEventArgs e)
 68            {
 69                e.Handled = true;
 70                if (e.Delta > 0)
 71                {
 72                    Zoom(1.2, lastMousePos);
 73                }
 74                else
 75                {
 76                    Zoom(.80, lastMousePos);
 77                }
 78            };
 79
 80            KeyDown += delegate(object sender, KeyEventArgs e)
 81            {
 82                Point p = new Point((deepZoomObject.Width / 2),
 83                                    ((deepZoomObject.Width / deepZoomObject.AspectRatio) / 2));
 84
 85                switch (e.Key)
 86                {
 87                    case Key.I:
 88                    case Key.C:
 89                    case Key.Add:
 90                        Zoom(1.1, p);
 91                        break;
 92                    case Key.O:
 93                    case Key.Space:
 94                    case Key.Subtract:
 95                        Zoom(0.9, p);
 96                        break;
 97                    case Key.Left:
 98                    case Key.A:
 99                        deepZoomObject.ViewportOrigin = new Point(deepZoomObject.ViewportOrigin.X
100                             - (0.1 * deepZoomObject.ViewportWidth), deepZoomObject.ViewportOrigin.Y);
101                        break;
102                    case Key.Right:
103                    case Key.D:
104                        deepZoomObject.ViewportOrigin = new Point(deepZoomObject.ViewportOrigin.X +
105                             (0.1 * deepZoomObject.ViewportWidth), deepZoomObject.ViewportOrigin.Y);
106                        break;
107                    case Key.Up:
108                    case Key.W:
109                        deepZoomObject.ViewportOrigin = new Point(deepZoomObject.ViewportOrigin.X,
110                             deepZoomObject.ViewportOrigin.Y - (0.1 * deepZoomObject.ViewportWidth));
111                        break;
112                    case Key.Down:
113                    case Key.S:
114                        deepZoomObject.ViewportOrigin = new Point(deepZoomObject.ViewportOrigin.X,
115                             deepZoomObject.ViewportOrigin.Y + (0.1 * deepZoomObject.ViewportWidth));
116                        break;
117                    case Key.R:
118                        ArrangeIntoGrid();
119                        break;
120                    default:
121                        break;
122                }
123            };
124        }
125
126        private void Zoom(double zoom, Point pointToZoom)
127        {
128            if ((zoom >= 1.0 && deepZoomObject.ViewportWidth > 0.05) || (zoom < 1.0 && deepZoomObject.ViewportWidth < 2))
129            {
130                Point logicalPoint = deepZoomObject.ElementToLogicalPoint(pointToZoom);
131                deepZoomObject.ZoomAboutLogicalPoint(zoom, logicalPoint.X, logicalPoint.Y);
132            }
133        }
134
135        //
136        // A small example that arranges all of your images (provided they are the same size) into a grid
137        //
138        private void ArrangeIntoGrid()
139        {
140            List<MultiScaleSubImage> randomList = RandomizedListOfImages();
141            int numberOfImages = randomList.Count;
142
143            int totalImagesAdded = 0;
144
145            int totalColumns = (int)Math.Sqrt(numberOfImages) + 1;
146            int totalRows = numberOfImages / (totalColumns - 1);
147
148            for (int col = 0; col < totalColumns; col++)
149            {
150                for (int row = 0; row < totalRows; row++)
151                {
152                    if (numberOfImages != totalImagesAdded)
153                    {
154                        MultiScaleSubImage currentImage = randomList[totalImagesAdded];
155
156                        Point currentPos = currentImage.ViewportOrigin;
157                        currentImage.ViewportWidth = totalColumns;
158                        Point futurePosition = new Point(-1.2 * col, -1.6 * row);
159
160                        // Set up the animation to layout in grid
161                        Storyboard moveStoryboard = new Storyboard();
162
163                        // Create Animation
164                        PointAnimationUsingKeyFrames moveAnimation = new PointAnimationUsingKeyFrames();
165
166                        // Create Keyframe
167                        SplinePointKeyFrame startKeyframe = new SplinePointKeyFrame();
168                        startKeyframe.Value = currentPos;
169                        startKeyframe.KeyTime = KeyTime.FromTimeSpan(TimeSpan.Zero);
170
171                        startKeyframe = new SplinePointKeyFrame();
172                        startKeyframe.Value = futurePosition;
173                        startKeyframe.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1));
174
175                        KeySpline ks = new KeySpline();
176                        ks.ControlPoint1 = new Point(0, 1);
177                        ks.ControlPoint2 = new Point(1, 1);
178                        startKeyframe.KeySpline = ks;
179                        moveAnimation.KeyFrames.Add(startKeyframe);
180
181                        Storyboard.SetTarget(moveAnimation, currentImage);
182                        Storyboard.SetTargetProperty(moveAnimation, "ViewportOrigin");
183
184                        moveStoryboard.Children.Add(moveAnimation);
185                        deepZoomObject.Resources.Add(moveStoryboard);
186
187                        // Play Storyboard
188                        moveStoryboard.Begin();
189
190                        totalImagesAdded++;
191                    }
192                    else
193                    {
194                        break;
195                    }
196                }
197            }
198
199
200        }
201
202        private List<MultiScaleSubImage> RandomizedListOfImages()
203        {
204            List<MultiScaleSubImage> imageList = new List<MultiScaleSubImage>();
205            Random ranNum = new Random();
206
207            // Store List of Images
208            foreach (MultiScaleSubImage subImage in deepZoomObject.SubImages)
209            {
210                imageList.Add(subImage);
211            }
212
213            int numImages = imageList.Count;
214
215            // Randomize Image List
216            for (int i = 0; i < numImages; i++)
217            {
218                MultiScaleSubImage tempImage = imageList[i];
219                imageList.RemoveAt(i);
220
221                int ranNumSelect = ranNum.Next(imageList.Count);
222
223                imageList.Insert(ranNumSelect, tempImage);
224
225            }
226
227            return imageList;
228        }
229    }
230

   
    下面就是演示效果截图：
   


    点击其中某个图像之后的效果:
    

    再放大后的效果:


  
    相关工具:  
    Deep Zoom Composer 使用截图：
   

   
   
    相关的源码 下载

    Deep Zoom Composer 下载
 

    其它相关链接:
    黄继佳blog : http://blogs.msdn.com/jijia
 
    DeepZoom 演示：
    1. Hard Rock(Deep Zoom)     http://memorabilia.hardrock.com/
    2. 台湾博物院(目前在大陆无法访问)     http://learnet.npm.gov.tw/silverlight