WPF中利用RadialGradient模拟放大镜效果

2022-06-03 06:55:32

原文:WPF中利用RadialGradient模拟放大镜效果

--------------------------------------------------------------------------------
引用时请保留以下信息：
大可山 [MSN:a3news(AT)hotmail.com]
http://www.zpxp.com 萝卜鼠在线图形图像处理
--------------------------------------------------------------------------------

原图：

使用RadialGradient覆盖后的突起效果：

另一种效果：

放大镜效果：

XAML代码：
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="LinearGradientButton.OpacityMask"
x:Name="Window"
Title="OpacityMask"
Width="640" Height="480" xmlns:d="http://schemas.microsoft.com/expression/blend/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

<Grid x:Name="LayoutRoot">
  <Image Source="20070419171727764.jpg" Stretch="Fill" HorizontalAlignment="Right" Margin="0,8,8,21.429" Width="291.6"/>
  <Image OpacityMask="{x:Null}" HorizontalAlignment="Left" Margin="8,8,0,21.429" Width="291.6" Source="20070419171727764.jpg" Stretch="Fill"/>
  <Image Source="20070419171727764.jpg" Stretch="Fill" Margin="290.6,-100.213,-72.15,-44.572">
   <Image.Clip>
    <PathGeometry>
     <PathFigure IsClosed="True" IsFilled="True" StartPoint="221.9,234">
      <BezierSegment Point1="221.9,283.429485109856" Point2="181.829485109856,323.5" Point3="132.4,323.5" IsSmoothJoin="True" IsStroked="True"/>
      <BezierSegment Point1="82.970514890144,323.5" Point2="42.9,283.429485109856" Point3="42.9,234" IsSmoothJoin="True" IsStroked="True"/>
      <BezierSegment Point1="42.9,184.570514890144" Point2="82.970514890144,144.5" Point3="132.4,144.5" IsSmoothJoin="True" IsStroked="True"/>
      <BezierSegment Point1="181.829485109856,144.5" Point2="221.9,184.570514890144" Point3="221.9,234" IsSmoothJoin="True" IsStroked="True"/>
     </PathFigure>
    </PathGeometry>
   </Image.Clip>
  </Image>
  <Path HorizontalAlignment="Right" Margin="0,175.01,9.24,126.01" Width="144.51" Stretch="Fill" Stroke="#FF000000" Data="M478.74999,202.74993 L600.25097,319.24811 C600.25097,319.24811 616.75089,322.74789 622.23106,303.00905 624.44394,295.03853 501.74347,175.51037 501.74347,175.51037 501.74347,175.51037 489.50009,192.0001 478.74999,202.74993 z">
   <Path.Fill>
    <LinearGradientBrush EndPoint="0.507,0.499" StartPoint="0.396,0.608" SpreadMethod="Reflect">
     <GradientStop Color="#FF000000" Offset="0"/>
     <GradientStop Color="#FFFFFFFF" Offset="1"/>
    </LinearGradientBrush>
   </Path.Fill>
  </Path>
  <Ellipse d:LayoutOverrides="HorizontalAlignment, Height" Margin="332.4,43.786,119.6,222.214" Width="180" Height="180" Stroke="{x:Null}">
   <Ellipse.Fill>
    <RadialGradientBrush>
     <GradientStop Color="#00000000" Offset="0.885"/>
     <GradientStop Color="#FF0D0C0C" Offset="0.986"/>
     <GradientStop Color="#B3635D5D" Offset="0.962"/>
     <GradientStop Color="#FFDFD7D7" Offset="0.976"/>
    </RadialGradientBrush>
   </Ellipse.Fill>
  </Ellipse>
  <Rectangle HorizontalAlignment="Left" Margin="8,8,0,21.429" Width="291.6" Stroke="{x:Null}">
   <Rectangle.Fill>
    <RadialGradientBrush>
     <GradientStop Color="#00000000" Offset="0.885"/>
     <GradientStop Color="#FF050000" Offset="1"/>
     <GradientStop Color="#B3635D5D" Offset="0.962"/>
     <GradientStop Color="#FFDFD7D7" Offset="0.976"/>
    </RadialGradientBrush>
   </Rectangle.Fill>
  </Rectangle>
</Grid>
</Window>

扩展说明：
可以使用C#得到放大镜所在的位置而将相应区域放大，真正实现放大镜的动态模拟。今后如有时间和精力，我将制作完成之后贴出源代码。