基于WPF实现简单放大镜效果

原文网址：https://www.jb51.net/article/271074.htm

WPF 如何实现简单放大镜

框架使用.NET40；

Visual Studio 2019;

实现此功能需要用到 VisualBrush ，放大镜展现使用 Canvas -> Ellipse .

  • 可以使用 VisualBrush 创建放大效果。
  • 设置 Visual 获取或设置画笔的内容。
  • 设置 ViewboxUnits Absolute 坐标系与边界框无关。
  • 设置 Viewbox 获取或设置 TileBrush 图块中内容的位置和尺寸。
  • 当鼠标移动获取当前坐标点修改 VisualBrush 的 Viewbox。
  • 鼠标移动修改 Ellipse 的 Canvas.Left 与 Canvas.Top 跟随鼠标。

实现代码

1） xaml 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Grid>
        <Image Source="0.png" Stretch="Fill"
               Name="image" MouseMove="image_MouseMove"
               MouseEnter="image_MouseEnter" MouseLeave="image_MouseLeave"/>
 
        <Canvas IsHitTestVisible="False" Name="MagnifierPanel">
            <Ellipse Stroke="LightBlue" Name="MagnifierCircle" 
                     Height="200" Width="200">
                <Ellipse.Fill>
                    <VisualBrush x:Name="MagnifierBrush"  
                                 Visual="{Binding ElementName=image}" 
                                 ViewboxUnits="Absolute"/>
                </Ellipse.Fill>
            </Ellipse>
        </Canvas>
    </Grid>

2） xaml.cs 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
private void image_MouseMove(object sender, MouseEventArgs e)
        {
            var center = e.GetPosition(image);
            var length = MagnifierCircle.ActualWidth * _factor;
            var radius = length / 2;
            var viewboxRect = = new Rect(center.X - radius, center.Y - radius, length, length);
            MagnifierBrush.Viewbox = viewboxRect;
            MagnifierCircle.SetValue(Canvas.LeftProperty, center.X - MagnifierCircle.ActualWidth / 2);
            MagnifierCircle.SetValue(Canvas.TopProperty, center.Y - MagnifierCircle.ActualHeight / 2);
 
        }
 
        private void image_MouseEnter(object sender, MouseEventArgs e)
        {
            MagnifierCircle.Visibility = Visibility.Visible;
        }
 
        private void image_MouseLeave(object sender, MouseEventArgs e)
        {
            MagnifierCircle.Visibility = Visibility.Hidden;
        }

效果图

到此这篇关于基于WPF实现简单放大镜效果的文章就介绍到这了,更多相关WPF放大镜内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
 
posted @ 2022-12-30 21:12  MaxBruce  阅读(280)  评论(0)    收藏  举报