1、第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 位图、矢量图和路径的概念,矢量图形使用称为“矢量”的线条和曲线（包含颜色和位置信息）呈现图像。 编辑矢量图形时，修改的是描述其形状的线条和曲线的属性。矢量图形与分辨率无关，这意味着除了可以在分辨率不同的输出设备上显示它以外，还可以对其执行移动、调整大小、更改形状或更改颜色等操作，而不会改变其外观品质。,7.1.2 矢量图,7.1 位图、矢量图和路径的概
3、念,7.1.2 矢量图,7.1 位图、矢量图和路径的概念,路径是一条与很多点有关联的线条，表现在图形上就是线条和轮廓。之所以称为矢量路径对象，是因为该对象的形状主要是由路径的形状决定的，并且用户可以对该对象进行自由整形和变形。 在Fireworks中路径分为三种： （1）开放路径：即路径的起点和终点不重合，如直线； （2）闭合路径：即路径是连续的，没有终点和起始点，如圆形； （3）复合路径：即由两个或多个路径组成的路径。,7.1.3 路径,7.2 绘制基本图形,从“工具”面板中选择“直线”工具 。然后在画布上拖动到合适的位置后松开鼠标，屏幕上将会出现一条连接两点的直线，如图7-3所示。,7.2
4、.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）在当前的“属性”检查器的“形状”下拉列表框中选择“星形”选项，如图7-8所示。,7.2.5 绘制星形,（
6、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 绘制自动形状,单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“斜切矩形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个带有切角的矩形形状。按照此方法可以绘制多个斜切矩形，并使用控制点可以同时编辑所有边角的斜切量，或者更改个别边角的斜切量，如图7-1
8、3所示。,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
11、绘制自动形状,7.3.6 绘制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 绘制矢量路径,绘制路径就是使用绘图工具创建贝塞尔曲线。贝塞尔曲线的定义有四个控制点：起始点、终止点（也称锚点）以及两个相互分离的中间点称为方向点，锚定和方向点间
15、通过方向线相连。由锚点、方向点构成的曲线称为贝塞尔曲线，如图7-23所示。,7.4 绘制矢量路径,笔触（描边）附在路径上，突出路径的形状或使对象具有轮廓。而填充则处于路径内部，使其为实心对象。 单击“工具”面板或混色器中的“交换颜色”按钮，可以交换笔触和填充颜色，使“笔触颜色”或“填充颜色”框变为活动状态，如图7-24所示。,7.4.1 设置笔触和填充属性,7.4 绘制矢量路径,7.4.1 设置笔触和填充属性,7.4 绘制矢量路径,1设置笔触属性 铅笔图标 表示“工具”面板、“属性”检查器和“混色器”面板中的“笔触颜色”框。 （1）设置笔触颜色 （2）设置内置笔触类别（3）设置笔触纹理 （4）
16、设置笔触选项,7.4.1 设置笔触和填充属性,7.4 绘制矢量路径,2设置填充属性 颜料桶图标 表示“工具”面板、“属性”检查器和混色器面板中的“填充颜色”框。 （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
17、.1 选取路径对象,7.5 编辑矢量路径,2. 选取单个路径对象 (1)选择“工具”面板的“指针”工具。(2)将鼠标移到要选取的路径对象上。此时的路径以红色高亮显示时，同时控制点呈高亮显示。(3)单击鼠标即可选取该路径对象，被选取对象的路径即呈蓝色高亮显示状态，如图7-45所示。,7.5.1 选取路径对象,7.5 编辑矢量路径,7.5.1 选取路径对象,7.5 编辑矢量路径,3. 选取多个路径对象选取多个路径对象，首先选择“工具”面板“选择”部分的“指针”工具 ，然后可以采用以下两种方法之一进行操作。先选取其中一个对象，然后按住Shift键，连续单击其它多个对象；或者按住Shift键在“层”面
18、板中单击要选取的对象，所有对象便都处于选中状态如图7-46(b)所示。用“指针”工具拖出一个矩形选框，将所有要选取的对象都框住(不一定要将整个对象围住)，释放鼠标后，选框内的所有对象便都处于选中状态如图7-46(b)所示。,7.5.1 选取路径对象,7.5 编辑矢量路径,7.5.1 选取路径对象,7.5 编辑矢量路径,4. 选取被遮挡的路径对象要选取某个被遮挡的路径对象，可按如下步骤进行：（1）选择“工具”面板“选择”部分的“选取后方对象”工具 ，此时鼠标变成一个空心箭头，而且右下角有一个“”符号。（2）将鼠标移动到被遮挡对象的上层对象上，然后单击直到出现想要选择的对象，并将鼠标移动到想要选择
19、的对象上，此时该对象路径上的点高亮显示，默认情况下路径控制点显示为红色。（3）单击鼠标即可选取被遮挡的路径对象，如图7-47所示。,7.5.1 选取路径对象,7.5 编辑矢量路径,7.5.1 选取路径对象,7.5 编辑矢量路径,1用鼠标拖拽对象 2使用键盘方向键移动对象 3使用“属性”检查器移动对象 4使用“信息”面板移动对象,7.5.2 移动路径对象,7.5 编辑矢量路径,1复制和粘贴对象 2重复对象 3克隆对象 4删除对象,7.5.3 编辑路径对象,7.6 修改矢量路径,1通过拖动鼠标变形对象 （1）旋转对象 （2）缩放对象 （3）倾斜对象 （4）扭曲对象（5）翻转对象 2通过输入特定值变
20、形对象 （1）使用“属性”检查器或“信息”面板 （2）使用菜单命令,7.6.1 对象的变形,7.6 修改矢量路径,1节点的调整 （1）将一个曲点转换为一个角点 （2）将一个角点转换为一个曲点 2路径的调整 （1）拉伸路径 （2）推动路径 （3）扭曲路径 （4）切割路径,7.6.2 对象的调整,7.6 修改矢量路径,1路径对象的合并 （1）将两个开口路径合并成一个连续路径 （2）将闭合路径合并为一个复合路径（3）将一个复合路径对象分离成多个路径对象 2 路径的调整 （1）拉伸路径 （2）推动路径 （3）扭曲路径 （4）切割路径,7.6.3 对象的组织,7.7 本章小结,本章着重介绍Fireworks 8中创建与编辑Fireworks路径对象的操作技巧，如对象描边、填充等属性设置以及分离对象的操作，并通过创建矢量图的实例，以便让用户掌握矢量图的绘制方法。 通过本章的学习，要求用户了解Fireworks的绘图原理，熟练掌握绘制路径对象和编辑路径对象的方法、技巧。,
