基于WPF实现简单放大镜效果
makebo · 118浏览 · 发布于2022-12-27
这篇文章主要为大家详细介绍了WPF如何实现简单放大镜效果,文中的示例代码讲解详细,对我们学习或工作有一定帮助,感兴趣的小伙伴可以了解一下
WPF 如何实现简单放大镜
框架使用.NET40;
Visual Studio 2019;
实现此功能需要用到 VisualBrush ,放大镜展现使用 Canvas -> Ellipse .
可以使用 VisualBrush 创建放大效果。
设置 Visual 获取或设置画笔的内容。
设置 ViewboxUnits Absolute 坐标系与边界框无关。
设置 Viewbox 获取或设置 TileBrush 图块中内容的位置和尺寸。
当鼠标移动获取当前坐标点修改 VisualBrush 的 Viewbox。
鼠标移动修改 Ellipse 的 Canvas.Left 与 Canvas.Top 跟随鼠标。
实现代码
1) xaml 代码如下:
<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 代码如下:
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; }
效果图
相关推荐
PHP实现部分字符隐藏
沙雕mars · 1324浏览 · 2019-04-28 09:47:56
Java中ArrayList和LinkedList区别
kenrry1992 · 908浏览 · 2019-05-08 21:14:54
5月语言排行榜:R 跌出前二十,Python 紧咬 C++
manongba · 687浏览 · 2019-05-09 17:27:24
Tomcat 下载及安装配置
manongba · 969浏览 · 2019-05-13 21:03:56
什么是SpringBoot
iamitnan · 1086浏览 · 2019-05-14 22:20:36
分类专栏
最新发布
最热排行
0评论