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实现图片局部放大效果的方法 的全部内容, 来源链接: utcz.com/z/314077.html

回到顶部