开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

简述WPF中的画刷(Brush)

简介: 原文:简述WPF中的画刷(Brush) --------------------------------------------------------------------------------引用或转载时请保留以下信息:大可山 [MSN:a3news(AT)hotmail.
+关注继续查看
原文:简述WPF中的画刷(Brush)

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

我们知道,在GDI+中,画刷用于填充图形形状,如矩形、椭圆、扇形、多边形和封闭路径。在GDI+中,画刷分为以下几种:SolidBrush,TextureBrush,HatchBrush,LinearGradientBrush和PathGradientBrush。在层次关系上,它们都位于System.Drawing空间下,继承自System.Drawing.Brush类。

其中SolidBrush定义单色画刷;TextureBrush定义纹理画刷,HatchBrush使用预定义的50余种图案做画刷,LinearGradientBrush是线性渐变画刷,PathGradientBrush是通过渐变填充GraphicsPath对象的内部。

它们的继承关系如下图:
System.Object
  System.MarshalByRefObject
    System.Drawing.Brush
      System.Drawing.SolidBrush
      System.Drawing.TextureBrush
      System.Drawing.Drawing2D.HatchBrush
      System.Drawing.Drawing2D.LinearGradientBrush
      System.Drawing.Drawing2D.PathGradientBrush

那么,在WPF中,是如何定义画刷的呢?它们与GDI+中的画刷相比,又有些什么独特之处呢?

首先,我们来看看WPF中有哪些画刷?

从大分类来讲,WPF中的画刷分为三大类:单色画刷SolidColorBrush,可平铺的画刷TileBrush和渐变画刷GradientBrush

不妨先看看它们的继承关系:
WPF中Brush继承关系图

从上图可以看出,WPF中的画刷都位于System.Windows.Media命名空间下。
继承自TileBrush的有三种:DrawingBrush,ImageBrush,VisualBrush; 继承自GradientBrush的有两种画刷:LinearGradientBrushRadialGradientBrush
加上SolidColorBrush,WPF中实际共有六种画刷(上图中已用画“勾”的方式标明)。
其中,SolidColorBrush使用单色填充指定区域,DrawingBrush是图画绘制画刷(包括矢量图和位图),ImageBrush是使用图像做画刷,而VisualBrush是以可视化的控件作为画刷,比如:可使用矩形Rect,文本TextBlock,甚至按钮Button、动画、视频等等作为画刷;与GDI+类似,WPF中使用LinearGradientBrush作为线性渐变画刷;但WPF新增了一个镭射渐变画刷RadialGradientBrush。

让我们来看看它们都“长”成什么样子吧。还是以实例来走马观花式地看看它们。

下面是一个空的“容器”,我们将用它来“装”各种东西。
空的容器
XAML代码:
<Ellipse x:Name="ellipseWithNothing" Width="113.56" Height="113.56" Fill="{x:Null}" Stroke="#FF000000" />
这里的Fill填充为空。

接着我们给它填充点单一的颜色(SolidColorBrush):
SolidColorBrush填充的效果
XAML代码:
<Ellipse x:Name="ellipseWithSolidColorBrush" Width="113.56" Fill="#FFA21212" Stroke="#FF000000" />
注意这里的Fill属性,由于XAML最终被转化为.Net代码,这里的Fill也将转换为颜色为“#FFA21212”的SolidColorBrush。
如你对于WPF颜色方面有疑问,你可以参见我的这篇文章:GDI+与WPF中的颜色简析

接下来我们改用线性渐变颜色填充它:(使用LinearGradientBrush
LinearGradientBrush填充
XAML代码:
  <Ellipse x:Name="ellipseWithLinearGradientBrush" Height="113.56" Stroke="#FF000000" Width="113.56">
   <Ellipse.Fill>
    <LinearGradientBrush EndPoint="0.851,0.838" StartPoint="0.115,0.169">
     <GradientStop Color="#FFA21212" Offset="0"/>
     <GradientStop Color="#FFF8C906" Offset="1"/>
    </LinearGradientBrush>
   </Ellipse.Fill>

  </Ellipse>
(注意:这里使用了GradientStop来定义渐变颜色的关键色及对应的位置参数设置)

变多点花样,我们就可以做成一个带立体感的圆形按钮了:
线性渐变做成的按钮
XAML代码:
<Ellipse x:Name="ellipseWithLinearGradientBrushButtonOuter" Stroke="#FF000000" HorizontalAlignment="Left" Margin="130.015,156.959,0,175.481" Width="113.559">
   <Ellipse.Fill>
    <LinearGradientBrush EndPoint="0.851,0.838" StartPoint="0.115,0.169">
     <GradientStop Color="#FFA21212" Offset="0"/>
     <GradientStop Color="#FFF8C906" Offset="1"/>
    </LinearGradientBrush>

   </Ellipse.Fill>
  </Ellipse>
  <Ellipse x:Name="ellipseWithLinearGradientBrushButtonInner" Stroke="#FF000000" Width="89.006" HorizontalAlignment="Left" Margin="142.264,169.263,0,187.731">
   <Ellipse.Fill>
    <LinearGradientBrush EndPoint="0.129,0.129" StartPoint="0.879,0.845">
     <GradientStop Color="#FFA21212" Offset="0"/>
     <GradientStop Color="#FFF8C906" Offset="1"/>
    </LinearGradientBrush>

   </Ellipse.Fill>
  </Ellipse>
(注:这里只是将起始颜色的起始、终止点进行了反向,这样就产生了立体的效果)

接着,我们使用RadialGradientBrush:
RadialGradientBrush
XAML代码:
  <Ellipse x:Name="ellipseWithRadialGradientBrush" Height="113.56" Stroke="#FF000000">
   <Ellipse.Fill>
    <RadialGradientBrush>
     <GradientStop Color="#FFA21212" Offset="1"/>
     <GradientStop Color="#FFF8C906" Offset="0"/>
    </RadialGradientBrush>
   </Ellipse.Fill>
  </Ellipse>

再变变花样,将中心点移一移,看看是什么样子的:
中心点移位后的镭射渐变效果
XAML代码:
  <Ellipse x:Name="ellipseWithRadialGradientBrushCenterOffset" Stroke="#FF000000">
   <Ellipse.Fill>
    <RadialGradientBrush GradientOrigin="0.399,0.149">
     <GradientStop Color="#FFA21212" Offset="1"/>
     <GradientStop Color="#FFF8C906" Offset="0"/>
    </RadialGradientBrush>
   </Ellipse.Fill>
  </Ellipse>

下面来看看使用ImageBrush填充的效果(这里使用了我的一个好友的图片,美女哟!):
使用ImageBrush(美女图片)填充的效果
XAML代码:
<Ellipse x:Name="ellipseWithImageBrush" Stroke="#FF000000" Width="113" Height="113">
   <Ellipse.Fill>
    <ImageBrush ImageSource="xian.png"/>
   </Ellipse.Fill>
  </Ellipse>

再来看看使用VisualBrush填充的效果:
VisualBrush填充
XAML代码:
<Ellipse x:Name="ellipseWithVisualBrush" Width="113" Stroke="#FF000000" Height="113">
  <Ellipse.Fill>
<VisualBrush>
      <VisualBrush.Visual>
        <StackPanel Background="White">
          <Rectangle Width="25" Height="25" Fill="Orange" Margin="6" />
          <TextBlock FontSize="10pt" Margin="2">BrawDraw</TextBlock>
          <Button Margin="10">Button</Button>
        </StackPanel>
      </VisualBrush.Visual>
    </VisualBrush>
</Ellipse.Fill>
  </Ellipse>
看到没?这里使用了Rectangle,TextBlock,Button几种可视化的控件作为画刷,填充到了Ellipse中。

轮到DrawingBrush出场了:
DrawingBrush填充后的效果
XAML代码:
<Ellipse x:Name="ellipseWithDrawingBrush" Stroke="#FF000000" Width="113" Height="113">
  <Ellipse.Fill>
  <DrawingBrush Viewport="0,0,0.5,0.5" TileMode="Tile">
          <DrawingBrush.Drawing>
            <GeometryDrawing Brush="Red">
              <GeometryDrawing.Geometry>
                <GeometryGroup>
                  <EllipseGeometry RadiusX="20" RadiusY="45" Center="50,50" />
                  <EllipseGeometry RadiusX="45" RadiusY="20" Center="50,50" />
                </GeometryGroup>
              </GeometryDrawing.Geometry>
              <GeometryDrawing.Pen>
                <Pen Thickness="10">
                  <Pen.Brush>
                    <LinearGradientBrush>
                      <GradientStop Offset="0.0" Color="Black" />
                      <GradientStop Offset="1.0" Color="Gray" />
                    </LinearGradientBrush>
                  </Pen.Brush>
                </Pen>
              </GeometryDrawing.Pen>
            </GeometryDrawing>
          </DrawingBrush.Drawing>
        </DrawingBrush>
</Ellipse.Fill>
  </Ellipse>
这里使用了GeometryDrawing 作为内部填充的图案,还使用了作为LinearGradientBrush画笔来绘制内部图案的。

总结一下:
WPF的画刷与GDI+中的画刷相比,有很大的进步,功能更强大了。WPF新增了DrawingBrush图画绘制画刷(包括矢量图和位图),而VisualBrush是以可视化的控件作为画刷,WPF新增了一个镭射渐变画刷RadialGradientBrush。需要指出的是,WPF中多数显示效果都使用硬件(显示)的运算能力而不是软件来展现,这都得益于DirectX 9/10的相关技术。

相关文章:
深入WPF中的图像画刷(ImageBrush)之1——ImageBrush使用举例
深入WPF中的图像画刷(ImageBrush)之2——ImageBrush的铺设方式
简述WPF中的画刷(Brush)〔本篇〕

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
WPF 的毛玻璃效果
原文:WPF 的毛玻璃效果 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/koloumi/article/details/76917519 ...
986 0
GDI+与WPF中的颜色简析
原文:GDI+与WPF中的颜色简析 --------------------------------------------------------------------------------引用或转载时请保留以下信息:大可山 [MSN:a3news(AT)hotmail.
999 0
WPF中Polyline拐角的bug
原文:WPF中Polyline拐角的bug       Polyline绘制折线在小角度(比如几度)的时候会出现不连续的现象,形成拐角的两条线段中有一段会超出,角度越小越明显。
623 0
WPF中的动画——(一)基本概念
原文:WPF中的动画——(一)基本概念 WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面。首先,我们来复习一下动画的基本概念。计算机中的动画一般是定格动画,也称之为逐帧动画,它通过每帧不同的图像连续播放,从而欺骗眼和脑产生动画效果。
717 0
2000条你应知的WPF小姿势 基础篇<74-77 WPF 多窗口Tips>
原文:2000条你应知的WPF小姿势 基础篇   在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师。最为出色的是他维护了两个博客:2,000Things You Should Know About C#  和 2,000 Things You Should Know About WPF 。
669 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载