silverlight實(shí)現(xiàn)圖片局部放大效果的方法
本文實(shí)例講述了silverlight實(shí)現(xiàn)圖片局部放大效果的方法。分享給大家供大家參考,具體如下:
很多購(gòu)物平臺(tái)中(比如京東購(gòu)物),瀏覽產(chǎn)品詳情時(shí)都有這種效果,前幾天看到有朋友問(wèn)SL能不能實(shí)現(xiàn),當(dāng)然可以
界面:
1.左側(cè)小圖片(用一個(gè)矩形Fill一張圖片即可)
2.左側(cè)半透明矩形
3.右側(cè)大圖片(用一個(gè)Canvas設(shè)置Clip裁剪可視區(qū)域作為蒙板,圖片放置在Canvas中即可)
原理:
獲取左側(cè)半透明矩形的相對(duì)位置,然后動(dòng)態(tài)調(diào)整右側(cè)大圖的Canvas.Left與Canvas.Top
需要知道以下技術(shù)點(diǎn):
1.Clip的應(yīng)用
2.如何拖動(dòng)對(duì)象
3.拖動(dòng)時(shí)的邊界檢測(cè)
4.動(dòng)態(tài)調(diào)整對(duì)象的Canvas.Left與Canvas.Top屬性
尺寸要點(diǎn):
1.右側(cè)大圖可視區(qū)域與左側(cè)半透明矩形的“長(zhǎng)寬比例”應(yīng)該相同
2.“圖片原始尺寸長(zhǎng)度比” 應(yīng)該 “與左側(cè)小圖片長(zhǎng)度比”相同
3.圖片原始大小/左側(cè)小圖大小 = 右側(cè)可視區(qū)域大小/半透明矩形大小
關(guān)鍵代碼:
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();//標(biāo)題動(dòng)畫,可去掉
}
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>
/// 調(diào)試信息
/// </summary>
void Debug()
{
txtResult.Text = "鼠標(biāo)相對(duì)坐標(biāo):" + 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>
/// 調(diào)整右側(cè)大圖的位置
/// </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);
}
}
}
更多關(guān)于C#相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《C#圖片操作技巧匯總》、《C#常見(jiàn)控件用法教程》、《WinForm控件用法總結(jié)》、《C#數(shù)據(jù)結(jié)構(gòu)與算法教程》、《C#面向?qū)ο蟪绦蛟O(shè)計(jì)入門教程》及《C#程序設(shè)計(jì)之線程使用技巧總結(jié)》
希望本文所述對(duì)大家C#程序設(shè)計(jì)有所幫助。
- WPF實(shí)現(xiàn)圖片合成或加水印的方法【2種方法】
- 深入分析WPF客戶端讀取高清圖片卡以及縮略圖的解決方法詳解
- Silverlight將圖片轉(zhuǎn)換為byte的實(shí)現(xiàn)代碼
- Silverlightbutton圖片切換樣式實(shí)例代碼
- C#實(shí)現(xiàn)圖片放大功能的按照像素放大圖像方法
- C# 實(shí)現(xiàn)的圖片蓋章功能,支持拖拽、旋轉(zhuǎn)、放縮、保存
- C#圖片按比例縮放的實(shí)現(xiàn)代碼
- c#圖片縮放圖片剪切功能實(shí)現(xiàn)(等比縮放)
- WPF/Silverlight實(shí)現(xiàn)圖片局部放大的方法分析
相關(guān)文章
C#使用NPOI設(shè)置Excel下拉選項(xiàng)
這篇文章主要為大家詳細(xì)介紹了C#使用NPOI設(shè)置Excel下拉選項(xiàng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02
C#實(shí)現(xiàn)將像素轉(zhuǎn)換為頁(yè)面單位的方法
這篇文章主要介紹了C#實(shí)現(xiàn)將像素轉(zhuǎn)換為頁(yè)面單位的方法,涉及C#像素轉(zhuǎn)換在圖形繪制中的技巧,需要的朋友可以參考下2015-06-06
C#使用channel實(shí)現(xiàn)Plc異步任務(wù)之間的通信
在C#的并發(fā)編程中,Channel是一種非常強(qiáng)大的數(shù)據(jù)結(jié)構(gòu),用于在生產(chǎn)者和消費(fèi)者之間進(jìn)行通信,本文將給大家介紹C#使用channel實(shí)現(xiàn)Plc異步任務(wù)之間的通信,文中有相關(guān)的代碼示例供大家參考,感興趣的朋友跟著小編一起來(lái)看看吧2024-05-05
C# string轉(zhuǎn)換為幾種不同編碼的Byte[]的問(wèn)題解讀
這篇文章主要介紹了C# string轉(zhuǎn)換為幾種不同編碼的Byte[]的問(wèn)題解讀,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02

