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

wpF 如何实现简单放大镜

框架使android用.NET40；

Visual Studio 2019;

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

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

实现代码

1） xaml 代码如下：

<Grid>
<ImageSource="0.png"Stretch="Fill"
Name="image"MouseMove="image_MouseMove"
MouseEnter="image_MouseEnter"MouseLeave="image_MouseLeave"/>

<CanvasIsHitTestVisible="False"Name="MagnifierPanel">
<EllipseStroke="LightBlue"Name="MagnifierCircle"
Height="200"Width="200">
<Ellipse.Fill>
<VisualBrushx:Name="MagnifierBrush"
Visual="{BindingElementName=image}"
ViewboxUnits="Absolute"/>
</Elljsipse.Fill>
</Ellipse>
</Canvas>
</Grid>

2） xaml.cs 代码如下：

privatevoidimage_MouseMove(objectsender,MouseEventArgse)
{
varcentkudyuer=e.GetPosition(image);
varlength=MagnifierCircle.ActualWidth*_factor;
varradius=length/2;
varviewboxRect==newRect开发者_C培训(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);

}

privatevoidandroidimage_MouseEnter(objectsender,MouseEventArgse)
{
MagnifierCircle.Visibility=Visibility.Visible;
}

privatevoidimage_MouseLeave(objectsender,MouseEventArgse)
{
MagnifierCircle.Visibility=Visibility.Hidden;
}

效果图

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