Silverlight學習筆記(八)-----畫刷、着色


  
  Silverlight除了提供基本的RGB色值之外,還提供了Alpha值---對象的透明度,而且透明度值固定放在RGB顏色值的前面.因此Silverlight中的一組顏色值包含四個部分,即ARGB,其中當A為FF時表示不透明,相反A為00時對象會完全透明,變得不可見。

1  <Canvas Width="400" Height="320">
2 <Ellipse Width="100" Height="100" Fill="#88FF0000" Canvas.Top="60" Canvas.Left="160"></Ellipse>
3 <Ellipse Width="100" Height="100" Fill="#8800FF00" Canvas.Top="120" Canvas.Left="120"></Ellipse>
4 <Ellipse Width="100" Height="100" Fill="#880000FF" Canvas.Top="120" Canvas.Left="200"></Ellipse>
5 </Canvas>

                    

———————————————————————————————————完美分割線——————————————————————————————

畫刷Brush類型
1、SolidColorBrush:純色畫刷填充單一顏色到當前區域。
eg:填充矩形

 1 <StackPanel Orientation="Vertical">
2 <!--Stoke 進行輪廓填充-->
3 <Ellipse Width="200" Height="100" Stroke="Black" StrokeThickness="5">
4 <!--fill 進行背景填充-->
5 <Ellipse.Fill>
6 <SolidColorBrush Color="#88FF0000"></SolidColorBrush>
7 </Ellipse.Fill>
8 </Ellipse>
9 <Ellipse Width="200" Height="100">
10 <Ellipse.Fill>
11 <SolidColorBrush Color="#8800FF00"></SolidColorBrush>
12 </Ellipse.Fill>
13 </Ellipse>
14 <Ellipse Width="200" Height="100">
15 <Ellipse.Fill>
16 <SolidColorBrush Color="#880000FF"></SolidColorBrush>
17 </Ellipse.Fill>
18 </Ellipse>
19 </StackPanel>

              

 

2、LinearGradientBrush:線性漸變畫刷填充線性漸變顏色到當前區域,可以任意搭配兩種或兩種以上的顏色。
  LinearGradientBrush中,重要的屬性有GradientStop(傾斜點)、Color(漸變顏色)、Offset(偏移量)、StartPoint(起點坐標)、EndPoint(終點坐標)。
  LinearGradientBrush的漸變色產生一般是多個傾斜點對象組成,其中傾斜點對象的漸變顏色和偏移量這兩個屬性用來決定漸變色值和他的開始位置,我們可以簡單地把偏移量理解成一個寬度范圍,整個的偏移量寬度是1.0。因此,只要設置好傾斜點的屬性,那么系統就能夠自動地在兩個傾斜點之間填充好這兩種顏色的漸變過程中的顏色。

  eg:漸變顏色為red和blue,傾斜點的偏移屬性表示從0.0坐標開始產生漸變到1.0坐標結束

 1 <Canvas Width="400" Height="320" >
2 <Rectangle Canvas.Top="80" Canvas.Left="50" Width="300" Height="150">
3 <Rectangle.Fill>
4 <LinearGradientBrush>
5 <GradientStop Color="Red" Offset="0.0"></GradientStop>
6 <GradientStop Color="Blue" Offset="1.0"></GradientStop>
7 </LinearGradientBrush>
8 </Rectangle.Fill>
9 </Rectangle>
10 </Canvas>

              
  設置多個傾斜點的效果:

 1 <Canvas Width="400" Height="320" >
2 <Rectangle Canvas.Top="80" Canvas.Left="50" Width="300" Height="150">
3 <Rectangle.Fill>
4 <LinearGradientBrush>
5 <GradientStop Color="Red" Offset="0.0"></GradientStop>
6 <GradientStop Color="Yellow" Offset="0.2"></GradientStop>
7 <GradientStop Color="Pink" Offset="0.4"></GradientStop>
8 <GradientStop Color="Green" Offset="0.6"></GradientStop>
9 <GradientStop Color="Blue" Offset="0.8"></GradientStop>
10 <GradientStop Color="Black" Offset="1.0"></GradientStop>
11 </LinearGradientBrush>
12 </Rectangle.Fill>
13 </Rectangle>
14 </Canvas>

              

  同樣的,我們還可以根據起始點和結束點來控制漸變的角度。

 1  <Canvas Width="600" Height="420" >
