WPF中制作立体效果的文字或LOGO图形

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/johnsuna/article/details/2309778

较久之前,我曾写过一篇:“WPF绘制党徽(立体效果,Cool) ”的博文。有感兴趣的朋友来EMAIL问是怎么制作的?本文解决此类问题。

有时,为了美观的需要,我们可能需要在应用程序中制作一些看上去很酷的3D效果,比如下面的效果:
具体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标识来进行绘制。
比如,我在从事月历设计时,就有用户需要设计一个“福”字,他们想将之放进月历中:
具有3D效果的中国“福”字
这个“福”字原来是由用户以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绘制出来的:

BrawDraw.Com的LOGO

它是一只酷似萝卜的可爱小鼠,我把它叫做“萝卜鼠”,是我在三年前设计的。

(1)首先进行初步的准备工作。在Illustrator中打开上述AI文件,然后按住Alt键,然后拖动整个LOGO,我这里演示的是向右下的立体效果,所以,我拖动LOGO时向左上方向作了合适的位移。按住Alt键拖动的作用是拖动的同时,复制出另一个原始图形的备份。为了做的时候不那么刺眼,同时使前景和背景图形对比明显以方便操作,所以我特地将上面一个改成橙色,而原来那个改成黑色,因为红色看得太多比较伤眼睛:)或者说眼睛比较疲劳。
得到如下效果:
BrawDraw.Com Logo 3D

接下面,我们需要做更关键的步骤,绘制出3D效果。

(2)选中全部,然后在PathFinder面板中点击左下角的“Divide”,它的目的是使所有图形部分分离出完全独立的图形。注:如果PathFinder面板没有显示出来,你可以使用快捷键Shift+F9让它显示出来,或者在菜单Window项下拉菜单中点PathFinder子项,使其前面处理勾选状态,从而显示PathFinder面板。
此操作完成后,再按Shift + Ctrl + G,打散各图形。
结果如下:(为方便操作,我已放大显示原图)
BrawDraw Logo 3D

(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前景颜色及阴影颜色。我设置之后得到的效果如下图:
3D BrawDraw Logo最终效果图

 (9)最后,将此图形转换成XAML代码。
最终得到的XAML代码是:(太多,省略)

展开阅读全文

没有更多推荐了,返回首页