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)畫(huà),可去掉 } 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)容感興趣的讀者可查看本站專(zhuān)題:《C#圖片操作技巧匯總》、《C#常見(jiàn)控件用法教程》、《WinForm控件用法總結(jié)》、《C#數(shù)據(jù)結(jié)構(gòu)與算法教程》、《C#面向?qū)ο蟪绦蛟O(shè)計(jì)入門(mén)教程》及《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#中結(jié)構(gòu)與類(lèi)的區(qū)別
本文主要對(duì)C#結(jié)構(gòu)與類(lèi)的區(qū)別進(jìn)行簡(jiǎn)要分析,文中舉了實(shí)例,便于理解,具有很好的參考價(jià)值,需要的朋友一起來(lái)看下吧2016-12-12C#窗體實(shí)現(xiàn)點(diǎn)餐系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了C#窗體實(shí)現(xiàn)點(diǎn)餐系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08C#記一次http協(xié)議multipart/form-data的boundary問(wèn)題
這篇文章主要介紹了C#記一次http協(xié)議multipart/form-data的boundary問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06淺析JAVA中過(guò)濾器、監(jiān)聽(tīng)器、攔截器的區(qū)別
本文通過(guò)代碼分析和文字說(shuō)明的方式給大家淺析JAVA中過(guò)濾器、監(jiān)聽(tīng)器、攔截器的區(qū)別,感興趣的朋友一起看下吧2015-09-09