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.图片原始大小/左侧小图大小 = 右侧可视区域大小/半透明矩形大小

 

关键代码：

 
   
    
   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);
         }

     }
 }