网页设计与制作 普通高等教育“十一五”国家级规划教材 教学课件 于筱荔矢量图的绘制与编辑

1、在线教务辅导网： :/教材其余课件及动画素材请查阅在线教务辅导网QQ:349134187 或者直接输入下面地址：第7章 矢量图的绘制与编辑 第7章 矢量图的绘制与编辑 7.1 位图、矢量图和路径的概念 7.2 绘制根本图形 7.3 绘制自动形状 7.4 绘制矢量路径 7.5 编辑矢量路径 7.6 修改矢量路径 7.7 本章小结 Fireworks的一个很大的优势就在于它将位图处理和矢量处理合二为一。它综合了许多图形处理软件的优点。本章将着重介绍Fireworks 8中创立与编辑矢量路径对象的操作技巧，如对象描边、填充等属性设置以及别离对象的操作，以便让网页设计者拥有更多的创作空间。 7.1 位

2、图、矢量图和路径的概念 位图图形由排列在网格中的点组成，这些点被称为“像素。 编辑位图图形时，修改的是像素，而不是线条和曲线。 位图图形与分辨率有关，这意味着描述图像的数据被固定到一个特定大小的网格中。放大位图图形将使这些像素在网格中重新进行分布，这通常会使图像的边缘呈锯齿状。 7.1.1 位图 7.1 位图、矢量图和路径的概念 7.1.1 位图 7.1 位图、矢量图和路径的概念 矢量图形使用称为“矢量的线条和曲线包含颜色和位置信息呈现图像。 编辑矢量图形时，修改的是描述其形状的线条和曲线的属性。 矢量图形与分辨率无关，这意味着除了可以在分辨率不同的输出设备上显示它以外，还可以对其执行移动、调

3、整大小、更改形状或更改颜色等操作，而不会改变其外观品质。 7.1.2 矢量图 7.1 位图、矢量图和路径的概念 7.1.2 矢量图 7.1 位图、矢量图和路径的概念 路径是一条与很多点有关联的线条，表现在图形上就是线条和轮廓。之所以称为矢量路径对象，是因为该对象的形状主要是由路径的形状决定的，并且用户可以对该对象进行自由整形和变形。 在Fireworks中路径分为三种：1开放路径：即路径的起点和终点不重合，如直线；2闭合路径：即路径是连续的，没有终点和起始点，如圆形；3复合路径：即由两个或多个路径组成的路径。 7.1.3 路径 7.2 绘制根本图形 从“工具面板中选择“直线工具 。然后在画布上

4、拖动到适宜的位置后松开鼠标，屏幕上将会出现一条连接两点的直线，如图7-3所示。 7.2.1 绘制直线 7.2 绘制根本图形 单击“工具面板中的“矩形工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到适宜位置，松开鼠标即绘制了一个矩形，如图7-4所示。 7.2.2 绘制矩形 7.2 绘制根本图形 单击“工具面板中的“矩形工具 按钮右下角的小三角形，在弹出的菜单中选择“椭圆 工具，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到适宜位置，松开鼠标即绘制了一个椭圆，如图7-5所示。 7.2.3 绘制椭圆 7.2 绘制根本图形 单击“工具面板中的“矩形工具 按

5、钮右下角的小三角形，在弹出的菜单中选择“多边形工具 ，在当前的“属性检查器上设置将要绘制图形的边数，在“边文本框中设置多边形的边数，可以是325的任意一个整数。默认边数为5，即为五边形，如图7-6所示。 7.2.4 绘制三角形及其他多边形 7.2 绘制根本图形 然后在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到适宜位置，松开鼠标即绘制了一个多边形，如图7-7所示的三角形和多边形。 7.2.4 绘制三角形及其他多边形 7.2 绘制根本图形 1单击“工具面板中的“矩形工具按钮右下角的小三角形，在弹出的菜单中选择“多边形工具， 2在当前的“属性检查器的“形状下拉列表框中选择“星形

6、选项，如图7-8所示。7.2.5 绘制星形 3在“边文本框中设置星形的顶点数，设置范围为3360。滑杆只能调整到25，要想设置25个以上的顶点，直接在文本框内输入数字即可。7.2 绘制根本图形 4在“角度文本框中设置星形尖角的度数，选择“自动复选框或输入一个值。接近 0 的值产生的角长而细；接近 100 的值产生的角短而粗。 5在画布上拖动鼠标，绘制星形。如图7-9所示为具有不同形状、不同角度的六边形。 7.2.5 绘制星形 7.3 绘制自动形状 单击“工具面板中的“矩形工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“箭头工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不

