畫筆和圖像

畫筆和圖像

畫筆想必大家都不陌生，這里系統(tǒng)的介紹一下好了。先來介紹純色畫筆。

純色畫筆

最簡單的純色畫筆就是已經(jīng)定義好名字的啦，比如 Red 和 Green 這種，據(jù)說一共有 256 種已命名的，所以基本已經(jīng)夠用啦。XAML 解析器會自動將這些顏色名稱鏈接到 Color 結(jié)構(gòu)。

還有就是傳說中的十六進制顏色值，它可以定義精確的 24 位顏色值，其中有 8 位用于 SolidColorBrush。如下代碼所示的，alpha="FF"，紅色="55"，綠色="00"，藍色="88"。

<Rectangle Width="200" Height="100" Fill="#FF550088" />

還有一種稱為屬性元素語法。具體用法如下，其中 Opacity 就是透明度咯。

  <Rectangle Width="200" Height="100">
     <Rectangle.Fill>
        <SolidColorBrush Color="Yellow" Opacity="0.3" />
     </Rectangle.Fill>
  </Rectangle>

漸變畫筆

除了純色畫筆外，還有漸變畫筆。小時候?qū)W PhotoShop 的時候最喜歡漸變畫筆了。

LinearGradientBrush 會沿著一條稱為漸變軸直線來進行漸變以繪制一個區(qū)域。我們還是拿 Rectangle 來做示例。

   <Rectangle Width="200" Height="100">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Green" Offset="0.0" x:Name="GradientStop1"/>
                    <GradientStop Color="Blue" Offset="0.25" x:Name="GradientStop2"/>
                    <GradientStop Color="Wheat"  Offset="0.7" x:Name="GradientStop3"/>
                    <GradientStop Color="Yellow" Offset="0.75" x:Name="GradientStop4"/>
                    <GradientStop Color="Gold" Offset="1.0" x:Name="GradientStop5"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

通過改變 StartPoint 和 EndPoint 的屬性值可以創(chuàng)建各種漸變哦，比如垂直和水平方向的漸變，還可以顛倒?jié)u變方向，甚至還可以加快漸變速度呢。

直接添加圖片

除了用著兩種畫筆外，還可以直接將圖片添加進來呢。

 <Ellipse Height="100" Width="200">
    <Ellipse.Fill>
        <ImageBrush ImageSource="9327.jpg"/>
    </Ellipse.Fill>
</Ellipse>

效果如下咯，主要是有一張合適的圖片啦。

既然用到了 ImageBrush，那就來看看 Image 和 ImageBrush 的區(qū)別好了。前者主要用來呈現(xiàn)圖像，后者則為其他對象繪制為一個圖像。

Stretch 屬性

對于 Image，我們可以來拉伸圖像，也就是 Stretch 屬性：

• None：圖像不經(jīng)過拉伸。如果源圖像比所留給 Image 的區(qū)域大，那么就會被剪切。
• Uniform：按照縱橫比來縮放圖像。
• UniformToFill：按照縱橫比來填滿所有區(qū)域，這意味著可能會有一部分不可見。
• Fill。因為不保留縱橫比而填滿屏幕，所以圖像部分全部可見，但會產(chǎn)生畫面變形（失真）。

具體效果見下圖（來源于網(wǎng)絡）。

Clip 屬性

用 Clip 屬性可以對圖像進行剪裁，Rect 屬性在上一篇博客中用過許多次，前 2 個值為起始點的 X 軸和 Y 軸坐標，后 2 個值為終點的 X 軸和 Y 軸坐標。

<Image Source="9327.jpg">
    <Image.Clip>
        <RectangleGeometry Rect="10,10,100,100"/>
    </Image.Clip>
</Image>

Image 和 ImageBrush 能處理的圖像格式有如下幾種：

• JPEG XR
• 圖標（ICO）
• 位圖（BMP）
• 圖像交換格式（GIF）
• 聯(lián)合圖像專家組（JPEG）
• 可移植網(wǎng)絡圖像（PNG）
• 標記圖像文件格式（TIEF）