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

 更新时间:2017年03月10日 11:01:50   作者:菩提树下的杨过  
这篇文章主要介绍了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#程序设计有所帮助。

相关文章

  • 浅析C#中结构与类的区别

    浅析C#中结构与类的区别

    本文主要对C#结构与类的区别进行简要分析,文中举了实例,便于理解,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • C#窗体实现点餐系统

    C#窗体实现点餐系统

    这篇文章主要为大家详细介绍了C#窗体实现点餐系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • c# 操作word写入特殊字符的实例

    c# 操作word写入特殊字符的实例

    这篇文章主要介绍了c# 操作word写入特殊字符的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-01-01
  • c# 网络编程之http

    c# 网络编程之http

    这篇文章主要介绍了c# 提供一个HTTP服务的实现示例,帮助大家更好的理解和使用c#,感兴趣的朋友可以了解下
    2021-02-02
  • C#实现跨线程操作控件方法

    C#实现跨线程操作控件方法

    这篇文章主要介绍了C#实现跨线程操作控件方法,主要采用异步访问方式实现,需要的朋友可以参考下
    2014-10-10
  • c#抽签系统的实现示例

    c#抽签系统的实现示例

    本文主要介绍了c#抽签系统的实现示例,一个基于c#的简单抽签系统,可以重新导入数据,清空数据。文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • C#记一次http协议multipart/form-data的boundary问题

    C#记一次http协议multipart/form-data的boundary问题

    这篇文章主要介绍了C#记一次http协议multipart/form-data的boundary问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 浅析JAVA中过滤器、监听器、拦截器的区别

    浅析JAVA中过滤器、监听器、拦截器的区别

    本文通过代码分析和文字说明的方式给大家浅析JAVA中过滤器、监听器、拦截器的区别,感兴趣的朋友一起看下吧
    2015-09-09
  • C# 匿名方法基础回顾

    C# 匿名方法基础回顾

    本篇文章主要介绍了C#的匿名方法的参数使用范围以及委托示例。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 详解 c# 克隆

    详解 c# 克隆

    这篇文章主要介绍了详解 c# 克隆的相关资料,帮助大家更好的理解和使用c#,感兴趣的朋友可以了解下
    2020-11-11

最新评论