Silverlight實(shí)現(xiàn)簡(jiǎn)單鼠標(biāo)手勢(shì)控制頁(yè)面滾動(dòng)
作者：零末
看了MSDN的WebCast的《用Silverlight實(shí)現(xiàn)簡(jiǎn)單鼠標(biāo)手勢(shì)控制頁(yè)面滾動(dòng)》視頻，筆者就他的講述寫出了一個(gè)小例子。希望對(duì)大家有所幫助。。
上圖藍(lán)色部分就是鼠標(biāo)手勢(shì)控制的部分，劃過(guò)這塊區(qū)域，瀏覽器的滾動(dòng)條就會(huì)做出相應(yīng)的反應(yīng)。我寫的這個(gè)程序只能適合在IE，F(xiàn)irefox我測(cè)試了一下沒(méi)有反應(yīng)，其他瀏覽器我并沒(méi)有進(jìn)行測(cè)試。
這個(gè)程序的設(shè)計(jì)目標(biāo)：用Silverlight實(shí)現(xiàn)一個(gè)浮動(dòng)在頁(yè)面右下角的鼠標(biāo)手勢(shì)控制塊，讓用戶用鼠標(biāo)手勢(shì)控制頁(yè)面滾動(dòng)，提供更好的用戶瀏覽體驗(yàn)。
鼠標(biāo)手勢(shì)設(shè)計(jì)計(jì)劃：
1.制作一個(gè)浮動(dòng)DIV，承載Silverlight。
2.實(shí)現(xiàn)鼠標(biāo)移動(dòng)方向與速度識(shí)別
3.調(diào)用js控制scrollbar
4.測(cè)試
鼠標(biāo)手勢(shì)詳細(xì)步驟：
1.制作一個(gè)浮動(dòng)DIV，承載Silverlight。
2.實(shí)現(xiàn)鼠標(biāo)移動(dòng)方向與速度識(shí)別
Code
1 public MainPage()
2 {
3 InitializeComponent();
4 timer.Completed += new EventHandler(timer_Completed);
5 }
6
7 void timer_Completed(object sender, EventArgs e)
8 {
9 //throw new NotImplementedException();
10 if (Math.Abs(v_x) <= V_Min && Math.Abs(v_y) <= V_Min)
11 {
12 v_x = 0;
13 v_y = 0;
14 const_time = 0;
15 Current_Time = 0;
16 }
17 else
18 {
19 if (Current_Time < const_time)
20 {
21 Current_Time++;
22 }
23 else
24 {
25 if (Math.Abs(v_x) > V_Min)
26 {
27 v_x = Math.Sign(v_x) * (Math.Abs(v_x) - Math.Abs(dec));
28 }
29 if (Math.Abs(v_y) > V_Min)
30 {
31 v_y = Math.Sign(v_y) * (Math.Abs(v_y) - Math.Abs(dec));
32 }
33 }
34 ScollBy(v_x, v_y);
35 timer.Begin();
36 }
37 }
38 //慣性計(jì)算
39 double dec = 0.3;
40 const double V_Min = 0.3;
41 double Current_Time = 0;
42
43
44 Point StartPoint;//開始點(diǎn)
45 Point EndPoint;//結(jié)束點(diǎn)
46 List<Point> TempPoints = new List<Point>();//點(diǎn)集合
47 bool IsRecording = true;//是否錄制
48 double v_x;
49 double v_y;
50 double const_time;
51 public Storyboard timer = new Storyboard() { Duration = new Duration(new TimeSpan(0, 0, 0, 0, 10)) };
52 //timer.Interval=10;
53
54 private void MainInput_MouseMove(object sender, MouseEventArgs e)
55 {
56 if (IsRecording)
57 {
58 TempPoints.Add(e.GetPosition(null));
59 }
60 }
61
62 private void MainInput_MouseEnter(object sender, MouseEventArgs e)
63 {
64 P.Points.Clear();
65 P.Points.Add(e.GetPosition(null));
66 IsRecording = true;
67 StartPoint = e.GetPosition(null);
68 TempPoints.Clear();
69 TempPoints.Add(StartPoint);
70 }
71
72 private void MainInput_MouseLeave(object sender, MouseEventArgs e)
73 {
74 IsRecording = false;
75 EndPoint = TempPoints[TempPoints.Count - 1];
76 v_x = (StartPoint.X - EndPoint.X) / TempPoints.Count;
77 v_y = (StartPoint.Y - EndPoint.Y) / TempPoints.Count;
78 const_time = 100 / TempPoints.Count;
79 P.Points.Add(EndPoint);
80 timer.Stop();
81 timer.Begin();
82 }
3.調(diào)用js控制scrollbar
Code (string.Format("window.scrollBy({0},{1});",x,y)); |
以上就可以完成這樣的一個(gè)功能了。
【編輯推薦】
責(zé)任編輯：彭凡
來(lái)源：
博客園
