WPF中制作立體效果的文字或LOGO圖形 原文:WPF中制作立體效果的文字或LOGO圖形

較久之前，我曾寫過一篇：“WPF繪制黨徽(立體效果,Cool)?”的博文。有感興趣的朋友來EMAIL問是怎么制作的？本文解決此類問題。

有時，為了美觀的需要，我們可能需要在應用程序中制作一些看上去很酷的3D效果，比如下面的效果：

這是一種立體的純文字效果，或許你可以在網上找到相關工具自動生成圖片，但如果是需要生成矢量的XAML圖形文件，這樣的工具少之又少。關于3D文字的問題，你可以參見大名鼎鼎的Charles Petzold在MSDN上的兩篇文章“三維網格幾何體”（http://msdn2.microsoft.com/zh-cn/magazine/cc163449.aspx）及“WPF 中的三維文字”（http://msdn2.microsoft.com/zh-cn/magazine/cc163349.aspx）。

更多的情況是：可能需要根據用戶的不同要求，按用戶提供的企業標準文字或LOGO標識來進行繪制。
比如，我在從事月歷設計時，就有用戶需要設計一個“福”字，他們想將之放進月歷中：

這個“福”字原來是由用戶以TIFF圖片文件格式提供。

上面“春”字最后生成的XAML代碼（Spring.Xaml）占空間約22K，代碼太長，從略。
而“福”字最終生成的XAML代碼(ChineseFu.Xaml)更多，達42K。
從上面的代碼可以看出，有許多東西（比如漸變顏色）是可以共用的，可以使用資源的方式，使上面的代碼變得更精簡，但目前尚無專業的軟件工具可以做到自動完成這一過程，相信隨著WPF，SilverLight及XAML的推廣，上述情況會有所改觀。

你可以使用各種矢量繪圖軟件來將圖片文字矢量化，比如使用常用的Illustrator, CorelDraw, FreeHand等。我比較喜歡使用Illustrator,當然這只是個人喜好而已。你也可以使用你比較喜歡的設計工具。

如果最終想要生成XAML文件，與你的其他WPF或SilverLight程序配合，那么，你可以使用微軟的Expression Blend。做這件事可能需要考驗你的耐性。因為目前為此，Expression Blend的某些繪圖功能還不夠完善。隨著時間的推移，相信它會越來越好用。

先看看我要做的初始化LOGO,這個LOGO就是使用Illustrator繪制出來的：



它是一只酷似蘿卜的可愛小鼠，我把它叫做“蘿卜鼠”，是我在三年前設計的。

（1）首先進行初步的準備工作。在Illustrator中打開上述AI文件，然后按住Alt鍵，然后拖動整個LOGO，我這里演示的是向右下的立體效果，所以，我拖動LOGO時向左上方向作了合適的位移。按住Alt鍵拖動的作用是拖動的同時，復制出另一個原始圖形的備份。為了做的時候不那么刺眼，同時使前景和背景圖形對比明顯以方便操作，所以我特地將上面一個改成橙色，而原來那個改成黑色，因為紅色看得太多比較傷眼睛:)或者說眼睛比較疲勞。
得到如下效果：

接下面，我們需要做更關鍵的步驟，繪制出3D效果。

（2）選中全部，然后在PathFinder面板中點擊左下角的“Divide”，它的目的是使所有圖形部分分離出完全獨立的圖形。注：如果PathFinder面板沒有顯示出來，你可以使用快捷鍵Shift+F9讓它顯示出來，或者在菜單Window項下拉菜單中點PathFinder子項，使其前面處理勾選狀態，從而顯示PathFinder面板。
此操作完成后，再按Shift + Ctrl + G，打散各圖形。
結果如下：(為方便操作，我已放大顯示原圖)


（3）勾出未填實的局部區域。點中左邊工具箱中的Pen Tool(P)，選擇合適的筆刷顏色（比如紅色）和筆刷寬度Stroke面板中設置(比如0.25pt)。接下來要做的就是勾出所有陰影部分并使之顯得更完美。我這里僅舉一小塊的連接以示說明。為了更方便操作，使用Zoom Tool(Z)放大需要處理的局部圖形，之后使用Pen Tool(P)勾出未填實的局部區域,同時使用Line Segment Tool連接圖形，注意多邊形的外邊線與原圖的曲線“外切”，以使陰影顯得平滑自然，這將考驗你的耐心并取決于你的美術欣賞水平。如下圖：

對于一些特殊的地方可能需要特殊處理，比如上圖的右下部分，就使用了Line Segment Tool (/)。
然后，選中全部，使用Path Finder面板的"Divide"，再Shift + Ctrl + G，打散。

（4）合并橙色部分：選中其中任意一塊橙色圖形，然后依次點擊菜單Select -> Same -> Fill Color，這樣選中了所有橙色填充的圖形。再按PathFinder面板中的Shape Modes的第一個"Add to shape area"小按鈕，然后點擊Expand。這樣，橙色的圖形又成了一個完整的整體(這里也可以直接在PathFinder面板中點擊下面的Merge小按鈕)。但黑色部分則分別成單獨的圖形塊。

（5）分別將應該為黑色顯示的相鄰部分（可能暫時顯示的填充顏色為空）同時選中，然后點擊"Add to shape area"小按鈕，再點擊Expand合并它們，如下面圖a，圖b所示：

(圖a)

(圖b)

（6）整體完成之后，應該類似下面的效果：


（7）為了更具立體效果，還需要將圖形具有明顯“轉折”的部分做點處理，比如：

（8）現在，設置你需要的Logo前景顏色及陰影顏色。我設置之后得到的效果如下圖：

?（9）最后，將此圖形轉換成XAML代碼。
最終得到的XAML代碼是：（太多，省略）

posted on 2018-10-25 15:37 NET未來之路 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/lonelyxmas/p/9850227.html

總結

以上是生活随笔為你收集整理的WPF中制作立体效果的文字或LOGO图形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。