• 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


    哈哈,效果不错。

  • 相关阅读:
    jquery 添加关键字小插件
    打印出所有每一位都与其他位不重复的自然数
    尾递归版,斐波那契数列
    如何在移动端宽度自适应实现正方型?
    css隐藏元素的六类13种方法
    如何给行内元素设置宽高?
    css实现垂直水平居中的方法
    pwa
    目录树生成工具treer
    服务端返回的json数据,导致前端报错的原因及解决方法
  • 原文地址:https://www.cnblogs.com/czly/p/9105559.html
Copyright © 2020-2023  润新知