1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Net;
5 using System.Windows;
6 using System.Windows.Controls;
7 using System.Windows.Documents;
8 using System.Windows.Input;
9 using System.Windows.Media;
10 using System.Windows.Media.Animation;
11 using System.Windows.Shapes;
12
13 using System.Windows.Threading; //因为要用到DispatcherTimer等
14 using System.Windows.Media.Imaging; //因为要用到BitmapImage
15 using System.Diagnostics; //因为要用到Debug
16
17 namespace 图片轮盘转动
18 {
19 public partial class MainPage : UserControl
20 {
21
22 #region 定义变量
23 private Boolean page_loaded = false;
24 List<object> angleValues = new List<object>(); //转盘图片在转盘中的角度位置
25
26 private int num_images = 20; //当前图片数量，初始化成20
27
28 private int radiusX = 500; //设置椭圆的长半径
29 private int radiusY = 110; //设置椭圆的短半径
30
31 private int centerX = 460; //设置椭圆的X坐标
32 private int centerY = 260; //设置椭圆的Y坐标
33
34 private double speed = 0;
35 private DispatcherTimer myTimer;
36
37 private bool main_down = false;
38
39 private DispatcherTimer autoTimer = new DispatcherTimer();
40 #endregion
41
42 public MainPage()
43 {
44 InitializeComponent();
45
46 ResetImagesButton.Click += new RoutedEventHandler(ResetImagesButton_Click); //按下Reset按钮时做ResetImagesButton_Click操作
47
48 myTimer = new DispatcherTimer();
49 myTimer.Interval = TimeSpan.FromMilliseconds(33);
50 myTimer.Tick += new EventHandler(myTimer_Tick);
51
52 //Console.WriteLine("call start");
53
54 //设置数量控制滑条的最大值与最小值
55 numPhotosSlider.Maximum = 180;
56 numPhotosSlider.Minimum = 10;
57
58 //设置X半径控制滑条的最大值与最小值
59 radiusSliderX.Maximum = 500;
60 radiusSliderX.Minimum = 320;
61
62 //设置Y半径控制滑条的最大值与最小值
63 radiusSliderY.Maximum = 200;
64 radiusSliderY.Minimum = 100;
65
66 Loaded += new RoutedEventHandler(Page_Loaded);
67
68 BuildImages();
69 }
70
71
72 #region 定义要调用的函数
73
74 #region Page_Load事件
75 void Page_Loaded(object sender, RoutedEventArgs e)
76 {
77
78 myTimer.Start();
79
80 //加载默认初始照片
81 Uri uri = new Uri("images/1.jpg", UriKind.Relative);
82 ImageSource imgSource = new BitmapImage(uri);
83 mainImage.Source = imgSource;
84 mainImageReflection.Source = imgSource;
85
86 //Debug.WriteLine("Loaded: " + mainImage.Source);
87 page_loaded = true; //设置page_loaded标志，表明已经加载了图片了
88
89 }
90
91 #endregion
92
93 #region Canvas_MouseLeftButtonDown事件
94 void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
95 {
96 Canvas c = sender as Canvas;
97
98 //c.Opacity = 0.5;
99
100 Rectangle r = c.Children[0] as Rectangle; //取得边框
101 Image img = c.Children[1] as Image; //取得图片
102 img.Opacity = 0.3; //设置图片透明度
103
104 //Debug.WriteLine("canvas down");
105
106 //加载点击选中的图片
107 mainImage.Source = img.Source;
108 mainImageReflection.Source = img.Source;
109 //设置边框颜色
110 r.Stroke = new SolidColorBrush(Colors.Red);
111 }
112
113 #endregion
114
115 #region 清除所有图片+RemoveImages
116 void RemoveImages()
117 {
118 angleValues = new List<object>(); //重新new一个angleValues
119
120 for (int i = 0; i < num_images; i++) //移除所有图片
121 {
122 Canvas c = this.FindName("imageHolder_" + i) as Canvas;
123 if (c != null)
124 {
125 root.Children.Remove(c);
126 }
127 }
128
129 }
130 #endregion
131
132 #region 加载指定数量的图片+BuildImages
133 private void BuildImages()
134 {
135 int cnt = 1; //计数
136
137 for (int i = 0; i < num_images; i++)
138 {
139 #region 放置图片的Canvas创建与设置
140 Canvas c = new Canvas();
141
142 c.Name = "imageHolder_" + i;
143 c.Width = 100;
144 c.Height = 100;
145
146 //Microsoft.Surface.Presentation.Contacts.AddPreviewContactDownHandler(c, CanvasImage_PreviewContactDown);
147
148 c.MouseLeftButtonDown += new MouseButtonEventHandler(Canvas_MouseLeftButtonDown); //加载鼠标点击事件
149
150 #endregion
151
152 #region 图片的边框创建与设置
153
154 #region 创建一个边框
155 Rectangle r = new Rectangle();
156 r.Width = 100;
157 r.Height = 100;
158 #endregion
159
160 #region 边框填充方法一：直接填充图片所在的边框
161 // r.Fill = new SolidColorBrush(Colors.Orange);
162 #endregion
163
164 #region 边框填充方法二：手工创建一个Brush，并使用此Brush来填充图片所在的边框
165 //创建一个Brush
166 LinearGradientBrush myLGB = new LinearGradientBrush();
167 myLGB.StartPoint = new Point(0, 0);
168 myLGB.EndPoint = new Point(0, 1);
169
170 GradientStop gs1 = new GradientStop();
171 gs1.Color = Colors.White;
172 gs1.Offset = 0.0;
173
174 GradientStop gs2 = new GradientStop();
175 gs2.Color = Colors.Gray;
176 gs2.Offset = 1.0;
177
178
179 myLGB.GradientStops.Add(gs1);
180 myLGB.GradientStops.Add(gs2);
181
182 //使用上面创建的Brush来填充图片所在的边框
183 r.Fill = myLGB;
184 #endregion
185
186 r.Stroke = new SolidColorBrush(Colors.Gray);
187
188 #endregion
189
190 #region 图片控件创建与设置
191
192 //创建一个图片控件
193 Image img = new Image();
194 img.Stretch = Stretch.Fill;
195 img.Width = 80;
196 img.Height = 80;
197 img.SetValue(Canvas.LeftProperty, 10.0);
198 img.SetValue(Canvas.TopProperty, 10.0);
199
200
201 //创建一个图片源对象
202 Uri uri = new Uri("./images/" + cnt + ".jpg", UriKind.Relative);
203 ImageSource imgSource = new BitmapImage(uri);
204
205 //如果图片小于20张，则重复使用
206 if (cnt < 20)
207 {
208 cnt++;
209 }
210 else
211 {
212 cnt = 1;
213 }
214
215 img.Source = imgSource;
216
217 #endregion
218
219 #region 在上面创建的Canvas中添加创建的边框和图片控件
220 c.Children.Add(r);
221 c.Children.Add(img);
222 #endregion
223
224 #region 设置图片缩放比例
225 ScaleTransform st = new ScaleTransform();
226 st.CenterX = 50;
227 st.CenterY = 50;
228 st.ScaleX = 1;
229 st.ScaleY = 1;
230
231 c.RenderTransform = st;
232 #endregion
233
234 #region 图片角度位置的计算与保存
235 double ang = (double)i * ((Math.PI * 2) / num_images); //取得对应位置的角度值
236 angleValues.Add(ang); //把角度值保存到List中
237 #endregion
238
239 #region 把上面创建的Canvas添加到页面上
240 // c.SetValue(Canvas.LeftProperty, i * 100.0);
241 root.Children.Add(c);
242 #endregion
243 }
244
245 PositionImagesInCircle(); //放置对应的图片
246 }
247
248
249 #endregion
250
251 #region 设置各个转盘图片在转盘中的位置以及缩放比例+PositionImagesInCircle
252 private void PositionImagesInCircle()
253 {
254 for (int i = 0; i < num_images; i++) //遍历所有指定数量的图片
255 {
256 //根据角度确定椭圆轨迹上的坐标值
257 double my_x = (double)Math.Cos((double)angleValues[i]) * radiusX + centerX; //取得X轴坐标值
258 double my_y = (double)Math.Sin((double)angleValues[i]) * radiusY + centerY; //取得Y轴坐标值
259
260 Canvas c = root.FindName("imageHolder_" + i) as Canvas; //找到子图片所在Canvas
261 c.SetValue(Canvas.LeftProperty, my_x); //设置Canvas的坐标值
262 c.SetValue(Canvas.TopProperty, my_y);
263 c.SetValue(Canvas.ZIndexProperty, (int)my_y); //设置Canvas的显示层次值，在Y坐标上值大图片的覆盖值小的图片
264
265 //缩放变换ScaleTransform允许我们对元素进行缩放，通过属性ScaleX和ScaleY来分别指定在X轴和Y轴上的缩放比例，
266 //同样也可以使用属性CenterX和CenterY来指定缩放中心
267 ScaleTransform st = c.RenderTransform as ScaleTransform;
268
269
270 double my_scale = (my_y - st.ScaleY) / (centerY + radiusY - st.ScaleY); //按一定方式进行缩放，原则是Y轴值大的图片大，Y轴值小的图片小
271
272 //double my_scale = (my_x - st.ScaleX) / (centerX + radiusX - st.ScaleX); //另外一种缩放公式
273 //double my_scale = 2 + (double)Math.Cos((double)angleValues[i] - Math.PI / 2); //另外一种缩放公式
274
275
276 st.ScaleX = my_scale;
277 st.ScaleY = my_scale;
278
279 angleValues[i] = (double)angleValues[i] + speed;
280
281 }
282
283 }
284 #endregion
285
286 #region myTimer_Tick 事件处理函数
287 void myTimer_Tick(object sender, EventArgs e)
288 {
289 if (main_down)
290 {
291 PositionImagesInCircle(); //调整图片位置与缩放比例
292 }
293 }
294 #endregion
295
296 #endregion
297
298 private void numPhotosSliderChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
299 {
300 Slider s = sender as Slider;
301
302 if (page_loaded) //如果页面已经加载
303 {
304 RemoveImages(); //移除所有图片
305
306 num_images = (int)s.Value; //重新设置当前应该加载的图片数量
307
308 BuildImages(); //重新加载图片
309 }
310 }
311
312 private void ResetImagesButton_Click(object sender, RoutedEventArgs e)
313 {
314 RemoveImages(); //清除所有图片
315
316 #region 恢复变量默认初始值#region 恢复变量默认初始值
317 num_images = 20;
318 radiusX = 500;
319 radiusY = 110;
320 centerX = 460;
321 centerY = 260;
322 mainImage.SetValue(Canvas.ZIndexProperty, 169);
323 #endregion
324
325 BuildImages(); //重新加载指定数量的图片
326
327 #region 重新设置滑条默认值#region 重新设置滑条默认值
328 numPhotosSlider.Value = 40.0;
329 radiusSliderX.Value = 500;
330 radiusSliderY.Value = 1100;
331 #endregion
332 }
333
334 private void radiusSliderChangedX(object sender, RoutedPropertyChangedEventArgs<double> e)
335 {
336 Slider s = sender as Slider;
337
338 if (page_loaded) //如果页面已经成功加载则作后续处理
339 {
340 RemoveImages(); //移除所有图片
341
342 radiusX = (int)s.Value; //取得新的半径值
343
344 if (s.Value < 450) //如果新的半径值低于我们要求的上限，则作调整，否则不作变动
345 {
346 //调整mainImage控件的ZIndexProperty属性，以免它因为radius的变动被后面的图片轮挡住
347 int z = (int)mainImage.GetValue(Canvas.ZIndexProperty);
348 z += 2;
349 mainImage.SetValue(Canvas.ZIndexProperty, z);
350 }
351 else
352 {
353 mainImage.SetValue(Canvas.ZIndexProperty, 169);
354 }
355
356 BuildImages(); //重新加载图片
357 }
358
359 }
360
361
362 private void MainContactDown(object sender, MouseButtonEventArgs e)
363 {
364 Point p = e.GetPosition(this);
365 Debug.WriteLine(">>" + p.Y);
366 if (p.Y > 500 && p.Y < 650) //判断是否在指定的区域内按下了鼠标
367 {
368 main_down = true;
369 }
370 }
371
372 private void MainContactUp(object sender, MouseButtonEventArgs e)
373 {
374 main_down = false;
375 }
376
377 private void root_MouseMove(object sender, MouseEventArgs e)
378 {
379 Point p = e.GetPosition(this);
380 speed = ((p.X - 500) / 500) * 0.0755; //调整轮盘的转速
381 //Debug.WriteLine("changed: " + speed);
382 }
383
384 private void radiusSliderChangedY(object sender, RoutedPropertyChangedEventArgs<double> e)
385 {
386 Slider s = sender as Slider;
387 if (page_loaded) //如果页面已经成功加载则作后续处理
388 {
389 RemoveImages(); //移除所有图片
390
391 radiusY = (int)s.Value; //取得新的半径值
392 if (s.Value < 200) //如果新的半径值低于我们要求的上限，则作调整，否则不作变动
393 {
394 //调整mainImage控件的ZIndexProperty属性，以免它因为radius的变动被后面的图片轮挡住
395 int z = (int)mainImage.GetValue(Canvas.ZIndexProperty);
396 z += 2;
397 mainImage.SetValue(Canvas.ZIndexProperty, z);
398 }
399 else
400 {
401 mainImage.SetValue(Canvas.ZIndexProperty, 169);
402 }
403
404 BuildImages(); //重新加载图片
405 }
406 }
407
408 #region autoTimer_Tick 事件处理函数#region autoTimer_Tick 事件处理函数
409 void autoTimer_Tick(object sender, EventArgs e)
410 {
411 PositionImagesInCircle(); //调整图片位置与缩放比例
412 }
413 #endregion
414
415 private void AutoSpinButton_Click(object sender, RoutedEventArgs e)
416 {
417 autoTimer.Start();
418 autoTimer.Interval = TimeSpan.FromMilliseconds(33);
419 autoTimer.Tick += new EventHandler(autoTimer_Tick);
420 }
421 }
422 }
