Silverlight 3 Beta 新特性解析（2）-Graphics篇
前提條件：
閱讀本文之前請確認你已經安裝了如下軟件
- Visual Studio 2008 (Express) SP1
- Silverlight 3 Tools For Visual Studio
- Microsoft Expression Blend 3 MIX 09 Preview
本篇主要內容：
- 如何利用新的Bitmap API來創建我們自己的圖像
- 透視3D圖像(Perspective 3D Graphic)
- 像素模糊和投影效果
- Element-To-Element Binding
Bitmap API的寫圖像功能：
新版的Bitmap API支持從寫每個像素的值來創建自己的圖像
這個用來支持生成Bitmap的類叫做WriteableBitmap，繼承自BitmapSource類
這個類位于System.Windows.Media.Imaging名字空間中，其函數成員包括
1: public sealed class WriteableBitmap : BitmapSource
2: {
3: public WriteableBitmap(BitmapSource source);
4: public WriteableBitmap(int pixelWidth, int pixelHeight, PixelFormat format);
5: public int this[int index] { get; set; }
6: public void Invalidate();
7: public void Lock();
8: public void Render(UIElement element, Transform transform);
9: public void Unlock();
10: }
從上圖可以看出我們可以通過兩種形式來實例化這個WriteableBitmap
一個是通過傳入已經初始化了的BitmapSource
另外一個是通過輸入圖像高度和寬度以及像素類型（有Bgr32和Pbgra32兩種，后面一種可以創建半透明圖像）
第5行的索引this[int index]可以用來讀或取像素點
寫一個WriteableBitmap的流程是這樣的
- 實例化WriteableBitmap
- 調用Lock方法
- 寫像素點
- 調用Invalidate方法
- 最后是調用Unlock方式來釋放所有的Buffer并準備顯示
如下文所示以描點的方式構建了整個Bgr32圖像
1: private WriteableBitmap BuildTheImage(int width, int height)
2: {
3: WriteableBitmap wBitmap=new WriteableBitmap(width,height,PixelFormats.Bgr32);
4: wBitmap.Lock();
5:
6: for (int x = 0; x < width; x++)
7: {
8: for (int y = 0; y < height; y++)
9: {
10: byte[] brg = new byte[4];
11: brg[0]=(byte)(Math.Pow(x,2) % 255); //Blue, B
12: brg[1] = (byte)(Math.Pow(y,2) % 255); //Green, G
13: brg[2] = (byte)((Math.Pow(x, 2) + Math.Pow(y, 2)) % 255); //Red, R
14: brg[3] = 0;
15:
16: int pixel = BitConverter.ToInt32(brg, 0);
17:
18: wBitmap[y * height + x] = pixel;
19: }
20: }
21:
22: wBitmap.Invalidate();
23: wBitmap.Unlock();
24:
25: return wBitmap;
26: }
畫出來的圖像如下圖所示
很神奇的一個改進。有了這個類，我們就可以操縱像素點了
在微軟上對圖像處理做些應用，比如去紅點等功能
透視3D效果
所有繼承自System.Windows.UIElement的類都將含有Projection這個屬性
也就是說我們看到的所有控件都將具有3D功能
你可以通過沿X軸，Y軸或者Z軸旋轉任意角度來獲得3D效果
如將上面生成的圖片沿X軸旋轉-20度，我們可以得到
其默認的旋轉軸心是CenterOfRotationX=0.5,CenterOfRotationY=0.5,CenterOfRotationZ=0
上面的旋轉代碼如下:
1: "Img">
2:
3: "ImageProjection" RotationX="-20"/>
4:
5:
其他空間的3D平面投影與此類似
像素模糊和投影效果
與Projection一樣，Effect屬性也是在System.Windows.UIElement
所以所有的Toolbar中的控件都支持像素模糊和投影效果
模糊和投影效果(BlurEffect and DropShadowEffect)都在System.Windows.Media.Effects這個名字空間中
整個控件模糊效果的程度由Radius來控制，其默認值為5，Radius越大，應用了BlurEffect的控件越模糊
代碼如下：
1:
2:
3: "20"/>
4:
5:
投影效果的參數比模糊效果復雜些
共有5個屬性來控制投影效果
BlurRadius用來控制控件邊緣的模糊度，值越大邊緣越模糊，默認值仍然是5
Color屬性用來設置投影的顏色，默認顏色是黑色
Direction屬性用來控制投影方向，值為0時代表投影到控件的正右方，以逆時針的形式來增大投影角度
默認值為315，值的范圍只能在0~360之間
Opacity屬性用來控制邊緣的透明度，其使用而控件的Opacity屬性一樣
ShadowDepth屬性用來設置投影平面和控件平面的垂直距離，默認值為5，其值范圍為0~300
其代碼如下：
1:
2:
3: "5" Color="White" Opacity="0.7" ShadowDepth="7"/>
4:
5:
Element-To-Element Binding：
元素和元素之間的屬性綁定是首先在WPF中實現的
現在Silverlight 3終于把這個實用的功能引入了
綁定的格式如：{Binding 屬性名,Mode=綁定模式,ElementName=綁定元素}
其中綁定元素就是你先綁定的元素的名字，屬性名是你想綁定的元素的屬性名（這樣將把被綁定的元素的綁定屬性的值綁定給新元素的屬性）
最后綁定模式有兩種：OneWay和TwoWay，TwoWay表示有一方的綁定屬性的值改變了，兩邊的值都同步更新
而OneWay表現只在被綁定元素的屬性值改變后，綁定元素的屬性值才改變，而反之不成立
如下代碼：
1: "400" Height="400" x:Name="Img">
2:
3: "ImageProjection"/>
4:
5:
6: "PlotX" Minimum="-90" Maximum="90" Value="{Binding RotationX, Mode=TwoWay, ElementName=ImageProjection}"/>
7: "PlotY" Minimum="-90" Maximum="90" Value="{Binding RotationY, Mode=TwoWay, ElementName=ImageProjection}"/>
8: "PlotZ" Minimum="-90" Maximum="90" Value="{Binding RotationZ, Mode=TwoWay, ElementName=ImageProjection}"/>
是用了三個Slider來綁定控制Image的3D效果，效果圖如下
代碼下載：
出處：http://ibillguo.cnblogs.com/
本文版權由作者和博客園共同所有，轉載請注明出處
留言列表
