上周黄继佳(微软中国有限公司开发和平台技术部开发合作经理)来到公司给我们开发小组做了
次技术交流
其中主要是silver2.0 beta
新特性介绍和演示其中Deep Zoom Composer演示给我留下了深刻印象
当然大家可以从他本人BLOG上了解更多相关信息而本文就是通过他在BLOG上介绍自己动手演练
个成果注(本文所用图片系本人宝宝照片)当然本文只是初步功能
演示
相信园子里也有人做了这方面介绍了所以这里就不多说什么了本文中
C#源码是在网上找到
有定通用性所以这里就直接使用了相关代码如下:
1 public partial 
Page : UserControl
2 {
3 Po
lastMousePos = 
Po
;
4
5 bool mouseButtonPressed = false;
6 bool mouseIsDragging = false;
7 Po dragOff
;
8 Po currentPosition;
9
10 public Page
11 {
12 InitializeComponent;
13 deepZoomObject.MouseMove 
delegate(object sender, MouseEventArgs e)
14 {
15 
(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 dragOff = 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 (mouseIsDragging 
false)
39 {
40 ((Keyboard.Modiers & ModierKeys.Sht) ModierKeys.Sht)
41 {
42 Zoom(0.5, lastMousePos);
43 }
44 
45 {
46 Zoom(2, lastMousePos);
47 }
48
49 }
50
51 {
52 mouseIsDragging = false;
53 }
54 };
55
56 deepZoomObject.MouseMove delegate(object sender, MouseEventArgs e)
57 {
58 (mouseIsDragging)
59 {
60 Po Origin = Po;
61 Origin.X = currentPosition.X - (((e.GetPosition(deepZoomObject).X - dragOff.X) / deepZoomObject.ActualWidth) * deepZoomObject.ViewportWidth);
62 Origin.Y = currentPosition.Y - (((e.GetPosition(deepZoomObject).Y - dragOff.Y) / deepZoomObject.ActualHeight) * deepZoomObject.ViewportWidth);
63 deepZoomObject.ViewportOrigin = Origin;
64 }
65 };
66
67 MouseWheelHelper(deepZoomObject).Moved delegate(object sender, MouseWheelEventArgs e)
68 {
69 e.Handled = true;
70 (e.Delta > 0)
71 {
72 Zoom(1.2, lastMousePos);
73 }
74
75 {
76 Zoom(.80, lastMousePos);
77 }
78 };
79
80 KeyDown delegate(object sender, KeyEventArgs e)
81 {
82 Po p = Po((deepZoomObject.Width / 2),
83 ((deepZoomObject.Width / deepZoomObject.AspectRatio) / 2));
84
85 switch (e.Key)
86 {
87 
Key.I:
88 Key.C:
89 Key.Add:
90 Zoom(1.1, p);
91 
;
92 Key.O:
93 Key.Space:
94 Key.Subtract:
95 Zoom(0.9, p);
96 ;
97 Key.Left:
98 Key.A:
99 deepZoomObject.ViewportOrigin = Po(deepZoomObject.ViewportOrigin.X
100 - (0.1 * deepZoomObject.ViewportWidth), deepZoomObject.ViewportOrigin.Y);
101 ;
102 Key.Right:
103 Key.D:
104 deepZoomObject.ViewportOrigin = Po(deepZoomObject.ViewportOrigin.X +
105 (0.1 * deepZoomObject.ViewportWidth), deepZoomObject.ViewportOrigin.Y);
106 ;
107 Key.Up:
108 Key.W:
109 deepZoomObject.ViewportOrigin = Po(deepZoomObject.ViewportOrigin.X,
110 deepZoomObject.ViewportOrigin.Y - (0.1 * deepZoomObject.ViewportWidth));
111 ;
112 Key.Down:
113 Key.S:
114 deepZoomObject.ViewportOrigin = Po(deepZoomObject.ViewportOrigin.X,
115 deepZoomObject.ViewportOrigin.Y + (0.1 * deepZoomObject.ViewportWidth));
116 ;
117 Key.R:
118 ArrangeIntoGrid;
119 ;
120 default:
121 ;
122 }
123 };
124 }
125
126 private void Zoom(double zoom, Po poToZoom)
127 {
128 ((zoom >= 1.0 && deepZoomObject.ViewportWidth > 0.05) || (zoom < 1.0 && deepZoomObject.ViewportWidth < 2))
129 {
130 Po logicalPo = deepZoomObject.ElementToLogicalPo(poToZoom);
131 deepZoomObject.ZoomAboutLogicalPo(zoom, logicalPo.X, logicalPo.Y);
132 }
133 }
134
135 //
136 // A small example that arranges all of your images (provided they are the same size) o a grid
137 //
138 private void ArrangeIntoGrid
139 {
140 List<MultiScaleSubImage> randomList = RandomizedListOfImages;
141 numberOfImages = randomList.Count;
142
143 totalImagesAdded = 0;
144
145 totalColumns = ()Math.Sqrt(numberOfImages) + 1;
146 totalRows = numberOfImages / (totalColumns - 1);
147
148 for ( col = 0; col < totalColumns; col
)
149 {
150 for ( row = 0; row < totalRows; row)
151 {
152 (numberOfImages != totalImagesAdded)
153 {
154 MultiScaleSubImage currentImage = randomList[totalImagesAdded];
155
156 Po currentPos = currentImage.ViewportOrigin;
157 currentImage.ViewportWidth = totalColumns;
158 Po futurePosition = Po(-1.2 * col, -1.6 * row);
159
160 // Set up the animation to layout in grid
161 Storyboard moveStoryboard = Storyboard;
162
163 // Create Animation
164 PoAnimationUsingKeyFrames moveAnimation = PoAnimationUsingKeyFrames;
165
166 // Create Keyframe
167 SplinePoKeyFrame startKeyframe = SplinePoKeyFrame;
168 startKeyframe.Value = currentPos;
169 startKeyframe.KeyTime = KeyTime.FromTimeSpan(TimeSpan.Zero);
170
171 startKeyframe = SplinePoKeyFrame;
172 startKeyframe.Value = futurePosition;
173 startKeyframe.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1));
174
175 KeySpline ks = KeySpline;
176 ks.ControlPo1 = Po(0, 1);
177 ks.ControlPo2 = Po(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
193 {
194 ;
195 }
196 }
197 }
198
199
200 }
201
202 private List<MultiScaleSubImage> RandomizedListOfImages
203 {
204 List<MultiScaleSubImage> imageList = List<MultiScaleSubImage>;
205 Random ranNum = Random;
206
207 // Store List of Images
208 foreach (MultiScaleSubImage subImage in deepZoomObject.SubImages)
209 {
210 imageList.Add(subImage);
211 }
212
213 numImages = imageList.Count;
214
215 // Randomize Image List
216 for ( i = 0; i < numImages; i)
217 {
218 MultiScaleSubImage tempImage = imageList[i];
219 imageList.RemoveAt(i);
220
221 ranNumSelect = ranNum.Next(imageList.Count);
222
223 imageList.Insert(ranNumSelect, tempImage);
224
225 }
226
227 
imageList;
228 }
229 }
230下面就是演示效果截图:
点击其中某个图像的后
效果:
再放大后
效果:
相关工具:
Deep Zoom Composer 使用截图:
黄继佳blog : http://blogs.msdn.com/jijia
最新评论