silverlight實(shí)現(xiàn)圖片局部放大效果的方法
本文實(shí)例講述了silverlight實(shí)現(xiàn)圖片局部放大效果的方法。分享給大家供大家參考,具體如下:
很多購物平臺中(比如京東購物),瀏覽產(chǎn)品詳情時都有這種效果,前幾天看到有朋友問SL能不能實(shí)現(xiàn),當(dāng)然可以
界面:
1.左側(cè)小圖片(用一個矩形Fill一張圖片即可)
2.左側(cè)半透明矩形
3.右側(cè)大圖片(用一個Canvas設(shè)置Clip裁剪可視區(qū)域作為蒙板,圖片放置在Canvas中即可)
原理:
獲取左側(cè)半透明矩形的相對位置,然后動態(tài)調(diào)整右側(cè)大圖的Canvas.Left與Canvas.Top
需要知道以下技術(shù)點(diǎn):
1.Clip的應(yīng)用
2.如何拖動對象
3.拖動時的邊界檢測
4.動態(tài)調(diào)整對象的Canvas.Left與Canvas.Top屬性
尺寸要點(diǎn):
1.右側(cè)大圖可視區(qū)域與左側(cè)半透明矩形的“長寬比例”應(yīng)該相同
2.“圖片原始尺寸長度比” 應(yīng)該 “與左側(cè)小圖片長度比”相同
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)題動畫,可去掉
}
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)相對坐標(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#常見控件用法教程》、《WinForm控件用法總結(jié)》、《C#數(shù)據(jù)結(jié)構(gòu)與算法教程》、《C#面向?qū)ο蟪绦蛟O(shè)計(jì)入門教程》及《C#程序設(shè)計(jì)之線程使用技巧總結(jié)》
希望本文所述對大家C#程序設(shè)計(jì)有所幫助。
上一篇:詳解C# 利用反射根據(jù)類名創(chuàng)建類的實(shí)例對象
欄 目:C#教程
本文標(biāo)題:silverlight實(shí)現(xiàn)圖片局部放大效果的方法
本文地址:http://www.jygsgssxh.com/a1/C_jiaocheng/5832.html
您可能感興趣的文章
- 01-10C#實(shí)現(xiàn)txt定位指定行完整實(shí)例
- 01-10WinForm實(shí)現(xiàn)仿視頻播放器左下角滾動新聞效果的方法
- 01-10C#實(shí)現(xiàn)清空回收站的方法
- 01-10C#實(shí)現(xiàn)讀取注冊表監(jiān)控當(dāng)前操作系統(tǒng)已安裝軟件變化的方法
- 01-10C#實(shí)現(xiàn)多線程下載文件的方法
- 01-10C#實(shí)現(xiàn)Winform中打開網(wǎng)頁頁面的方法
- 01-10C#實(shí)現(xiàn)遠(yuǎn)程關(guān)閉計(jì)算機(jī)或重啟計(jì)算機(jī)的方法
- 01-10C#自定義簽名章實(shí)現(xiàn)方法
- 01-10C#文件斷點(diǎn)續(xù)傳實(shí)現(xiàn)方法
- 01-10winform實(shí)現(xiàn)創(chuàng)建最前端窗體的方法


閱讀排行
本欄相關(guān)
- 01-10C#通過反射獲取當(dāng)前工程中所有窗體并
- 01-10關(guān)于ASP網(wǎng)頁無法打開的解決方案
- 01-10WinForm限制窗體不能移到屏幕外的方法
- 01-10WinForm繪制圓角的方法
- 01-10C#實(shí)現(xiàn)txt定位指定行完整實(shí)例
- 01-10WinForm實(shí)現(xiàn)仿視頻播放器左下角滾動新
- 01-10C#停止線程的方法
- 01-10C#實(shí)現(xiàn)清空回收站的方法
- 01-10C#通過重寫Panel改變邊框顏色與寬度的
- 01-10C#實(shí)現(xiàn)讀取注冊表監(jiān)控當(dāng)前操作系統(tǒng)已
隨機(jī)閱讀
- 01-10使用C語言求解撲克牌的順子及n個骰子
- 01-10delphi制作wav文件的方法
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 08-05織夢dedecms什么時候用欄目交叉功能?
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-11ajax實(shí)現(xiàn)頁面的局部加載
- 01-10C#中split用法實(shí)例總結(jié)
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 04-02jquery與jsp,用jquery