2 <Rectangle Canvas.Top="10" Canvas.Left="50" Width="300" Height="150">
3 <Rectangle.Fill>
4 <!--水平漸變填充-->
5 <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
6 <GradientStop Color="Green" Offset="0.0"></GradientStop>
7 <GradientStop Color="White" Offset="1.0"></GradientStop>
8 </LinearGradientBrush>
9 </Rectangle.Fill>
10 </Rectangle>
11 <Rectangle Canvas.Top="180" Canvas.Left="50" Width="300" Height="150">
12 <Rectangle.Fill>
13 <!--垂直漸變填充-->
14 <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
15 <GradientStop Color="Green" Offset="0.0"></GradientStop>
16 <GradientStop Color="White" Offset="1.0"></GradientStop>
17 </LinearGradientBrush>
18 </Rectangle.Fill>
19 </Rectangle>
20 </Canvas>

              

3、RadialGradientBrush:放射漸變畫刷填充放射狀漸變顏色到當前區域,類似於LinearGradientBrush,但是它產生的是一個圓形的漸變顏色,從圖形的中間部分向四周組建擴展。
  
  eg:不同的傾斜原點和中心值顯示不同效果

 1 <StackPanel Orientation="Horizontal" Width="624" Height="460">
2 <Ellipse Width="180" Height="180" Margin=" 50 0 150 0">
3 <Ellipse.Fill>
4 <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5">
5 <GradientStop Color="Blue" Offset="1"></GradientStop>
6 <GradientStop Color="White" Offset="0"></GradientStop>
7 </RadialGradientBrush>
8 </Ellipse.Fill>
9 </Ellipse>
10 <Ellipse Width="180" Height="180">
11 <Ellipse.Fill>
12 <RadialGradientBrush GradientOrigin="0.3,0.2" Center="0.3,0.2">
13 <GradientStop Color="Blue" Offset="1"></GradientStop>
14 <GradientStop Color="White" Offset="0"></GradientStop>
15 </RadialGradientBrush>
16 </Ellipse.Fill>
17 </Ellipse>
18 </StackPanel>

            


 
 最后實現簡單的星光特效:

 1 <Canvas Width="600" Height="480">
2 <Canvas.Background>
3 <LinearGradientBrush>
4 <GradientStop Color="Black" Offset="0.0"></GradientStop>
5 <GradientStop Color="DeepSkyBlue" Offset="1.0"></GradientStop>
6 </LinearGradientBrush>
7 </Canvas.Background>
8
9 <!--垂直光線-->
10 <Ellipse Width="300" Height="20" Canvas.Top="130" Canvas.Left="0">
11 <Ellipse.Fill>
12 <RadialGradientBrush>
13 <GradientStop Color="#FFFFFFFF" Offset="0"></GradientStop>
14 <GradientStop Color='#00FFFFFF' Offset="1"></GradientStop>
15 </RadialGradientBrush>
16 </Ellipse.Fill>
17 </Ellipse>
18
19 <!--水平光線-->
20 <Ellipse Width="20" Height="300" Canvas.Top="0" Canvas.Left="150">
21 <Ellipse.Fill>
22 <RadialGradientBrush>
23 <GradientStop Color="#FFFFFFFF" Offset="0"></GradientStop>
24 <GradientStop Color='#00FFFFFF' Offset="1"></GradientStop>
25 </RadialGradientBrush>
26 </Ellipse.Fill>
27 </Ellipse>
28
29 <!--放射光芒-->
30 <Ellipse Width="120" Height="120" Canvas.Top="80" Canvas.Left="100">
31 <Ellipse.Fill>
32 <RadialGradientBrush>
33 <GradientStop Color="#FFFFFFFF" Offset="0"></GradientStop>
34 <GradientStop Color='#00FFFFFF' Offset="1"></GradientStop>
35 </RadialGradientBrush>
36 </Ellipse.Fill>
37 </Ellipse>
38 </Canvas>

        



-----------------------------------------------------完美分割線----------------------------------------------------------

先學到這,Take a break !!!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM