初尝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 使用截图：
  
  相关的源码 http://www.cnblogs.com/Files/daizhj/DeepZoomCollectionTest.rar
  
  Deep Zoom Composer http://www.cnblogs.com/Files/daizhj/DeepZoomCollectionTest.rar