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

WPF中利用RadialGradient模拟放大镜效果的更多相关文章

  1. 在WPF中使用PlaneProjection模拟动态3D效果

    原文:在WPF中使用PlaneProjection模拟动态3D效果 虽然在WPF中也集成了3D呈现的功能,在简单的3D应用中,有时候并不需要真实光影的3D场景.毕竟使用3D引擎会消耗很多资源,有时候使 ...

  2. 利用jquery模拟select效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. WPF中利用后台代码实现窗口分栏动态改变

    在WPF中实现窗口分栏并能够通过鼠标改变大小已经非常容易,例如将一个GRID分成竖排三栏显示,就可以将GRID先分成5列,其中两个固定列放GridSplitter. <Grid Backgrou ...

  4. WPF中利用DynamicDataDisplay快速实现示波器功能

    DynamicDataDisplay控件是一个功能很强的绘图工具,除了能生成曲线外,还有很多其他功能,具体见http://dynamicdatadisplay.codeplex.com/.这里你也能下 ...

  5. WPF中利用控件的DataContext属性为多个TextBox绑定数据

    工作上需要从给定的接口获取数据,然后显示在界面的编辑框中,以往肯定会一个一个的去赋值,但这样太麻烦而且效率很低,不利于维护,于是想到了数据绑定这一方法,数据绑定主要利用INotifyPropertyC ...

  6. WPF设置VistualBrush的Visual属性制作图片放大镜效果

    原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...

  7. wpf实现IE菜单栏自动隐藏效果

    IE菜单栏默认为隐藏状态,按下键盘Alt键后显示,菜单失去焦点则自动隐藏.下面说说WPF中如何实现这样的效果. 第一步:Menu默认设置为隐藏(Visibility="Collapsed&q ...

  8. WPF在3D Cad模型中利用TextureCoordinates实现颜色渐变显示偏差值的变化

    原文:WPF在3D Cad模型中利用TextureCoordinates实现颜色渐变显示偏差值的变化 注:最近在做3D机械模型重建方面的软件,需要根据光栅传感器采集的数据绘制3D图形,并显示出色差以及 ...

  9. 关于jQuery中实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

随机推荐

  1. windows ffmpeg 的安装

    本文我们要安装的是 windows 下的 ffmpeg 命令行工具,安装的步骤十分简单,分为:下载.解压.配置环境变量. 下载,进入 http://ffmpeg.org/download.html#b ...

  2. php中模拟多继承如何实现

    php中模拟多继承如何实现 一.总结 一句话总结:其实你继承别人也是想调用别人类里面的方法和属性,所以可以这样做:这本类中创建目标类的对象,然后通过这个对象来调用方法和属性,这样比继承来的方便. 二. ...

  3. term- xshell VS securecrt

    Xshell使用技巧总结 https://www.cnblogs.com/zhangwuji/p/7155575.html SecureCRT与Xshell简单对比 http://ju.outofme ...

  4. (七)RabbitMQ消息队列-通过fanout模式将消息推送到多个Queue中

    原文:(七)RabbitMQ消息队列-通过fanout模式将消息推送到多个Queue中 前面第六章我们使用的是direct直连模式来进行消息投递和分发.本章将介绍如何使用fanout模式将消息推送到多 ...

  5. 用live555将内网摄像机视频推送到外网server,附源代码

    近期非常多人问,怎样将内网的摄像机流媒体数据公布到公网,假设用公网与局域网间的port映射方式太过麻烦,一个摄像机要做一组映射,并且不是每个局域网都是有固定ip地址,即使外网主机配置好了每个摄像机的映 ...

  6. POJ 2914 Minimum Cut 最小割算法题解

    最标准的最小割算法应用题目. 核心思想就是缩边:先缩小最大的边.然后缩小次大的边.依此缩小 基础算法:Prime最小生成树算法 只是本题測试的数据好像怪怪的,相同的算法时间执行会区别非常大,并且一样的 ...

  7. Hadoop配置文件 分类: A1_HADOOP 2014-08-19 12:48 1157人阅读 评论(1) 收藏

    部分内容参考:http://www.linuxqq.net/archives/964.html  http://slaytanic.blog.51cto.com/2057708/1100974/ ha ...

  8. 菜鸟学习Spring——60s利用JoinPoint获取參数的值和方法名称

    一.概述 AOP的实现方法在上两篇博客中已经用了两种方法来实现如今的问题来了尽管我们利用AOP,那么client怎样信息传递?利用JoinPoint接口来实现client给详细实现类的传递參数. 二. ...

  9. 【p093】细胞分裂

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] Hanks博士是BT(Bio-Tech,生物技术)领域的知名专家.现在,他正在为一个细胞实验做准备工作 ...

  10. 网站多语言转换.利用Google 语言的js.贴到网站就能用.

    <div id="google_translate_element"></div><script>function googleTranslat ...