silverlight实现图片局部放大效果的方法
本文实例讲述了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.图片原始大小/左侧小图大小=右侧可视区域大小/半透明矩形大小
关键代码：
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Input;
namespacePartMagnifier
{
publicpartialclassMainPage:UserControl
{
booltrackingMouseMove=false;
PointmousePosition;
publicMainPage()
{
//为初始化变量所必需
InitializeComponent();
}
privatevoidLayoutRoot_Loaded(objectsender,System.Windows.RoutedEventArgse)
{
Adjust();
}
privatevoidRectangle_MouseLeftButtonDown(objectsender,MouseButtonEventArgse)
{
FrameworkElementelement=senderasFrameworkElement;
mousePosition=e.GetPosition(element);
trackingMouseMove=true;
if(null!=element)
{
element.CaptureMouse();
element.Cursor=Cursors.Hand;
}
Adjust();
Debug();
sb.Begin();//标题动画，可去掉
}
privatevoidRectangle_MouseMove(objectsender,MouseEventArgse)
{
FrameworkElementelement=senderasFrameworkElement;
if(trackingMouseMove)
{
doubledeltaV=e.GetPosition(element).Y-mousePosition.Y;
doubledeltaH=e.GetPosition(element).X-mousePosition.X;
doublenewTop=deltaV+(double)element.GetValue(Canvas.TopProperty);
doublenewLeft=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();
}
}
privatevoidRectangle_MouseLeftButtonUp(objectsender,MouseButtonEventArgse)
{
FrameworkElementelement=senderasFrameworkElement;
trackingMouseMove=false;
element.ReleaseMouseCapture();
mousePosition.X=mousePosition.Y=0;
element.Cursor=null;
}
///
///调试信息
///
voidDebug()
{
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");
}
///
///调整右侧大图的位置
///
voidAdjust()
{
doublen=cBig.Width/rect.Width;
doubleleft=(double)rect.GetValue(Canvas.LeftProperty)-10;
doubletop=(double)rect.GetValue(Canvas.TopProperty)-10;
doublenewLeft=-left*n;
doublenewTop=-top*n;
img.SetValue(Canvas.LeftProperty,newLeft);
img.SetValue(Canvas.TopProperty,newTop);
}
}
}
更多关于C#相关内容感兴趣的读者可查看本站专题：《C#图片操作技巧汇总》、《C#常见控件用法教程》、《WinForm控件用法总结》、《C#数据结构与算法教程》、《C#面向对象程序设计入门教程》及《C#程序设计之线程使用技巧总结》
希望本文所述对大家C#程序设计有所帮助。