C.2 节 Inkscape：2D 绘图程序¶
Inkscape: A 2D Drawing Program
Inkscape 是一个用于创建和编辑二维矢量图形图像的免费程序。我使用 Inkscape 创建了这本教科书的许多插图。作为一个矢量图形程序，Inkscape 不是存储像素的颜色，而是存储场景中对象的列表及其属性。它以 SVG（可缩放矢量图形）格式保存图像，SVG 格式在 第 2.7 节 中有介绍。SVG 图像可以在许多标准图像查看器中打开，并且可以用于网络。Inkscape 在它创建的 SVG 文件中添加了一些额外数据，但这些数据将被其他程序忽略。
Inkscape 可以从其网站 inkscape.org 下载。它适用于 Windows、Mac OS 和 Linux 系统。截至 2023 年 7 月，最新版本是 1.3。本节基于 Inkscape 1.1 编写，但对版本 1.3 仍然有效。
Inkscape 窗口有一个大的中央绘图区域，周围有几条工具栏。许多对话框，例如用于设置描边和填充属性的对话框，将在窗口的右侧边缘打开。布局是可配置的。例如，可以隐藏工具栏，将对话框移出主窗口以成为独立窗口。我的讨论假设是标准布局。
当打开一个新窗口时，绘图区域可能显示的是缩放后的视图。我更喜欢以全尺寸绘图工作，所以我通常做的第一件事是按“1”键以获得未缩放的视图。对于详细的工作，放大的视图也很有用。你可以通过输入“+”来放大，按“-”来缩小。在“视图”菜单中还有一个“缩放”子菜单。
一个包含 Inkscape 绘图工具的工具栏沿着窗口的左侧运行。根据你使用的 Inkscape 版本，你可能不会看到这里显示的完全相同的工具集。你最可能使用的工具在这张插图中被标记：
你还可以通过将鼠标悬停在图标上来获得工具的描述。（大多数界面元素也是如此。）学习一些键盘快捷键是个好主意，比如 F1 或 S 用于选择工具。
Inkscape 是一个用于创建和编辑二维矢量图形图像的免费程序。我使用 Inkscape 创建了这本教科书的许多插图。作为一个矢量图形程序，Inkscape 存储的是场景中对象的列表及其属性，而不是像素的颜色。它保存图像使用的是 SVG（可缩放矢量图形）格式，这种格式在 第 2.7 节 中有所介绍。SVG 图像可以在许多标准图像查看器中打开，并且可以用于网络。Inkscape 在它创建的 SVG 文件中添加了一些额外数据，但这些数据将被其他程序忽略。
Inkscape 可以从其网站 inkscape.org 下载。它适用于 Windows、Mac OS 和 Linux 系统。截至 2023 年 7 月，最新版本是 1.3。本节内容基于 Inkscape 1.1 编写，但对 1.3 版本仍然适用。
Inkscape 窗口有一个大的中央绘图区域，周围有多条工具栏。许多对话框，比如设置描边和填充属性的对话框，会在窗口右侧边缘打开。布局是可配置的。例如，可以隐藏工具栏，也可以将对话框移出主窗口成为独立窗口。我的讨论假设是使用标准布局。
当打开一个新窗口时，绘图区域可能显示的是缩放后的视图。我通常首先按“1”键以获得未缩放的视图，以便全尺寸绘图。对于详细工作，放大视图也很有用。你可以通过输入“+”来放大，输入“-”来缩小。在“视图”菜单中还有一个“缩放”子菜单。
窗口左侧边缘的工具栏包含了 Inkscape 的绘图工具。你看到的工具集可能和这里显示的不完全相同，这取决于你使用的 Inkscape 版本。你最可能使用的工具在这张插图中被标记：
你还可以通过将鼠标悬停在图标上来获得工具的描述。（大多数界面元素也是如此。）学习一些键盘快捷键是个好主意，例如 F1 或 S 用于选择工具。
绘图工具用于创建形状，包括矩形、椭圆、星形/多边形、螺旋、贝塞尔曲线和文本工具。选择这些工具后，你可以使用鼠标向图像中添加形状。这些工具大多数都很容易使用，但下面将更详细地讨论其中一些工具。
选择工具是基础工具。它用于选择要编辑的形状以及移动所选形状。只有在你绘制了一些项目之后，它才有效。使用选择工具点击一个项目来选择它。通过使用选择工具拖动一个框围绕多个项目，可以选择多个项目。你也可以通过 shift 点击它们，或者通过 shift 拖动围绕一组项目来向选择中添加项目。
当多个项目被选择时，你可以将它们作为一个组进行操作。例如，你可以使用选择工具将组拖到新位置，或者你可以整体调整组的大小。你可以使用“对象”菜单中的“组合”命令将所选项目永久组合成复合项目；你可以使用“解组”命令来拆分复合项目。“组合”命令允许你进行分层图形操作（第 2.4 节）；也就是说，你可以将复合对象组合成更高级别的复合对象。
当你选择一个项目或一组项目时，会出现围绕该项目的手柄。你可以拖动手柄来变换选择。按住控制键可以限制变换。例如，调整项目大小时，按住控制键将保持形状的纵横比。实际上有两组手柄，还有通过拖动“控制点”修改形状的可能性。以矩形为例：
对于矩形，小圆形控制点可以拖动以创建圆角。当你首次绘制形状时，控制点也会出现。要让它们消失，你可以切换到选择工具。
Inkscape 中的形状可以描边和/或填充。你可以通过选择“对象”菜单中的“填充和描边”打开用于设置描边和填充属性的对话框。对话框适用于当前所选的对象或对象组。它有标签页用于设置描边颜色和填充颜色。还有一个“描边样式”标签页，你可以在那里设置描边宽度和其他属性。使用窗口底部附近的“颜色面板”可以快捷设置颜色：
如插图所示，颜色面板下方的状态栏包含有关当前所选形状和当前所选工具的信息。通过注意这个状态栏中的帮助文本，你可以学到很多如何使用 Inkscape 的方法！
在绘图区域上方，你可以找到一个工具选项栏，其内容会根据所选工具而变化。例如，在选择了选择工具的选项中，你会发现一些用于旋转和翻转当前选择的图标，以及提升或降低选择（使其在其他形状之前或之后移动）的图标。将鼠标悬停在图标上以了解其作用。再次强调，注意选项工具栏可以帮助你学习如何使用 Inkscape！这里，例如，是使用星形/多边形工具时出现的星形/多边形工具选项栏的一部分，它适用于正在编辑的星形/多边形形状：
如你所见，除非你了解它的选项以及如何更改它们，否则你无法有效使用这个工具。如果不使用选项，你甚至无法将形状从默认的星形更改为多边形。通过更改“圆角”和“随机化”选项，星形/多边形工具可以产生各种有趣的形状。
Inkscape 中最万能的形状工具是贝塞尔工具，它允许你绘制直线段、多边形路径和贝塞尔曲线。对于直线段，点击线的起点，然后在终点双击。对于多边形路径，只需点击一系列点，然后对最后一个点双击。Inkscape 将路径的端点和顶点称为“节点”。对于更一般的曲线形状，我发现最简单的方法是先以多边形开始，然后编辑它将直线段变成曲线。
一旦你有了一个多边形路径，切换到控制点编辑工具（F2 或 N 键）来修改形状。（你可能需要点击一个形状以开始编辑它。）使用该工具，你可以拖动线段的中间使其变成曲线。你也可以拖动路径的节点。当你点击曲线段末端的节点时，会出现手柄，你可以拖动手柄末端的控制点来调整形状。（这与在 Gimp 中编辑贝塞尔路径非常相似。）你应该注意到控制点编辑工具的工具选项栏中的这四个按钮图标：
在选中一个节点的同时点击这些按钮之一，以设置该节点的手柄如何工作。左边的按钮允许你自由地分别调整两个手柄。这是默认设置。使用该设置，你可以得到一个尖锐的点或角落。第二个按钮强制控制点和节点在一条线上，使得在该节点处的形状是平滑的。第三个按钮通过强制两个控制手柄长度相同，使形状更加平滑。
希望我提供的信息足以让你开始使用 Inkscape。还有更多东西可以学习。我将只提到一些更多的特性。
“对象”菜单中的“符号”命令会打开一个对话框，在窗口的右侧，有几组可以添加到图像中的“符号”。Inkscape 中的符号只是预定义的图像。例如，有一组“词气泡”和一组用于电路图的“逻辑符号”。对话框中的弹出菜单选择符号集。（注意，默认情况下，弹出菜单可能根本不选择任何符号。）你可以将符号集中的图像拖到窗口的绘图区域。一旦它成为绘图的一部分，你可以像其他形状一样调整它的大小和编辑它。记住，矢量图形的一个优势是可以在不损失任何质量的情况下调整形状的大小，所以你可以在任何尺寸下获得好看的符号！此外，通常你可以更改符号的描边和填充属性。
实际上，你可以使用“文件”菜单中的“导入”命令将任意图像添加到场景中。你也可以简单地将图像拖到 Inkscape 窗口上以将其添加到场景中。一旦图像成为场景的一部分，它就可以像任何其他对象一样进行缩放和旋转。
这里有一个你可以作为两个形状“差集”制作的形状示例。对于这个形状，一个正方形从一个圆中减去。我在形状后面添加了一个蓝色矩形，以便你可以看到实际上圆中有一个正方形的洞，而不仅仅是一个白色的正方形放在一个红色的圆上面：
“差集”是“路径”菜单中用于以各种方式组合两个形状的几个命令之一。其他操作包括“联合”、“交集”、“排除”和“分割”。（分割可以用来将一个形状切成两个独立的部分。）
以下是如何制作圆形减去正方形形状的方法，包括一些关于新技术的注释：在圆内画一个正方形。为了获得完美的圆和正方形而不是椭圆形和矩形，创建形状时按住控制键。要使两个形状对齐，使正方形在圆中完全居中，选择两个形状并使用“对象”菜单中的“对齐和分布”命令；这将打开一个对话框，其中包含你可以点击的图标，以各种方式对齐和分布所选对象。最后，要从另一个形状中减去一个形状，选择两个形状并使用“路径”菜单中的“差集”命令。请注意，上面的形状从下面的减去，这意味着你应该在画圆之后画正方形。你可以设置组合形状的描边和填充属性。填充形状应该填充正方形和圆形之间的区域，如图所示。如果你在这一点上画一个蓝色矩形，它将位于圆/正方形形状的顶部。要将其移至形状下方，选择矩形并使用“对象”菜单中的“降低”命令。
最后一个建议：你可能想要探索“过滤器”和“扩展”菜单中的许多命令。有趣的是，你可以对形状应用模糊滤镜，仍然可以编辑形状的属性。（滤镜存储为 SVG 文件中的属性，并在渲染形状时应用。）
This section is a very brief introduction to Inkscape, a free program for creating and editing 2D vector graphics images. I used Inkscape to create many of the illustrations for this textbook. As a vector graphics program, instead of storing colors of pixels, Inkskape stores a list of the objects in a scene, together with their attributes. It saves images in the SVG (Scalable Vector Graphics) format, which is covered in Section 2.7. SVG images can be opened in many standard image viewers and can be used on the Web. Inkscape adds some extra data to the SVG files that it creates, but that data will be ignored by other programs.
Inkscape can be downloaded from its web site at inkscape.org. It is available for Windows, Mac OS, and Linux. The latest version as of July, 2023 is 1.3. This section was written based on Inkscape 1.1, but it is still valid for version 1.3.
The Inkscape window has a large central drawing area, with several toolbars around the edges. Many dialog boxes, such as the one for setting stroke and fill properties, will open along the right edge of the window. The layout is configurable. For example, toolbars can be hidden, and dialog boxes can be moved out of the main window to become independent windows. My discussion assumes the standard layout.
When a new window is opened, the drawing area probably shows a scaled-down view. I prefer to work with a full size drawing, so the first thing I usually do is hit the "1" key to get an unscaled view. For detailed work, magnified views are also useful. You can zoom in by typing "+" and zoom out by typing "-". There is also a "Zoom" submenu in the "View" menu.
A toolbar that contains the Inkscape drawing tools runs along the left edge of the window. You might not see exactly the same set of tools that is shown here, depending the Inkscape version that you are using. The tools that you are most likely to use are labeled in this illustration:
You can also get a description of a tool by hovering your mouse over its icon. (The same is true for most interface elements.) It's a good idea to learn some of the keyboard equivalents, such as F1 or S for the select tool.
The drawing tools, which create shapes, are the Rectangle, Ellipse, Star/Polygon, Spiral, Bezier, and Text tools. After selecting those tools, you can use the mouse to add a shape to the image. For the most part, the tools are easy to use, but some of them are discussed in more detail below.
The Select tool is fundamental. It is used to select shapes for editing and to move selected shapes. It is only useful after you've drawn some items. Click on an item with the Select tool to select it. Select multiple items by dragging a box around them with the Select tool. You can also add items to the selection by shift-clicking them, or by shift-dragging around a group of items.
When multiple items are selected, you can manipulate them as a group. For example, you can use the Select tool to drag the group to a new position, or you can resize the group as a whole. You can use the "Group" command in the "Object" menu to permanently group the selected items into a compound item; you can break up a compound item using the "Ungroup" command. The "Group" command allows you to do hierarchical graphics (Section 2.4); that is, you can group compound objects into higher level compound objects.
When you select an item, or group of items, handles appear around the item. You can drag the handles to transform the selection. Hold down the control key to constrain the transformation. For example, when resizing an item, holding down the control key will preserve the aspect ratio of the shape. There are actually two sets of handles, as well as the possibility of modifying the shape by dragging "control points." Using a rectangle as an example:
For a rectangle, the small round control points can be dragged to make rounded corners. The control points also appear when you first draw the shape. To make them go away, you can switch to the Select Tool.
A shape in Inkscape can be stroked and/or filled. There is a dialog box for setting stroke and fill properties, which you can open by selecting "Fill and Stroke" from the "Object" menu. The dialog box applies to the currently selected object or objects. It has tabs for setting the stroke color and the fill color. There is also a "Stroke Style" tab, where you can set the stroke width and other attributes. There is a shortcut for setting colors, using the "Color Palette" near the bottom of the window:
The status bar under the color palette, as shown in the illustration, contains information about the currently selected shape and the currently selected tool. You can learn a lot about how to use Inkscape by paying attention to the help text in this status bar!
Above the drawing area, you can find a tool options bar, whose content changes depending on which tool is selected. In the options for the Select Tool, for example, you'll find some icons for rotating and flipping the current selection, and for raising or lowering the selection (to move it in front of or behind other shapes). Hover your mouse over an icon to find out what it does. Again, paying attention to the options toolbar can help you learn how to use Inkscape! Here, for example, is part of the Star/Polygon tool options bar, which appears when the Star/Polygon tool is being used and applies to the star/polygon shape that is being edited:
As you can probably see, it's not possible to use this tool effectively unless you are aware of its options and how to change them. Without using the options, you can't even change a shape from the default star-shape into a polygon. The Star/Polygon tool can produce a wide variety of interesting shapes by changing the "Rounded" and "Randomized" options.
The most versatile shape tool is the Bezier tool, which lets you draw straight lines, polygonal paths, and Bezier curves. For a straight line segment, click at the first endpoint of the line, then double-click at the second endpoint. For a polygonal path, just click on a series of points and double-click the final point. Inkscape refers to the endpoints and vertices of the path as "nodes." For a more general curved shape, I have found it easiest to start with a polygonal shape, which can then be edited to turn the straight sides into curves.
Once you have the polygonal path, switch to the Control Point Editing Tool (F2 or N key) to modify the shape. (You might need to click a shape to begin editing it.) With that tool, you can drag the middle of a line segment to make it into a curve. You can also drag the path's nodes. When you click the node at an end of a curved segment, handles will appear, and you can drag the control points at the ends of the handles to adjust the shape. (This is all very much like editing Bezier paths in Gimp.) You should note these four button icons in the tool options bar for the Control Point Editing Tool:
Click one of these buttons while a node is selected to set how the handles for that node work. The left button allows you to freely adjust the two handles separately. This is the default setting. With that setting, you can get a sharp point or corner. The second button forces the control points and the node to lie on a line, giving a shape that is smooth at that node. The third button makes an even smoother shape by forcing the two control handles to have the same length.
Hopefully, I have given you enough information to get you started with Inkscape. There is a lot more to learn. I will mention just a few more features.
The "Symbols" command in the "Object" menu will open a dialog box, on the right side of the window, with several sets of "symbols" that can be added to an image. A symbol in Inkscape is just a predefined image. For example, there is a set of "Word Balloons" and a set of "Logic symbols" for use in circuit diagrams. A popup menu in the dialog box selects the symbol set. (Note that the default selection in that popup menu will probably no symbols at all.) You can drag an image from a symbol set into the drawing area of the window. Once it's part of the drawing, you can resize and edit it just like other shapes. Remember that one of the advantages of vector graphics is that shapes can be resized without any loss of quality, so you get nice looking symbols at any size! Also, in general, you can change the stroke and fill properties of a symbol.
In fact, you can add arbitrary images to the scene, using the "Import" command in the "File" menu. You can also simply drag an image onto the Inkscape window to add it to the scene. Once an image is part of the scene, it can be scaled and rotated just like any other object.
Here's an example of a shape that you can make as a "difference" of two shapes. For this shape, a square was subtracted from a circle. I added a blue rectangle behind the shape so that you can see that there's actually a square hole in the circle, not simply a white square on top of a red circle:
"Difference" is one of several commands in the "Path" menu for combining two shapes in various ways. Other operations include "Union", "Intersection", "Exclusion", and "Division". (Division can be used to cut a shape into two independent pieces.)
Here is how to make the circle-minus-square shape, including a few notes about new techniques: Draw a square inside a circle. To get perfect circles and squares instead of ovals and rectangles, hold down the control key while creating the shape. To align the two shapes so that the square is perfectly centered in the circle, select both shapes and use the "Align and Distribute" command in the "Object" menu; this will bring up a dialog box containing icons that you can click to align and distribute the selected objects in various ways. Finally, to subtract one shape from the other, select both shapes and use the "Difference" command in the "Path" menu. Note that the upper shape is subtracted from the lower, which means that you should draw the square after you draw the circle. You can set the stroke and fill properties of the combined shape. Filling the shape should fill the region between the square and the circle, as shown in the picture. If you draw a blue rectangle at this point, it will be on top of the circle/square shape. To move it under the shape, select the rectangle and use the "Lower" command from the "Object" menu.
One last suggestion: You might want to investigate some of the many commands in the "Filters" and "Extensions" menu. It's interesting that you can apply a blur filter to a shape, and still edit the properties of the shape. (The filter is stored as an attribute in the SVG file and is applied whenever the shape is rendered.)