原文:
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
哈哈，效果不错。
