首页 > 编程 > C# > 正文

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

2019-10-29 21:12:35
字体:
来源:转载
供稿:网友

本文实例讲述了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#教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表