今天我們在
windows phone 7
模擬器上面來做個簡單的放大鏡範例
這邊提一下，我在裝好開發工具後，我的
vs2010
已經可以開發
wp7應用程式，但是想要用
blend
設計介面時，卻發現找不到
blend forwindows phone beta
，後來是在執行解除安裝時
(參考下圖
)，選擇第乙個選項，再按下一步就可以看到安裝
blend forwindows phone beta
的選項，安裝好後就有
blend for windows phone beta了
接下來我們就可以實際開始開發及設計介面了，首先我們先把容器換成
canvas
這樣比較容易用程式計算位置
然後我們加幾張圖片到專案裡，接著在畫面上加乙個
image
控制項並設定好一些屬性 1
再來我們加乙個
canvas
，並套用
scale
轉換，這裡我們設成放大
2倍的效果，並在
canvas
裡面放一張跟剛剛一樣的
image
進來，同時我們設定乙個圓形當作
canvas
的clip(裁切)
，這個圓形就是我們的放大鏡，另外我們也希望放大鏡效果是在滑鼠按下時才看的到，所以就把這個
canvas
的visibility
設成collapsed 1
2 34
56 78 9
另外我們放個
stackpanel
在下面，裡面放我們剛剛加進專案的其他
image
，這是讓我們可以隨時點選不同的圖片來替換我們上面有放大鏡效果的那張圖片 1
2 34
56 到這裡我們的介面就完成了，然後可以切換到
visual studio2010
來寫程式，我們在最底層的
canvas
容器加入三個滑鼠事件，
mouseleftbuttondown
、mouseleftbuttonup
、mousemove
，還有就是在我們介面下方
stackpanel
裡的image
加入mouseleftbuttondown
事件，所有事件我都是從介面
xaml
檔加入的，而
c#完整程式碼如下 01
using system;
02using system.collections.generic; 03
using system.linq;
04using system.net; 05
using system.windows;
06using system.windows.controls; 07
using system.windows.documents;
08using system.windows.input; 09
using system.windows.media;
10using system.windows.media.animation; 11
using system.windows.shapes;
12using microsoft.phone.controls; 13
using system.windows.media.imaging;14
151624
25bool drag;
26private void contentgrid_mouseleftbuttonup(object sender, mousebuttoneventargs e) 27
34} 35
36private void contentgrid_mouseleftbuttondown(object sender, mousebuttoneventargs e) 37
49}50
51private void contentgrid_mousemove(object sender, mouseeventargs e)52
61}62
63private void image1_mouseleftbuttondown(object sender, mousebuttoneventargs e)64
69}70}
這裡的程式就是簡單的判斷滑鼠位置然後改變我們放大的那個
canvas
位置來做出像放大鏡的效果
完整介面的
xaml
檔如下
0102 03
xmlns=""04
xmlns:x=""
05xmlns:phone="clr-namespace:microsoft.phone.controls;assembly=microsoft.phone"
06xmlns:shell="clr-namespace:microsoft.phone.shell;assembly=microsoft.phone" 07
xmlns:d=""08
xmlns:mc=""
09fontfamily=""
10fontsize="" 11
foreground=""
12supportedorientations="portrait" orientation="portrait" 13
mc:ignorable="d" d:designwidth="480" d:designheight="768"
14shell:systemtray.isvisible="true"> 15
16 1718 19
20 2122 23
24 25
26 2728 29
30 31
32
33 最後是幾張在模擬器中執行的畫面:
當我們按下滑鼠時就可以看到點選那個點為中心的放大效果
也可以在下面點不同圖片來替換要放大的圖片
android放大鏡效果實現
public class shaderview extends view override public boolean ontouchevent motionevent event override public void ondraw canvas canvas 基本原理就是使用shapedra...
放大鏡效果實現1
1，如果乙個大目標，看起來很嚇人，只要拆解出小目標，然後實現小目標，大目標就自然而然搞定了 a 讓乙個盒子背景色半透明 mask b 當滑鼠懸浮的時候，顯示move樣式 cursor move c 當大盒子mouseenter 的時候，讓mask 盒子顯示出來 smallbox.addeventli...
WPF放大鏡效果
原文 wpf放大鏡效果 在做wpf專案中，不止兩個專案需要有放大鏡功能。第乙個專案是乙個手術室的遠端示教系統，主要是為了方便專家演示病症時，可以放大上的某些部位。第二個專案是乙個工廠的mes專案，其中有個功能是質量預警，主要就是根據疵點，對比實物進行預警。可是疵點很小，這時就需要乙個放大鏡的功能。效...