1. 程式人生 > >簡述WPF中的畫刷(Brush)

簡述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中的顏色簡析

接下來我們改用線性漸變顏色填充它:(使用LinearGradientBrushLinearGradientBrush填充 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:RadialGradientBrushXAML程式碼:   <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的相關技術。

--------------------- 本文來自 大可山人 的CSDN 部落格 ,全文地址請點選:https://blog.csdn.net/johnsuna/article/details/1772358?utm_source=copy