WPF放大鏡效果

2021-09-08 05:20:37 字數 1887 閱讀 7505

原文:

wpf放大鏡效果

在做wpf專案中,不止兩個專案需要有放大鏡功能。

第乙個專案是乙個手術室的遠端示教系統,主要是為了方便專家演示病症時,可以放大上的某些部位。

第二個專案是乙個工廠的mes專案,其中有個功能是質量預警,主要就是根據疵點,對比實物進行預警。可是疵點很小,這時就需要乙個放大鏡的功能。

效果如下:

下面我們來實現。

<

grid

x:name

="rootlayout"

>

<

report:devreport

x:name

="rep"

previewmousemove

="rep_previewmousemove"

/>

<

canvas

>

<

canvas

name

="magnifiercanvas"

i****testvisible

="false"

>

<

ellipse

width

="150"

height

="150"

strokethickness

="3"

fill

="lightblue"

>

ellipse

>

<

ellipse

width

="150"

height

="150"

name

="magnifierellipse"

>

<

ellipse.fill

>

<

visualbrush

x:name

="vb"

visual=""

stretch

="uniformtofill"

view*****its

="absolute"

viewbox

="0,25,50,50"

viewportunits

="relativetoboundingbox"

viewport

="0,0,1,1"

>

visualbrush

>

ellipse.fill

>

ellipse

>

canvas

>

canvas

>

grid

>

窗體上就放了乙個報表元件,和乙個放大鏡。放大鏡根據滑鼠移動。

private

void rep_previewmousemove(object

sender, mouseeventargs e)

其實最後放大效果並不好,放大鏡的放大,其清晰度並沒有提高,反而會模糊,如果是向量圖的話,顯示效果不會隨著縮放而降低。不過如果是文字的話,效果會好很多。

不過,最終這個專案,還是用的dev報表元件的放大功能。

哈哈,效果不錯。

京東放大鏡效果

先上html和css box box1 box1 img mask mask hover box2 box2 img 前面滑鼠覆蓋出現,滑鼠離開消失等都不難。先獲取各個元素,設定display屬性就好了。直接上 let mask document.queryselector mask let box...

放大鏡效果(offset)

注 preview img 初始 需要放大的 mask 遮擋層 big 大盒子 preview img.addeventlistener mousemove function e else if maskx maskmax if masky 0 else if masky maskmax mask....

實現放大鏡的效果

page xlanguage c autoeventwireup true codebehind webform2.aspx.cs inherits 3.19jquery實現放大鏡效果.webform2 page xlanguage c autoeventwireup true codebehind...