1. 程式人生 > >深入WPF中的影象畫刷 ImageBrush 之1——ImageBrush使用舉例

深入WPF中的影象畫刷 ImageBrush 之1——ImageBrush使用舉例

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!

               

昨天我在《簡述WPF中的畫刷(Brush)  》中簡要介紹了WPF中的畫刷的使用。現在接著深入研究一下其中的ImageBrush。

如上文所述,ImageBrush是一種TileBrush,它使用ImageSource屬性來定義影象作為畫刷的繪製內容。你可以控制影象的縮放、對齊、鋪設方式。ImageBrush可用於繪製形狀、控制元件,文字等。

下面看看它的一些簡單應用:
首先看一下效果圖片:
ImageBrush應用
先看看上圖的左邊部分:
圖1為原始圖片,圖2是將原始圖片作為Border的繪製畫刷的效果,圖3是將圖片應用於TextBlock的效果(為了演示,我增加了BitmapEffect效果)。
看看圖2的XAML程式碼:
<Border BorderThickness="20,40,5,15" x:Name="borderWithImageBrush"  Margin="11.331,178.215,157.086,117.315">
   <Border.BorderBrush>
    <ImageBrush ImageSource

="summer.jpg" Viewport="0,0,1,1" />
   </Border.BorderBrush>
   <DockPanel>
    <TextBlock DockPanel.Dock="Top" TextWrapping="Wrap" Margin="10">
        <Run Text="使用ImageBrush繪製的邊框"/>
    </TextBlock>
   </DockPanel>
  </Border>
(C#程式碼略)

再看看圖3的XAML程式碼:
  <TextBlock FontWeight="Bold" FontSize="56pt" FontFamily="Arial"
   Text="BrawDraw" x:Name="wordsWithImageBrush" Height="88.214" Margin="11.331,0,143.972,7.996" VerticalAlignment="Bottom">
   <TextBlock.Foreground>
    <ImageBrush ImageSource="Summer.jpg" />
   </TextBlock.Foreground>
   <TextBlock.BitmapEffect>
    <OuterGlowBitmapEffect GlowColor="Black" GlowSize="8" Noise="0" Opacity="0.6" />
   </TextBlock.BitmapEffect>

  </TextBlock>
淺藍色底部分為關鍵程式碼,黃色底部分為增加的外發光特效(也就是Photoshop中常說的“輝光效果”)。
關鍵部分的C#程式碼為:
TextBlock wordsWithImageBrush = new TextBlock();
// ...(其他定義wordsWithImageBrush屬性的程式碼)
ImageBrush berriesBrush = new ImageBrush();
berriesBrush.ImageSource =
                new BitmapImage(
                    new Uri(@"Summer.jpg", UriKind.Relative)
                );
wordsWithImageBrush.Foreground = berriesBrush;

OuterGlowBitmapEffect glowEffect = new OuterGlowBitmapEffect();
glowEffect.GlowSize = 8;
glowEffect.GlowColor = Color.Black;
glowEffect.Noise = 0;
glowEffect.Opacity = 0.6;
wordsWithImageBrush.BitmapEffect = glowEffect;

再看看右邊部分:
圖4是使用了ImageBrush填充Ellipse的效果,這裡使用了我的一個美女好友的圖片。(相關程式碼見下)
圖4的XAML程式碼:
<Ellipse x:Name="ellipseWithImageBrush" Stroke="#FF000000" Height="150" Width="150">
   <Ellipse.Fill>
    <ImageBrush ImageSource="xian.png"/>
   </Ellipse.Fill>

  </Ellipse>
關鍵的C#程式碼:
ImageBrush imgBrush = new ImageBrush();
imgBrush.ImageSource =
                new BitmapImage(
                    new Uri(@"xian.png", UriKind.Relative)
                );
ellipseWithImageBrush.Fill = imgBrush;

圖5使用了ImageBrush的鋪設方式屬性之後的效果。(具體程式碼見下一篇文章《深入WPF中的影象畫刷(ImageBrush)之2——ImageBrush的鋪設方式》

圖6與圖3類似,不同的是使用了DropShadowBitmapEffect,同時還對文字大小進行了變形處理(垂直高度加高至128%)。
圖6的XAML程式碼:
<TextBlock FontWeight="Bold" FontSize="56pt" TextWrapping="Wrap" FontFamily="Arial Black"
   Text="Girl" x:Name="wordsWithGirlImageBrush" RenderTransformOrigin="0.5,0.5" Height="97.468" Margin="0,0,2.086,2.144" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="153.697">
   <TextBlock.Foreground>
    <ImageBrush ImageSource="xian.png" />
   </TextBlock.Foreground>
   <TextBlock.BitmapEffect>
    <DropShadowBitmapEffect Color="Black" Direction="315" ShadowDepth="4" Softness="0.5"
         Opacity="1.0"/>
   </TextBlock.BitmapEffect>
   <TextBlock.RenderTransform>
    <TransformGroup>
     <ScaleTransform ScaleX="1" ScaleY="1.28"/>
    </TransformGroup>
   </TextBlock.RenderTransform>
  </TextBlock>
(C#程式碼略)

從上面例子中,我們可以思考一下,以前如果要在GDI+中實現文字的輝光效果、陰影效果,是不是需要寫非常多的C#程式碼?現在,WPF已經不再麻煩,幾句程式碼搞定!你是不是想將它們儲存為圖片?如是,讀讀我以前寫的這篇BLOG吧:WPF中,如何使用影象API進行繪製而不是XAML?

相關文章:
深入WPF中的影象畫刷(ImageBrush)之1——ImageBrush使用舉例 〔本篇〕
深入WPF中的影象畫刷(ImageBrush)之2——ImageBrush的鋪設方式
簡述WPF中的畫刷(Brush)

           

給我老師的人工智慧教程打call!http://blog.csdn.net/jiangjunshow

這裡寫圖片描述