本文實例講述了silverlight實現圖片局部放大效果的方法。分享給大家供大家參考，具體如下：
很多購物平臺中(比如京東購物)，瀏覽產品詳情時都有這種效果，前幾天看到有朋友問SL能不能實現，當然可以
界面:
1.左側小圖片(用一個矩形Fill一張圖片即可)
2.左側半透明矩形
3.右側大圖片(用一個Canvas設置Clip裁剪可視區域作為蒙板，圖片放置在Canvas中即可)
原理：
獲取左側半透明矩形的相對位置，然后動態調整右側大圖的Canvas.Left與Canvas.Top
需要知道以下技術點:
1.Clip的應用
2.如何拖動對象
3.拖動時的邊界檢測
4.動態調整對象的Canvas.Left與Canvas.Top屬性
尺寸要點:
1.右側大圖可視區域與左側半透明矩形的“長寬比例”應該相同
2.“圖片原始尺寸長度比” 應該 “與左側小圖片長度比”相同
3.圖片原始大小/左側小圖大小 = 右側可視區域大小/半透明矩形大小
關鍵代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
using System.Windows;using System.Windows.Controls;using System.Windows.Input;namespace PartMagnifier{ public partial class MainPage : UserControl { bool trackingMouseMove = false; Point mousePosition; public MainPage() { // 為初始化變量所必需 InitializeComponent(); } private void LayoutRoot_Loaded(object sender, System.Windows.RoutedEventArgs e) { Adjust(); } private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { FrameworkElement element = sender as FrameworkElement; mousePosition = e.GetPosition(element); trackingMouseMove = true; if (null != element) { element.CaptureMouse(); element.Cursor = Cursors.Hand; } Adjust(); Debug(); sb.Begin();//標題動畫，可去掉 } private void Rectangle_MouseMove(object sender, MouseEventArgs e) { FrameworkElement element = sender as FrameworkElement; if (trackingMouseMove) { double deltaV = e.GetPosition(element).Y - mousePosition.Y; double deltaH = e.GetPosition(element).X - mousePosition.X; double newTop = deltaV + (double)element.GetValue(Canvas.TopProperty); double newLeft = deltaH + (double)element.GetValue(Canvas.LeftProperty); if (newLeft <= 10) { newLeft = 10; } if (newLeft >= 130) { newLeft = 130; } if (newTop <= 10) { newTop = 10; } if (newTop >= 85) { newTop = 85; } element.SetValue(Canvas.TopProperty, newTop); element.SetValue(Canvas.LeftProperty, newLeft); mousePosition = e.GetPosition(element); Adjust(); if (mousePosition.X <= 0 || mousePosition.Y <= 0) { return; } Debug(); } } private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { FrameworkElement element = sender as FrameworkElement; trackingMouseMove = false; element.ReleaseMouseCapture(); mousePosition.X = mousePosition.Y = 0; element.Cursor = null; } /// <summary> /// 調試信息 /// </summary> void Debug() { txtResult.Text = "鼠標相對坐標：" + mousePosition.ToString() + "\n小框left：" + rect.GetValue(Canvas.LeftProperty) + ",小框top：" + rect.GetValue(Canvas.TopProperty) + "\n大圖left：" + ((double)img.GetValue(Canvas.LeftProperty)).ToString("F0") + ",大圖right：" + ((double)img.GetValue(Canvas.TopProperty)).ToString("F0"); } /// <summary> /// 調整右側大圖的位置 /// </summary> void Adjust() { double n = cBig.Width / rect.Width; double left = (double)rect.GetValue(Canvas.LeftProperty) - 10; double top = (double)rect.GetValue(Canvas.TopProperty) - 10; double newLeft = -left * n; double newTop = -top * n; img.SetValue(Canvas.LeftProperty, newLeft); img.SetValue(Canvas.TopProperty, newTop); } }} |
希望本文所述對大家C#程序設計有所幫助。
