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

最新文章

  1. 使用javaScript实现简单倒计时功能
  2. 在腾讯云上创建您的SQL Cluster(3)
  3. golang实现ping命令
  4. android事件系列-onTouch事件与手势操作
  5. ESB数据发布思路
  6. hdu 1253 胜利大逃亡(广搜,队列,三维,简单)
  7. html5移动web开发实战必读书记
  8. 关于bootStrapdialog 学习心得
  9. HDU 1879 继续畅通工程 (Prim(普里姆算法)+Kruskal(克鲁斯卡尔))
  10. 全栈JavaScript之路(七)学习 Comment 类型节点.
  11. 探索Android该Parcel机制(上)
  12. 微信小程序 开发文档
  13. Re:Exgcd解二元不定方程
  14. No principal was found in the response from the CAS server
  15. nginx+tomcat9+redisson+redis+jdk1.8简单实现session共享
  16. 深入浅出 JVM GC(4)常用 GC 参数介绍
  17. 搭建Django项目
  18. linux内核分析第一次实验
  19. ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(一)
  20. 设置 Linux 服务器中 MySQL 允许远程访问

热门文章

  1. [outlook] [vba] Highlight text in body of incoming emails
  2. 关于spring获取webApplication.getBean多种途径和简单解释
  3. [AngularJS NG-redux] Handle Asynchronous Operations with Middleware
  4. angular组件间的信息传递
  5. 【23.39%】【codeforces 558C】Amr and Chemistry
  6. 使用URLConnection获取网页信息的基本流程 分类: H1_ANDROID 2013-10-12 23:51 3646人阅读 评论(0) 收藏
  7. Android 使用binder访问service的方式
  8. sourceinsight4
  9. ZooKeeper简单使用
  10. 二、Reids基础命令--字符串