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

116 篇文章 9 订阅

--------------------------------------------------------------------------------
引用时请保留以下信息:
大可山 [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#得到放大镜所在的位置而将相应区域放大,真正实现放大镜的动态模拟。今后如有时间和精力,我将制作完成之后贴出源代码。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值