WPF學習筆記-用Expression Design制作矢量圖然后導出為XAML


 

第一次用Windows live writer寫東西,感覺不錯,哈哈~~

1.在白紙上完全憑感覺,想象來畫圖難度很大,尤其是象我這樣毫無美術基礎,毫無藝術細胞的人而言。因此可以找個參照物,比如一張數碼照片,對着這個圖片描,可以大體上把物體的輪廓描出來。

2.Ctrl+C然后Ctrl+V,在Expression Design中添加一張位圖,注意,此時Design會自動新建一個圖層(layer),雙擊修改圖層名為MousePhoto:

ScreenShot00030

3.單擊Layer面板右下角的New layer按鈕,添加新圖層MousePath,並將這個新圖層移到MousePhoto層的下面:

ScreenShot00031 ScreenShot00032

4.單擊MousePhoto層的鎖按鈕,鎖定此層,防止圖片移動。

5.在工具條中選擇B-Spline工具:

ScreenShot00033

6.開始描鼠標圖片的外輪廓,沿着外輪廓放置幾個錨固點。如果要作一條閉合曲線,可以將鼠標指針指向起始點,此時曲線會自動閉合,然后單擊即可:

ScreenShot00034

7.上面的幾個點只是粗略的定位,現在可以精確的調整每個點位置,或添加/刪除錨固點。

ScreenShot00035

在工具箱中選擇Direct Select工具,調整各個錨固點的位置,使閉合缺陷盡量與鼠標圖片的外輪廓重合:

ScreenShot00036

 

經驗:平滑的曲線可以近似的看做一系列相切的圓弧連接而成。因此這些錨固點最好是放置在每段圓弧的切點和中間點處。

8.再次選擇B-Spline工具,畫鼠標滑輪處的縫隙。這幾條縫隙中間有尖角,可以在添加尖角處錨固點之前按下alt鍵的方法來畫尖角

ScreenShot00037 

外輪廓加一條縫隙完成后的樣子:

ScreenShot00038

9.重復以上動作,完成鼠標其余部分的描繪:

ScreenShot00040

10.這個“素描”看起來似乎比較單調乏味,沒有多少立體感,現在給她添加點顏色。在工具條中選擇Selection工具:

ScreenShot00041

然后選中外側輪廓,在Appearance面板中選擇Fill,設置兩個Stop的顏色,

ScreenShot00042

然后選擇Gradient Transform工具,調整顏色梯度的漸變方向:

ScreenShot00044

這樣,我的鼠標就看起來稍微好些了:

ScreenShot00045

上面的這個東東灰不溜秋的,還是很別扭。如果象實物一樣是彩色的,就好看多了。不過這應該是屬於美工(Designer)的任務了。

11.接下來將我的作品導出為XAML,以供Blend使用。

12.選中所畫的鼠標,然后選擇:File->Export…,彈出Export對話框:

ScreenShot00047

配置Export Properties,然后點Export All按鈕。

13.打開Expression Blend,選擇Add existing items,將Design中導出的Mouse.xaml文件添加到項目中。打開這個文件,就可以看到我的鼠標了:

ScreenShot00048

14.選中Mouse.xaml中的鼠標,然后Ctrl+C,打開上篇文章中的自定義按鈕所在文件window1.xaml,Ctrl+V將其粘貼到Grid中,然后在window1.xaml中選中鼠標圖案,將其拖到圓形自定義按鈕中:

ScreenShot00049

按住alt鍵,然后放開鼠標,即可將鼠標圖片設置為圓形自定義按鈕的Content:

ScreenShot00050 ScreenShot00051


免責聲明!

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



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