WPF放大鏡效果

在做WPF項目中，不止兩個項目需要有放大鏡功能。
第一個項目是一個手術室的遠程示教系統，主要是為了方便專家演示病症時，可以放大圖片上的某些部位。
第二個項目是一個工廠的MES項目，其中有個功能是質量預警，主要就是根據疵點圖片，對比實物進行預警。可是疵點很小，這時就需要一個放大鏡的功能。
效果如下：

 

 

image.png

下面我們來實現。
 

<Grid x:Name="rootLayout">
<report:DevReport x:Name="rep" PreviewMouseMove="rep_PreviewMouseMove"/>
<Canvas>
<Canvas Name="magnifierCanvas" IsHitTestVisible="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="{Binding ElementName=rep}" Stretch="UniformToFill" ViewboxUnits="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)
{
Point rate = new Point(2, 2);
Point pos = e.MouseDevice.GetPosition(rootLayout); //相對於outsideGrid 獲取鼠標的坐標
Rect viewBox = vb.Viewbox; //這里的Viewbox和前台的一樣 這里就是獲取前台Viewbox的值
double xoffset = 0; //因為鼠標要讓它在矩形(放大鏡)的中間 那么我們就要讓矩形的左上角重新移動位置
double yoffset = 0;
xoffset = magnifierEllipse.ActualWidth / 2;
yoffset = magnifierEllipse.ActualHeight / 2;
viewBox.X = pos.X - xoffset + (magnifierEllipse.ActualWidth - magnifierEllipse.ActualWidth / rate.X) / 2;
viewBox.Y = pos.Y - yoffset + (magnifierEllipse.ActualHeight - magnifierEllipse.ActualHeight / rate.Y) / 2;
vb.Viewbox = viewBox;
Canvas.SetLeft(magnifierCanvas, pos.X - xoffset); //同理重新定位Canvas magnifierCanvas的坐標
Canvas.SetTop(magnifierCanvas, pos.Y - yoffset);
}

 

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

 

image.png

不過，最終這個項目，還是用的DEV報表組件的放大功能。

 

image.png

哈哈，效果不錯。