Tutorial | 形状
本教程涵盖四种形状工具:矩形、椭圆、星形和螺旋线。我们将向你展示Inkscape在形状绘制上的能力,并通过实例演示这些工具的用法和用途。
Use Ctrl+Arrows, mousewheel, or middle button drag to scroll the page down. For basics of object creation, selection, and transformation, see the Basic tutorial in Help⇒Tutorials.
Inkscape有四种通用的形状工具,可以创建和编辑相应的形状。每种形状类型都具有共同的特征,可以通过拖动式的控制柄和一些数值参数来调节,使其具有不同的外观。
For example, with a star you can alter the number of tips, their length, angle, rounding, etc. — but a star remains a star. A shape is “less free” than a simple path, but it's often more interesting and useful. You can always convert a shape to a path (Shift+Ctrl+C), but the reverse conversion is not possible.
形状工具包括:矩形, 椭圆, 星形, 和 螺旋线。首先,我们看一下形状工具的基本工作模式,然后再分别详细介绍。
一般性操作
A new shape is created by dragging on canvas with the corresponding tool. Once the shape is created (and so long as it is selected), it displays its handles as white diamond, square or round marks (depending on the tools), so you can immediately edit what you created by dragging these handles.
All four kinds of shapes display their handles in all four shape tools as well as in the Node tool (F2). When you hover your mouse over a handle, it tells you in the statusbar what this handle will do when dragged or clicked with different modifiers.
每一种形状工具在绘图区顶部都会显示一个水平的工具控制栏。通常包括几个数字输入框和恢复默认参数的按钮。如果当前选择的形状工具类型与当前对象的形状类型一致,在控制栏中输入数字也可以改变被选对象的形状。
工具控制栏中参数的修改将应用到新创建的形状上。例如,如果将星形的顶点数改变,新的星形的顶点数将与改变后的数值一致。另外,选择形状后,也会将其具有的特征参数显示在工具控制栏,从而影响以后创建的新形状。
When in a shape tool, selecting an object can be done by clicking on it. Ctrl+click (select in group) and Alt+click (select under) also work as they do in Selector tool. Esc deselects.
矩形
矩形是设计和绘图中最常用、最简单的形状。Inkscape尽力使矩形的创建和编辑简单快捷。
F4或者点击工具列中相应的图标,可以切换到矩形工具模式。请在这个蓝色矩形旁再画一个矩形:
在这里画
保持在矩形工具模式下,通过单击,交替选择两个矩形。
矩形绘制技巧:
With Ctrl, draw a square or an integer-ratio (2:1, 3:1, etc) rectangle.
With Shift, draw around the starting point as center.
刚绘制的矩形(新绘的矩形总是自动被选中)在三个角上显示3个控制柄,但实际上有四个控制柄,如果矩形没有圆角,右上角的两个是重合在一起的。这两个是倒圆控制柄;另外两个(左上和右下)是缩放控制柄。
首先看倒圆控制柄,抓住一个向下拖动,四个角都成圆形,并且第二个倒圆控制柄也显露出来(在角上的原始位置)。现在的圆角是等半径的,如果要使其成为不等半径的圆角,就需要向左移动另一个控制柄。
下图中前两个矩形具有等半径圆角,后两个则是椭圆形圆角:
椭圆形圆角
等半径圆角
在矩形工具模式下,点击选择这些矩形,看看他们的倒圆控制柄的区别。
有时,在整个绘图中,我们希望圆角的半径和形状保持不变,而不是随着矩形的大小而变化(例如流程图中,不同大小的矩形具有相同的圆角)。这在Inkscape中可以轻松实现。切换到选择工具,在工具控制栏的尾部,有四个开关按钮,左数第二个按钮(显示两个同心圆角),可以控制缩放矩形时圆角是否也同步缩放。
For example, here the original red rectangle is duplicated and scaled several times, up and down, to different proportions, with the “Scale rounded corners” button off:
缩放圆角矩形关闭 "缩放圆角Scale rounded corners"
注意所有矩形的圆角的大小和形状都是相同的,在右上角的位置可以精确地重合在一起。所有的蓝色虚线矩形都是从原始的红色矩形缩放得到,没有对倒圆控制柄做任何修改。
For a comparison, here is the same composition but now created with the “Scale rounded corners” button on:
缩放圆角矩形打开 "缩放圆角Scale rounded corners"
Now the rounded corners are as different as the rectangles they belong to, and there isn't a slightest agreement in the top right corner (zoom in to see). This is the same (visible) result as you would get by converting the original rectangle to a path (Ctrl+Shift+C) and scaling it as path.
矩形的倒圆控制柄的操作技巧如下:
Drag with Ctrl to make the other radius the same (circular rounding).
Ctrl+click to make the other radius the same without dragging.
Shift+click to remove rounding.
You may have noticed that the Rectangle tool's Controls bar shows the horizontal (Rx) and vertical (Ry) rounding radii for the selected rectangle and lets you set them precisely using any length units. The Not rounded button does what is says — removes rounding from the selected rectangle(s).
An important advantage of these controls is that they can affect many rectangles at once. For example, if you want to change all rectangles in the layer, just do Ctrl+A (Select All) and set the parameters you need in the Controls bar. If any non-rectangles are selected, they will be ignored — only rectangles will be changed.
下面我们来看一下缩放控制柄。你可能会想,既然可以通过选择工具缩放,要这个缩放控制柄不是多余了吗?
选择工具缩放存在的问题是,它总是沿着页面的方向进行水平和竖直缩放,而矩形缩放控制柄是沿边的方向进行缩放,即使矩形经过选择或倾斜。请试一下用选择工具和(矩形工具模式下的)缩放控制柄对下面的矩形进行缩放的区别:
由于有两个缩放控制柄,可以沿任意方向缩放矩形,甚至可以让它沿着一条边的方向移动。这种缩放模式保持圆角半径不变。
缩放控制柄的技巧:
Drag with Ctrl to snap to the sides or the diagonal of the rectangle. In other words, Ctrl preserves either width, or height, or the width/height ratio of the rectangle (again, in its own coordinate system which may be rotated or skewed).
Here is the same rectangle, with the gray dotted lines showing the directions to which the resize handles stick when dragged with Ctrl (try it):
Snapping of rectangle - resize handles with Ctrl
通过倾斜和旋转矩形,然后复制和缩放,可以很容易地生成三维效果:
3个原始矩形
Several rectangles copied and resized by handles(mostly with Ctrl)
一些其它的矩形构图,其中也用了圆角和渐变填充:
椭圆
椭圆工具(F5) 可以创建椭圆和圆,然后也可以将其分为分割或圆弧段。绘制技巧与矩形工具相同:
With Ctrl, draw a circle or an integer-ratio (2:1, 3:1, etc.) ellipse.
With Shift, draw around the starting point as center.
让我们详细看一下椭圆的控制柄。首先选择这个椭圆:
Once again, you see three handles initially, but in fact they are four. The rightmost handle is two overlapping handles that let you “open” the ellipse. Drag that rightmost handle, then drag the other handle which becomes visible under it, to get a variety of pie-chart segments or arcs:
要得到分割segment(半径封闭),拖动时鼠标要保持在椭圆的外面,相反,如果鼠标在椭圆里面,则得到弧线arc。上图中,左侧共有四个分割,右侧有三个弧线。注意,弧线是不封闭的,仅弧线上有轮廓线,两端没有连接在一起。如果去掉填充色,只保留轮廓,看得就更清楚一些:
15
分割
圆弧
Note the fan-like group of narrow segments on the left. It was easy to create using angle snapping of the handle with Ctrl. Here are the arc/segment handle shortcuts:
With Ctrl, snap the handle every 15 degrees when dragging.
Shift+click to make the ellipse whole (not arc or segment).
The snap angle can be changed in Inkscape Preferences (in Behavior⇒Steps).
另外两个控制柄使椭圆绕中心缩放。操作技巧同矩形的控制柄是相似的:
Drag with Ctrl to make a circle (make the other radius the same).
Ctrl+click to make a circle without dragging.
与矩形的缩放控制柄类似,椭圆的缩放控制柄也是沿其自身的坐标轴方向调整其长度和宽度。也就是说,旋转或倾斜后仍然可以沿其本身的长短轴方向进行拉伸和挤压。试一下通过缩放控制柄对下面的椭圆进行缩放:
星形
星形是Inkscape中最复杂,最吸引人的形状。如果你想用Inkscape让你的朋友们眼前一亮(Wow!),只需要给他们展示一下星形工具。它简直是乐趣无穷。
星形工具可以创建两种类似但看起来差别很大的形状:星形和多边形。星形有两个控制柄,决定星形角的长度和形状;多边形只有一个控制柄,拖动时控制旋转和缩放:
星形
多边形
In the Controls bar of the Star tool, the first two buttons control how the shape is drawn (regular polygon or star). Next, a numeric field sets the number ofvertices of a star or polygon. This parameter is only editable via the Controls bar. The allowed range is from 3 (obviously) to 1024, but you shouldn't try large numbers (say, over 200) if your computer is slow.
当绘制一个新的星形或多边形时,
Drag with Ctrl to snap the angle to 15 degree increments.
一般来说,星形看起来更吸引人(实际上多边形更实用)。星形的两个控制柄的差异略有不同。第一个初始位置在角的顶端,控制角的长短,但相对于星形的中心旋转时,另一个控制柄也跟着旋转。也就是说,这个控制柄不能让星形的角倾斜。
另外一个控制柄,初始位置在两个角中间的底端,可以沿半径或圆周方向任意移动,而不影响角顶端的控制柄(实际上,它的位置可以超过现有角的顶点而产生新的角)。这个控制柄可以使星形的角倾斜,获得晶体、雪花、 曼荼罗以及porcupines等各种形状。
如果你要的只是一个规则的星形,不需要这些装饰性的工艺,你可以抑制倾斜控制柄的倾斜功能:
Drag with Ctrl to keep the star rays strictly radial (no skew).
Ctrl+click to remove the skew without dragging.
As a useful complement for the on-canvas handle dragging, the Controls bar has the Spoke ratio field which defines the ratio of the two handles' distances to the center.
Inkscape兜里还有两个小绝技。从几何上来数,多边形是由直边和锐角组成,但现实中,会出现各种各样的边和圆角,这在Inkscape中也可以实现。倒圆星形和多边形与矩形略有不同,并没有专门的控制柄。但是,
Shift+drag a handle tangentially to round the star or polygon.
Shift+click a handle to remove rounding.
“切向”表示垂直于指向中心的半径的方向。如果沿逆时针方向拖动,得到正圆角,顺时针方向拖动,则得到负圆角。(看下面图中负圆角的例子。)
这里比较一下由矩形工具产生的圆角正方形和由星形工具产生的圆角正四边形:
Rounded多边形
Rounded矩形
可以看到,圆角矩形由边和圆角构成,而圆角多边形和星形则没有边,从角的顶点圆滑过渡到底端的点。Inkscape通过在各个顶点产生切线方向一致的Besizer曲线来平滑星形(正多边形)。(将其转为路径后,用节点工具可以看出来。)
The Rounded parameter which you can adjust in the Controls bar is the ratio of the length of these tangents to the length of the polygon/star sides to which they are adjacent. This parameter can be negative, which reverses the direction of tangents. The values of about 0.2 to 0.4 give “normal” rounding of the kind you would expect; other values tend to produce beautiful, intricate, and totally unpredictable patterns. A star with a large roundedness value may reach far beyond the positions of its handles. Here are a few examples, each indicating its roundedness value:
0.25
0.25
0.25
0.37
0.43
3.00
3.00
0.41
5.43
1.85
0.21
3.00
−0.43
−8.94
0.39
If you want the tips of a star to be sharp but the concaves smooth or vice versa, this is easy to do by creating an offset (Ctrl+J) from the star:
原始星形
关联偏移,向内
关联偏移,向外
Shift+dragging star handles in Inkscape is one of the finest pursuits known to man. But it can get better still.
为了模仿真实的形状,Inkscape可以对星形和多边形做随机化randomize处理。轻微的随机使形状的规则性下降,更随意,更有趣;而更强的随机则可以产生无法预测的“疯狂”效果。 具有圆角的星形随机化后仍然保持圆角。其中的一些技巧:
Alt+drag a handle tangentially to randomize the star or polygon.
Alt+click a handle to remove randomization.
当绘制或拖动控制柄随机化星形时,形状会“抖动”,因为控制柄的每个位置都对应一种唯一的随机化效果。不使用Alt,仅移动控制柄,则在当前的随机化水平上重新产生一种随机化效果,使用Alt,拖动控制柄时,保持当前的随机化效果,仅改变随机化的程度。下面的星形具有相同的参数,仅略微移动控制柄,具有不同的随机化效果(随机化程度0.1)。
下面是上图中中间的星形,但随机化程度介于-0.2到0.2:
+0.2
+0.1
0
−0.1
−0.2
Alt+drag a handle of the middle star in this row and observe as it morphs into its neighbors on the right and left — and beyond.
在你自己的工作中,你将会发现随机化星形具有的各种用途,但我个人尤其喜欢这种像变形虫和凸凹不平的星球表面一样充满幻想的图案:
螺旋线
Inkscape中的螺旋线是一种灵活的形状,尽管不像星形工具那样吸引人,有时也有很大的用途。螺旋线像星形一样,也从中心绘制,编辑也是相对于中心的,
Ctrl+drag to snap angle to 15 degree increments.
画好后,螺旋线有两个控制柄,分别位于内部的起点和终点。拖动时都可以改变螺旋的角度(增减圈数)。其它的操作技巧:
外部控制柄:
Shift+drag to scale/rotate around center (no rolling/unrolling).
Alt+drag to lock radius while rolling/unrolling.
内部控制柄:
Alt+drag vertically to converge/diverge.
Alt+click to reset divergence.
Shift+click to move the inner handle to the center.
The divergence of a spiral is the measure of nonlinearity of its winds. When it is equal to 1, the spiral is uniform; when it is less than 1 (Alt+drag upwards), the spiral is denser on the periphery; when it is greater than 1 (Alt+drag downwards), the spiral is denser towards the center:
0.2
0.5
6
2
1
螺旋线的最大圈数为1024。
椭圆工具不仅可以产生椭圆,也可以产生圆弧(具有常曲率),螺旋线则可以产生曲率平滑改变的曲线。与普通的Bezier曲线相比,圆弧和螺旋线更方便,可以随意改变长度(拖动控制柄),而不会影响到其形状。螺旋线默认没有填充,加上填充,取消轮廓线,也可以产生一些有趣的效果。
最有趣的是,轮廓线为点时产生的效果:向内旋转和(点或短线)等间隔分布可以组合成很优美的波纹效果:
小结
Inkscape形状工具的功能非常强大。有时间请注意多加练习,在实际的设计工作中他们不会让你失望的。而且,矢量绘图中形状工具通常比路径工具使用起来更快速,编辑起来更方便。如果你对这些工具有一些改进的建议,请与开发人员联系。
Bulia Byak; Jonathan Leighton; Colin Marquardt; Nicolas Dufour; Gellért Gyuris
柳小勤Liu Xiaoqin — 2008
Esteban Capella — 2019