7、放，然后拖动鼠标到适宜位置，松开鼠标即绘制了一个任意比例的普通箭头形状。按照此方法可以绘制多个箭头，并使用鼠标拖动箭头上的控制点调整箭头的锥度、尾部的长度和宽度以及箭尖的长度，如图7-12所示。 7.3.1 绘制箭头 7.3 绘制自动形状 7.3.1 绘制箭头 7.3 绘制自动形状 单击“工具面板中的“矩形工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“斜切矩形工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到适宜位置，松开鼠标即绘制了一个带有切角的矩形形状。按照此方法可以绘制多个斜切矩形，并使用控制点可以同时编辑所有边角的斜切量，或者更改个别边角的斜切

8、量，如图7-13所示。 7.3.2 绘制斜切矩形 7.3 绘制自动形状 7.3.2 绘制斜切矩形7.3 绘制自动形状 单击“工具面板中的“矩形工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“斜面矩形工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到适宜位置，松开鼠标即绘制了一个带有倒角的斜面矩形边角在矩形内部成圆形。按照此方法可以绘制多个斜面矩形，可以同时编辑所有边角的倒角半径，或者更改个别边角的倒角半径，如图7-14所示。 7.3.3 绘制斜面矩形 7.3 绘制自动形状 7.3.3 绘制斜面矩形7.3 绘制自动形状 单击“工具面板中的“矩形工具 按钮右

9、下角的小三角形，在弹出的菜单中选择自动形状对象组的“连接线形 工具，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到适宜位置，松开鼠标即绘制了一个显示为三段的连接线形。按照此方法可以绘制多个连接线形，使用控制点可以编辑连接线形的第一和第三段的端点，以及编辑用于连接第一和第三段的第二段的位置，如图7-15所示。 7.3.4 绘制连接线形 7.3 绘制自动形状 7.3.4 绘制连接线形7.3 绘制自动形状 单击“工具面板中的“矩形工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“面圈形工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到适宜位置

10、，松开鼠标即绘制了一个实心圆环形状。按照此方法可以绘制多个面圈形，使用控制点可以调整内环的周长或将圆环形状拆分为几个局部，如图7-16所示。7.3.5 绘制面圈形 7.3 绘制自动形状 7.3.5 绘制面圈形7.3 绘制自动形状 单击“工具面板中的“矩形工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“L形工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到适宜位置，松开鼠标即绘制了一个直边角形状。按照此方法可以绘制多个L形，使用控制点可以编辑水平和垂直局部的长度和宽度以及边角的曲率，如图7-17所示。 7.3.6 绘制L形 7.3 绘制自动形状 7.3.6

11、 绘制L形7.3 绘制自动形状 单击“工具面板中的“矩形工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“饼形工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到适宜位置，松开鼠标即绘制了一个饼图形状。按照此方法可以绘制多个饼形，使用控制点可以将饼图形状拆分为几个局部，如图7-18所示。 7.3.7 绘制饼形 7.3 绘制自动形状 7.3.7 绘制饼形7.3 绘制自动形状 单击“工具面板中的“矩形工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“智能多边形工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到适宜位置，松开鼠

12、标即绘制了一个具有 3 到 25 条边的正多边形形状。按照此方法可以绘制多个智能多边形，使用控制点可以调整大小和旋转、添加或删除线段、增加或减少边数，或者向图形中添加内侧多边形，如图7-19所示。 7.3.8 绘制智能多边形 7.3 绘制自动形状 7.3.8 绘制智能多边形7.3 绘制自动形状 单击“工具面板中的“矩形工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“圆角矩形工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到适宜位置，松开鼠标即绘制了一个带有圆角的矩形形状。按照此方法可以绘制多个圆角矩形，使用控制点可以同时编辑所有边角的圆度，或者更改个别边

13、角的圆度，如图7-20所示。 7.3.9 绘制圆角矩形 7.3 绘制自动形状 7.3.9 绘制圆角矩形 7.3 绘制自动形状 单击“工具面板中的“矩形工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“螺旋形工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到适宜位置，松开鼠标即绘制了一个开口式螺旋形形状。按照此方法可以绘制多个螺旋形，使用控制点可以编辑螺旋的圈数，并可以决定螺旋形是开口的还是闭合的，如图7-21所示。 7.3.10 绘制螺旋形 7.3 绘制自动形状 7.3.10 绘制螺旋形7.3 绘制自动形状 单击“工具面板中的“矩形工具 按钮右下角的小三角

