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代码是：（太多，省略）