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代码是:(太多,省略)
WPF中制作立体效果的文字或LOGO图形的更多相关文章
- WPF中制作立体效果的文字或LOGO图形(续)
原文:WPF中制作立体效果的文字或LOGO图形(续) 上篇"WPF中制作立体效果的文字或LOGO图形"(http://blog.csdn.net/johnsuna/archive/ ...
- 在WPF中制作正圆形公章
原文:在WPF中制作正圆形公章 之前,我利用C#与GDI+程序制作过正圆形公章(利用C#制作公章 ,C#制作公章[续])并将它集成到一个小软件中(个性印章及公章的画法及实现),今天我们来探讨一下WPF ...
- WPF绘制党徽(立体效果,Cool)
原文:WPF绘制党徽(立体效果,Cool) 前面用WPF方式绘制了党旗(WPF制作的党旗) ,去年3月份利用C# 及GDI+绘制过党徽,这次使用WPF来绘制党徽. ------------------ ...
- WPF中制作带中国农历的万年历
原文:WPF中制作带中国农历的万年历 本例应用.net 2.0中的ChineseLunisolarCalendar类,制作出带中国农历的万年历. 先看看效果图片(已缩小,原始图片为:http://p ...
- WPF中制作无边框窗体
原文:WPF中制作无边框窗体 众所周知,在WinForm中,如果要制作一个无边框窗体,可以将窗体的FormBorderStyle属性设置为None来完成.如果要制作成异形窗体,则需要使用图片或者使用G ...
- 01.WPF中制作无边框窗体
[引用:]http://blog.csdn.net/johnsuna/article/details/1893319 众所周知,在WinForm中,如果要制作一个无边框窗体,可以将窗体的FormB ...
- 在 WPF 中实现融合效果
1. 融合效果 融合效果是指对两个接近的元素进行高斯模糊后再提高对比度,使它们看上去"粘"在一起.在之前的一篇文章中,我使用 Win2D 实现了融合效果,效果如下: 不过 Win2 ...
- 使用CSS3制作立体效果的导航菜单
效果如下: 也可以点击网址查看效果:http://keleyi.com/keleyi/phtml/html5/12.htm 请使用支持CSS3的浏览器访问本页面,获得更好效果. 源代码: <st ...
- 二维图形的矩阵变换(二)——WPF中的矩阵变换基础
原文:二维图形的矩阵变换(二)--WPF中的矩阵变换基础 在前文二维图形的矩阵变换(一)——基本概念中已经介绍过二维图像矩阵变换的一些基础知识,本文中主要介绍一下如何在WPF中进行矩阵变换. Matr ...
随机推荐
- [array] leetCode-18. 4Sum -Medium
18. 4Sum -Medium descrition Given an array S of n integers, are there elements a, b, c, and d in S s ...
- sum()函数——MATLAB
a=sum(A) %列求和 b=sum(A,2) %行求和 c=sum(A(:)) %矩阵求和 假定A为一个矩阵: sum(A)以矩阵A的每一列为对象,对一列内的数字求和. sum(A,2)以矩阵A ...
- 26、驱动调试之根据oops信息和堆栈确定出错的代码
a.驱动作为模块:1. 根据pc值确定该指令属于内核还是外加的模块pc=0xbf000018 它属于什么的地址?是内核还是通过insmod加载的驱动程序?先判断是否属于内核的地址: 看System.m ...
- ANSCII码和BCD码互转
bool AtoBCD(unsigned char* Asc,unsigned char* BCD,int len) { int i; unsigned char ch; //高位 unsigned ...
- js获取浏览器和元素对象的尺寸
1.屏幕尺寸 window.screen.height //屏幕分辨率的高 window.screen.width //屏幕分辨率的宽 window.screen.availHeight //屏幕可用 ...
- CSS Reset的相关概念及实例
原文 简书原文:https://www.jianshu.com/p/fdb79010895c 大纲 1.什么是css reset? 2.CSS reset的实例 1.什么是css reset? 个人理 ...
- angular表单知识点
原文 https://www.jianshu.com/p/c772d143e1fc 大纲 1.对表单的理解 2.模板驱动表单(Template Driven Forms) 3.响应式表单(Reacti ...
- 该扩展程序未列在 Chrome 网上应用店中,并可能是在您不知情的情况下添加的
"chrome扩展程序无法启用"的解决方案 http://www.cnplugins.com/tool/installpluginfix.html win10家庭版没有组策略怎么办? https:// ...
- 【MySQL】15个有用的MySQL/MariaDB性能调整和优化技巧
MySQL 是一个强大的开源关系数据库管理系统(简称 RDBMS).它发布于 1995 年(20年前).它采用结构化查询语言(SQL),这可能是数据库内容管理中最流行的选择.最新的 MySQL 版本是 ...
- java异常中Exception捕获不到的异常
一 概念 众所周知java提供了丰富的异常类,这些异常类之间有严格的集成关系,分类为 父类Throwable Throwable的两个子类Error和Exception Exception的两个子类C ...