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  }

 

最终效果以下：