14、形，在弹出的菜单中选择自动形状对象组的“星形工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到适宜位置，松开鼠标即绘制了一个星形形状顶点数在 3 到 25 之间。按照此方法可以绘制多个星形，。使用控制点可以添加或删除顶点，并可以调整各顶点的内角和外角，如图7-22所示。 7.3.11 绘制星形7.3 绘制自动形状 7.3.11 绘制星形7.4 绘制矢量路径 绘制路径就是使用绘图工具创立贝塞尔曲线。贝塞尔曲线的定义有四个控制点：起始点、终止点也称锚点以及两个相互别离的中间点称为方向点，锚定和方向点间通过方向线相连。由锚点、方向点构成的曲线称为贝塞尔曲线，如图7-23所示。

15、 7.4 绘制矢量路径 笔触描边附在路径上，突出路径的形状或使对象具有轮廓。而填充那么处于路径内部，使其为实心对象。 单击“工具面板或混色器中的“交换颜色按钮，可以交换笔触和填充颜色，使“笔触颜色或“填充颜色框变为活动状态，如图7-24所示。 7.4.1 设置笔触和填充属性 7.4 绘制矢量路径7.4.1 设置笔触和填充属性 7.4 绘制矢量路径1设置笔触属性 铅笔图标 表示“工具面板、“属性检查器和“混色器面板中的“笔触颜色框。 1设置笔触颜色 2设置内置笔触类别 3设置笔触纹理 4设置笔触选项 7.4.1 设置笔触和填充属性 7.4 绘制矢量路径2设置填充属性 颜料桶图标 表示“工具面板、

16、“属性检查器和混色器面板中的“填充颜色框。 1设置实心填充 2设置渐变填充 3设置填充边缘 4设置填充纹理 7.4.1 设置笔触和填充属性 7.4 绘制矢量路径1使用钢笔工具绘制矢量路径 1绘制直线 2绘制曲线 2使用矢量路径工具绘制矢量路径 3使用重绘路径工具绘制矢量路径 7.4.2 绘制矢量路径 7.5 编辑矢量路径 1选取工具 Fireworks 8提供了两类三种选取工具，它们都位于“工具面板的上方的“选择工具区域，如图7-44所示。 7.5.1 选取路径对象 7.5 编辑矢量路径 2. 选取单个路径对象 (1)选择“工具面板的“指针工具。 (2)将鼠标移到要选取的路径对象上。此时的路径

17、以红色高亮显示时，同时控制点呈高亮显示。 (3)单击鼠标即可选取该路径对象，被选取对象的路径即呈蓝色高亮显示状态，如图7-45所示。 7.5.1 选取路径对象 7.5 编辑矢量路径 7.5.1 选取路径对象 7.5 编辑矢量路径 3. 选取多个路径对象 选取多个路径对象，首先选择“工具面板“选择局部的“指针工具 ，然后可以采用以下两种方法之一进行操作。先选取其中一个对象，然后按住Shift键，连续单击其它多个对象；或者按住Shift键在“层面板中单击要选取的对象，所有对象便都处于选中状态如图7-46(b)所示。 用“指针工具拖出一个矩形选框，将所有要选取的对象都框住(不一定要将整个对象围住)，

18、释放鼠标后，选框内的所有对象便都处于选中状态如图7-46(b)所示。 7.5.1 选取路径对象 7.5 编辑矢量路径 7.5.1 选取路径对象 7.5 编辑矢量路径 4. 选取被遮挡的路径对象 要选取某个被遮挡的路径对象，可按如下步骤进行： 1选择“工具面板“选择局部的“选取前方对象工具 ，此时鼠标变成一个空心箭头，而且右下角有一个“符号。 2将鼠标移动到被遮挡对象的上层对象上，然后单击直到出现想要选择的对象，并将鼠标移动到想要选择的对象上，此时该对象路径上的点高亮显示，默认情况下路径控制点显示为红色。 3单击鼠标即可选取被遮挡的路径对象，如图7-47所示。 7.5.1 选取路径对象 7.5 编辑矢量路径 7.