silverlight实现图片局部放大效果的方法

概述本文实例讲述了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.图片原始大小/左侧小图大小 = 右侧可视区域大小/半透明矩形大小

关键代码：

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#相关内容感兴趣的读者可查看本站专题：《C#图片 *** 作技巧汇总》、《C#常见控件用法教程》、《WinForm控件用法总结》、《C#数据结构与算法教程》、《C#面向对象程序设计入门教程》及《C#程序设计之线程使用技巧总结》

希望本文所述对大家C#程序设计有所帮助。

总结

以上是内存溢出为你收集整理的silverlight实现图片局部放大效果的方法全部内容，希望文章能够帮你解决silverlight实现图片局部放大效果的方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。