畫筆和圖像

畫筆和圖像

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

純色畫筆

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

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

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

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

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

漸變畫筆

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

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

   <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變方向，甚至還可以加快漸變速度呢。

直接添加圖片

除了用著兩種畫筆外，還可以直接將圖片添加進(jìn)來(lái)呢。

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

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

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

Stretch 屬性

對(duì)于 Image，我們可以來(lái)拉伸圖像，也就是 Stretch 屬性：

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

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

Clip 屬性

用 Clip 屬性可以對(duì)圖像進(jìn)行剪裁，Rect 屬性在上一篇博客中用過許多次，前 2 個(gè)值為起始點(diǎn)的 X 軸和 Y 軸坐標(biāo)，后 2 個(gè)值為終點(diǎn)的 X 軸和 Y 軸坐標(biāo)。

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

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

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