silverlight實(shí)現(xiàn)圖片局部放大效果的方法
本文實(shí)例講述了silverlight實(shí)現(xiàn)圖片局部放大效果的方法。分享給大家供大家參考,具體如下:
很多購物平臺(tái)中(比如京東購物),瀏覽產(chǎn)品詳情時(shí)都有這種效果,前幾天看到有朋友問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è)半透明矩形的“長寬比例”應(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)題動(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#常見控件用法教程》、《WinForm控件用法總結(jié)》、《C#數(shù)據(jù)結(jié)構(gòu)與算法教程》、《C#面向?qū)ο蟪绦蛟O(shè)計(jì)入門教程》及《C#程序設(shè)計(jì)之線程使用技巧總結(jié)》
希望本文所述對(duì)大家C#程序設(shè)計(jì)有所幫助。
上一篇:詳解C# 利用反射根據(jù)類名創(chuàng)建類的實(shí)例對(duì)象
欄 目:C#教程
下一篇:C# winform循環(huán) 多個(gè)視頻
本文標(biāo)題:silverlight實(shí)現(xiàn)圖片局部放大效果的方法
本文地址:http://mengdiqiu.com.cn/a1/C_jiaocheng/5832.html
您可能感興趣的文章
- 01-10C#實(shí)現(xiàn)txt定位指定行完整實(shí)例
- 01-10WinForm實(shí)現(xiàn)仿視頻 器左下角滾動(dòng)新聞效果的方法
- 01-10C#實(shí)現(xiàn)清空回收站的方法
- 01-10C#實(shí)現(xiàn)讀取注冊(cè)表監(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)仿視頻 器左下角滾動(dòng)新
- 01-10C#停止線程的方法
- 01-10C#實(shí)現(xiàn)清空回收站的方法
- 01-10C#通過重寫Panel改變邊框顏色與寬度的
- 01-10C#實(shí)現(xiàn)讀取注冊(cè)表監(jiān)控當(dāng)前操作系統(tǒng)已
隨機(jī)閱讀
- 01-10使用C語言求解撲克牌的順子及n個(gè)骰子
- 01-10delphi制作wav文件的方法
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-11ajax實(shí)現(xiàn)頁面的局部加載
- 01-10C#中split用法實(shí)例總結(jié)
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 04-02jquery與jsp,用jquery