首页 > 其他分享 >简述WPF中的画刷(Brush)

简述WPF中的画刷(Brush)

时间:2023-03-01 13:04:25浏览次数:47  
标签:画刷 填充 XAML System 简述 Brush WPF Drawing


我们知道,在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)_gdi+



从上图可以看出,WPF中的画刷都位于System.Windows.Media命名空间下。

继承自TileBrush的有三种:DrawingBrush,ImageBrush,VisualBrush; 继承自GradientBrush的有两种画刷:LinearGradientBrushRadialGradientBrush

加上SolidColorBrush,WPF中实际共有六种画刷(上图中已用画“勾”的方式标明)。

其中,SolidColorBrush使用单色填充指定区域,DrawingBrush是图画绘制画刷(包括矢量图和位图),ImageBrush是使用图像做画刷,而VisualBrush是以可视化的控件作为画刷,比如:可使用矩形Rect,文本TextBlock,甚至按钮Button、动画、视频等等作为画刷;与GDI+类似,WPF中使用LinearGradientBrush作为线性渐变画刷;但WPF新增了一个镭射渐变画刷RadialGradientBrush。

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

下面是一个空的“容器”,我们将用它来“装”各种东西。

简述WPF中的画刷(Brush)_图像处理_02


XAML代码:

<Ellipse x:Name="ellipseWithNothing" Width="113.56" Height="113.56" Fill="{x:Null}" Stroke="#FF000000" />

这里的Fill填充为空。接着我们给它填充点单一的颜色(SolidColorBrush):

简述WPF中的画刷(Brush)_wpf_03


XAML代码:

<Ellipse x:Name="ellipseWithSolidColorBrush" Width="113.56" Fill="#FFA21212" Stroke="#FF000000" />

注意这里的Fill属性,由于XAML最终被转化为.Net代码,这里的Fill也将转换为颜色为“#FFA21212”的SolidColorBrush。

如你对于WPF颜色方面有疑问,你可以参见我的这篇文章:GDI+与WPF中的颜色简析 接下来我们改用线性渐变颜色填充它:(使用LinearGradientBrush)

简述WPF中的画刷(Brush)_gdi+_04


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来定义渐变颜色的关键色及对应的位置参数设置)变多点花样,我们就可以做成一个带立体感的圆形按钮了:

简述WPF中的画刷(Brush)_wpf_05


XAML代码:

<Ellipse x:Name="ellipseWithLinearGradientBrushButtonOuter" Stroke="#FF000000" Horiznotallow="Left" Margin="130.015,156.959,0,175.481" Width="113.559">
<Ellipse.Fill>
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" Horiznotallow="Left" Margin="142.264,169.263,0,187.731">
<Ellipse.Fill>
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:

简述WPF中的画刷(Brush)_图像处理_06


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>再变变花样,将中心点移一移,看看是什么样子的:

简述WPF中的画刷(Brush)_wpf_07


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填充的效果(这里使用了我的一个好友的图片,美女哟!):

简述WPF中的画刷(Brush)_图形_08


XAML代码:

<Ellipse x:Name="ellipseWithImageBrush" Stroke="#FF000000" Width="113" Height="113">
<Ellipse.Fill>
<ImageBrush ImageSource="xian.png"/>
</Ellipse.Fill>
</Ellipse>

再来看看使用VisualBrush填充的效果:

简述WPF中的画刷(Brush)_button_09


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 Fnotallow="10pt" Margin="2">BrawDraw</TextBlock>
<Button Margin="10">Button</Button>
</StackPanel>
</VisualBrush.Visual>
</VisualBrush>
</Ellipse.Fill>
</Ellipse>

看到没?这里使用了Rectangle,TextBlock,Button几种可视化的控件作为画刷,填充到了Ellipse中。轮到DrawingBrush出场了:

简述WPF中的画刷(Brush)_图形_10


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)〔本篇〕

标签:画刷,填充,XAML,System,简述,Brush,WPF,Drawing
From: https://blog.51cto.com/JohnsonJu/6090257

相关文章

  • WPF知识点备忘录——MVVM原理
    通知类namespaceWPFMVVM.ViewModels{classNotificationObject:INotifyPropertyChanged{publiceventPropertyChangedEventHandlerPropertyCh......
  • WPF知识点备忘录——数据绑定
     DataContext绑定this.DataContext=newBindingAndValidationViewModel();绑定到集合ObservableCollection<ViewModel.Product>vProducts=new......
  • [转]Bundle Adjustment简述
    原文链接:https://optsolution.github.io/archives/58892.html或https://blog.csdn.net/optsolution/article/details/64442962......
  • WPF中图形表示语法详解(Path之Data属性语法)
    老规矩,看图说话。先看显示效果:(图1)XAML(代码A):<Pagexmlns="​​http://schemas.microsoft.com/winfx/2006/xaml/presentation​​​"xmlns:x="​​http://schemas.microsof......
  • WPF体验系列
    从今天开始,我将陆续分享对WPF的体验系列,敬请垂注。这里将陆续列出所有WPF体验系列的目录(不断更新中),如果你认为有一定参考价值,你可以收藏它。以下是拟建的部分目录(不断增......
  • 给WPF示例图形加上方便查看大小的格子之完善版本
    去年10月份,我曾写过一篇"给WPF示例图形加上方便查看大小的格子"的BLOG,这次由于需要,将它完善一下,可以有效地区别100的整数倍逻辑像素(与设备无关像素)单位的显示。显示效......
  • WPF中任意Object的XAML代码格式化输出
    有时候,我们需要将WPF中的控件自身的XAML代码输出成文本,那么,我们可以使用System.Windows.Markup.XamlWriter.Save()方法来完成此任务。关于XamlWriter.Save()的示例,我曾经......
  • WPF中制作立体效果的文字或LOGO图形
    较久之前,我曾写过一篇:“​​WPF绘制党徽(立体效果,Cool)​​ ”的博文。有感兴趣的朋友来EMAIL问是怎么制作的?本文解决此类问题。有时,为了美观的需要,我们可能需要在应用程......
  • WPF中制作立体效果的文字或LOGO图形(续)
    上篇“WPF中制作立体效果的文字或LOGO图形”中讲述了立体LOGO图形的制作方法。从程序开发人员的角度来讲,这样的做法是不能令人满意的。首先,费时费力效率不高;其次,完全没有通......
  • WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示
    为方便描述,这里仅以正方形来做演示,其他图形从略。运行时效果图:XAML代码://Transform.XAML<CanvasWidth="700"Height="700"xmlns="​​http://schemas.microsoft.com/......