绘制形状和路径
Microsoft Expression Blend 提供了标准的矢量绘图功能,以便您能够像在任何矢量图形程序中那样绘制形状、路径和蒙板。如果需要绘制更高级的图形和作品,请考虑使用替代的矢量图形程序(例如 Microsoft Expression Design)。Expression Design 甚至还允许用户将图形导出为 XAML,以便在 Expression Blend 中使用。
有关详细信息,请参阅导入从 Expression Design 导出的 XAML。
什么是矢量图形?
矢量图形是通过点、线、曲线和曲面(而不是使用位图中的像素)以几何方式定义的。随着计算机显示器分辨率的不断提高,出现了从位图(在高分辨率下查看时会显示较大的像素)向其他方式转变的需要。调整位图的大小非常麻烦,通常会使图形质量降低。而矢量图形则能够在高分辨率下查看时保持平滑,并且在放大时保持清晰。由于这个原因,矢量图形更易于对其内容进行自定义,因为不必创建多个大小不同的图像(例如,以各种大小显示在用户界面 [UI] 中的图标文件)。矢量图形的其他好处还包括:
真正的内容缩放 在灵活的布局中构建的矢量图形可基于内容自如地重设大小。例如,向按钮中添加文本时,按钮将相应地调整大小,而无损图形的保真度。
与分辨率无关 显示器的分辨率一直在逐步提高,并且仍将继续下去。如果不能缩放应用程序的 UI,UI 将会随着分辨率的提高而逐渐变小,通常在内容变得太小以致无法看清时就会变得无法使用。如果对这些 API 应用缩放或旋转转换,它只会影响图形,而不会影响窗口中各个控件的大小和位置。可以缩放图形,但是不能轻松缩放控件在窗口空间中的布置方式。由于 Windows Presentation Foundation (WPF) 将窗口中的所有控件编排为单个图形,而不是将各个控件分隔到自己的区域中,因此很容易将 UI 作为一个整体来应用缩放或旋转转换。正是由于可以放大或缩小任何 WPF UI,所以 WPF 应用程序是真正与分辨率无关的。图像可以保持锐利和清晰,而不会像简单的位图缩放那样变得模糊。
说明: |
---|
在 WPF 应用程序(例如,使用 Expression Blend 创建的应用程序)中设置与大小相关的属性时,像素是指设备无关像素或设备无关单位,它相当于在屏幕分辨率设置为 96 DPI 时显示器上一个像素的大小。无论显示器大小或屏幕分辨率是多少,每个单位均约等于 1/96 英寸。 |
在 Expression Blend 中,矢量对象可以是简单的线或形状,也可以是复杂的路径或控件。可以通过多种方式修改对象:使用对象上的图柄来移动、旋转、翻转、倾斜对象或重设其大小,或者使用“属性”面板输入精确的大小、位置和旋转等值。基本上,除了已添加到项目中且原来并非矢量格式的那些项(例如图像和三维纹理)之外,在美工板上绘制的每个对象都是矢量格式。Expression Blend 中的部分矢量对象包括:
图形对象,例如椭圆形和矩形。
路径对象,例如线和曲线。
文本。
三维对象。
控件。
绘图工具
“工具”面板中提供了常见的矢量工具,可用于创建形状和路径元素以及操作对象。
有关使用这些工具的示例,请参阅以下主题:
工具 |
名称 |
用途 |
---|---|---|
矩形 |
绘制矩形和正方形。经过修改,矩形和正方形也可以具有圆角。 |
|
椭圆形 |
绘制椭圆形和圆形。 |
|
线 |
在两点之间绘制直线。 |
|
笔 |
通过定义每个节点来绘制和修改路径。“笔”工具可用于添加、删除和修改路径中的节点。 |
|
铅笔 |
绘制手绘路径。 |
|
选择 |
在美工板上选择要修改的形状、路径和对象。 有关如何使用“选择”工具的详细信息,请参阅选择或取消选择对象。 |
|
路径选择 |
在绘制路径上的节点之后选择各个节点。您还可以使用“路径选择”工具来直接选择嵌套在美工板上的父对象(例如版式面板)中的子对象。 有关如何使用“路径选择”工具的详细信息,请参阅选择或取消选择对象。 |
形状和路径
形状(例如矩形和椭圆形)是矢量对象。可以使用“矩形”工具 或“椭圆形”工具 绘制形状。
路径也是矢量对象,而且似乎是 Expression Blend 中最灵活的矢量对象。路径是一系列相连的线和曲线。在美工板上绘制路径之后,可以对其执行调整形状、合并和其他修改操作,以创建任何矢量形状。可以绘制多边形(由相连的直线组成的封闭形状)和折线(由相连的直线组成的不封闭路径)。可以使用“笔”工具 、“铅笔”工具 和“线”工具 绘制路径。然后可以使用“选择”工具 和“路径选择”工具 修改路径。
有关如何修改路径的详细信息,请参阅以下主题:
将形状转换为路径
除非使用“转换为路径”命令(在“对象”菜单上,单击“路径”,然后单击“转换为路径”)将形状对象转换为路径对象,否则不能采用与编辑路径对象相同的方式编辑形状对象。
有关示例,请参阅将形状转换为路径。
说明: |
---|
将形状转换为路径后,将不能再更改形状所特有的属性(例如,矩形的圆角半径)。而且,如果在转换之前向形状应用了样式,则已转换路径的属性将重置为路径的默认值(无填充画笔,有黑色笔划)。 |
更改圆角半径
通过选择矩形,再拖动左上角的圆角半径图柄,可修改矩形的圆角半径。将指针移到从矩形左上角伸出的虚线的任意一端上时,将显示圆角半径图柄。
在拖动任一圆角半径图柄时按住 Shift,即可分别修改 X 和 Y 圆角半径。
有关示例,请参阅在矩形边角设置圆角。
合并路径
合并路径(或形状)可得到如下结果:
合并前的两个形状 |
相交 |
||
相并 |
相斥 |
||
相割 |
相减 |
可以将两个或更多对象(路径或形状)合并成一个路径对象。所产生的路径对象将取代在合并之前选定的最后一个对象,并采用该对象的属性。通常,将生成一条复合路径。
有关示例,请参阅合并形状或路径。
有关如何修改路径的详细信息,请参阅“路径选择”工具修改键和“笔”工具修改键。
说明: |
---|
将某个形状与其他对象合并后,将不能再更改该形状所特有的属性(例如,矩形的圆角半径)。而且,如果在转换之前向最后选定的对象应用了样式,则复合路径的属性将重置为路径的默认值(无填充画笔,有黑色笔划)。 |
复合路径
在创建复合路径时,会从结果中去除路径的任何相交部分,并且所产生的路径将采用最底部的路径的可视属性。
两条路径转换为一条复合路径
必须先将形状转换为路径,然后才能将其包含在复合路径中(在“对象”菜单的“路径”下选择“转换为路径”)。可以将两条或更多路径转换为一条复合路径。生成的路径将取代在复合之前选定的最底部路径(在 Z 顺序中),并采用该路径的属性。在创建复合路径之后,可随时分离复合路径,但不会还原原始属性。
有关示例,请参阅生成或释放复合路径。
剪切路径
剪切路径是一种应用到其他对象的路径或形状,用于隐藏位于剪切路径以外的被遮掩对象的某些部分。
应用了剪切路径的 Image 对象
在 Expression Blend 中,创建剪切路径之后即可在美工板上对其进行修改,并且可以释放剪切路径,而不会丢失原始路径对象。有关示例,请参阅应用、修改或删除剪切路径。
还可以动态显示剪切路径的各个顶点(例如,逐渐公开被遮掩的对象)。有关示例,请参阅动态显示路径或剪切路径上的点。
不透明蒙板
不透明蒙板是可以应用于其他对象的路径或形状。路径的透明部分表示要使被遮掩对象淡出的区域,而蒙板的不透明部分则表示允许透显被遮掩对象的区域。可以通过“属性”面板的“外观”部分,为任何对象定义不透明蒙板。
不透明蒙板可以是简单的渐变画笔,根据透明度显示或隐藏对象的各个部分。在下面的示例中,左图未应用任何不透明蒙板,而右图可以通过下列两种方法之一产生:
可以将“Image”对象的“OpacityMask”属性设置为径向渐变画笔,并且将右侧梯度停止点的“Alpha”值设置为 0。
可以在“Image”对象之前创建一个“Rectangle”对象,将“Rectangle”的“OpacityMask”属性设置为径向渐变画笔,并且将左侧梯度停止点的“Alpha”值设置为 0。
未应用蒙板的图像(左图)与应用了不透明蒙板的图像(右图)
有关示例,请参阅创建不透明蒙板。