上周黄继佳(微软中国有限公司开发和平台技术部开发合作经理)来到公司给我们开发小组做了一次技术
交流。其中主要是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
posted on 2008-04-24 13:08
代震军 阅读(3652)
评论(11) 编辑 收藏 网摘 所属分类:
VS2005silverlight