silverlight實現圖片局部放大效果

       silverlight實現圖片局部放大效果方法之一：

能夠使用兩幅圖片，一幅圖片是顯示待放大的圖片，另外一幅圖片是原圖，這裏，他們固然須要知足原圖要大於帶放大的圖片的關係，這樣

咱們經過模擬的放大鏡遮罩放到待放大圖片上，再根據原圖，使得局部放大並顯示。

具體的說，能夠設置一個Canvas對象，而後把一幅原圖放到裏面，接着使用clip屬性進行剪裁，你能夠這樣理解剪裁，在一塊布上，用剪刀減去一塊，或者剪出一個圓，咱們就用剪出一個圓爲例，在這個圓外面的部分都被剪去了，剩下的也就是咱們能看到的這個圓中的那部分圖片---也就是原圖的一部分。而後，咱們能夠根據你在待放大圖片上須要放大的部分，對原圖進行位置的改變，顯示出局部放大圖。

       那麼怎麼樣來計算你須要放大的位置呢？

其實也很簡單，咱們能夠這麼想，在待放大圖片上，你作一個能夠隨鼠標拖動的放大鏡，而後，根據這個放大鏡的區域，在那個放原圖片的畫布對象的剪裁部分顯示出相應的那部分，由於原圖比待放大圖片要大，這樣天然就獲得了放大的效果。

如今剩下的問題就是怎麼要獲得他們對應的部分。在作這一步前，必需要明確一點，就是因此的東西都是按照比例放大的，因此，你那個放大鏡的長度和寬度與放大視窗（就是那個圓洞）的比例，應該與待放大圖片的長寬與原圖長寬的比例相等。接下來，就是要理解，怎麼樣獲得相應的位置了，能夠這麼想，在待放大圖片那邊，待放大的圖片是不動的，你動的是放大鏡，而在原圖那邊，那個放大視窗是不動的，你動的是原圖。這樣你根據相對運動，便知道，當你的放大鏡像左邊移動的時候，只要你的原圖向右邊移動就能夠在視窗看到你須要放大的那部分圖。由於咱們是用canvas進行絕對定位，因此，能夠獲得以下：

            double n = img.Width / rect.Width;                                                 //原圖與待放大圖的比，也就是放大比例
            double left = (double)magnifiter.GetValue(Canvas.LeftProperty);        //獲得放大鏡的x座標
            double top = (double)magnifiter.GetValue(Canvas.TopProperty);       //獲得放大鏡的y座標
            double newleft = -n * left;                                                               //乘上比例係數並取負數（由於是相對運動）
            double newtop = -n * top;
            img.SetValue(Canvas.LeftProperty, newleft);                                       //設置原圖的位置
            img.SetValue(Canvas.TopProperty, newtop);

具體源代碼以下：

MainPage .xaml

 

代碼

 1  < UserControl  x:Class ="magnifier.MainPage"
 2      xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3      xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
 4      xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
 5      xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6      mc:Ignorable ="d"
 7      d:DesignHeight ="300"  d:DesignWidth ="400" >
 8 
 9       < Grid  x:Name ="LayoutRoot"  Background ="White" >
10 
11           < Canvas  x:Name ="mainback" >             
12             
13                   < Rectangle  Width ="260.5"  Height ="357.5"  x:Name ="rect" >
14                   < Rectangle.Fill >
15                       < ImageBrush  ImageSource ="a.jpg"  Stretch ="Fill" />
16                   </ Rectangle.Fill >
17               </ Rectangle >
18               < Ellipse  Width ="100"  Height ="100"  x:Name ="magnifiter"  Opacity ="0.5"  Fill ="White" >
19 
20               </ Ellipse >
21           </ Canvas >
22           < Canvas  x:Name ="im"  Width ="200"  Height ="200"  Canvas.Left ="600" >
23               < Image  Source ="a.jpg"   Width ="521"  Height ="715"  x:Name ="img" ></ Image >
24               < Canvas.Clip >
25                       < EllipseGeometry  RadiusX ="100"  RadiusY ="100"  Center ="100,100" />
26                   </ Canvas.Clip >
27              
28               </ Canvas >
29       </ Grid >
30  </ UserControl >

 

MainPage.xaml.cs

 

代碼

 1  namespace  magnifier
 2  {
 3       public   partial   class  MainPage : UserControl
 4      {
 5           bool  IsMouseDown  =   false ;
 6          Point mousep;
 7 
 8           public  MainPage()
 9          {
10              InitializeComponent();
11              magnifiter.MouseLeftButtonDown  +=   new  MouseButtonEventHandler(magnifiter_MouseLeftButtonDown);
12              magnifiter.MouseLeftButtonUp  +=   new  MouseButtonEventHandler(magnifiter_MouseLeftButtonUp);
13              magnifiter.MouseMove  +=   new  MouseEventHandler(magnifiter_MouseMove);
14          }
15 
16           void  magnifiter_MouseMove( object  sender, MouseEventArgs e)
17          {
18               
19               if  (IsMouseDown)
20              {
21                   double  DeltaV  =  e.GetPosition( null ).Y  -  mousep.Y;
22                   double  DeltaH  =  e.GetPosition( null ).X  -  mousep.X;
23                   double  NewTop  =  DeltaV  +  ( double )magnifiter.GetValue(Canvas.TopProperty);
24                   double  NewLeft  =  DeltaH  +  ( double )magnifiter.GetValue(Canvas.LeftProperty);
25                  magnifiter.SetValue(Canvas.LeftProperty, NewLeft);
26                  magnifiter.SetValue(Canvas.TopProperty, NewTop);
27                  mousep  =  e.GetPosition( null );
28                  mag();
29              }
30             
31          }
32 
33           void  magnifiter_MouseLeftButtonUp( object  sender, MouseButtonEventArgs e)
34          {
35              IsMouseDown  =   false ;
36              mousep.X  =  mousep.Y  =   0 ;
37          }
38 
39           void  magnifiter_MouseLeftButtonDown( object  sender, MouseButtonEventArgs e)
40          {
41              mousep  =  e.GetPosition( null );
42              
43              IsMouseDown  =   true ;
44          }
45           public   void  mag()
46          {
47               double  n  =  img.Width  /  rect.Width;
48               double  left  =  ( double )magnifiter.GetValue(Canvas.LeftProperty);
49               double  top  =  ( double )magnifiter.GetValue(Canvas.TopProperty);
50               double  newleft  =   - n  *  left;
51               double  newtop  =   - n  *  top;
52              img.SetValue(Canvas.LeftProperty, newleft);
53              img.SetValue(Canvas.TopProperty, newtop);
54          }
55      }
56  }

 

最終效果以下：