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.
正如你所見,被選取的矩形 (剛繪製好的矩形都會呈選取狀態) 在三個角上會顯示三個控制點。實際上有四個控制點,但如果非圓角矩形其中兩個 (右上角) 會重疊在一起。其中兩個是圓角控制點;其餘兩個 (左上角和右下角) 是大小調整控制點。
先來看圓角控制點。抓住其中一個並往下拖動。矩形的四個角全部都會變成圓角,而你可以看到第二個圓角控制點 — 在原來的位置上。這時候是圓形的圓角。如果你想讓圓角成橢圓形,便向左移動其他控制點。
下圖,前面兩個矩形為圓形圓角,而其餘兩個則是橢圓形圓角:
橢圓形圓角
圓形圓角
在使用矩形工具的情形下,點擊這些矩形來選取,並觀察它們的圓角控制點。
常會需要讓整個形體內的圓角半徑和形狀固定不變,即使矩形的大小不同 (想像一下圖表中各種大小的圓角方形)。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:
縮放圓角矩形關閉同時 "縮放圓角"
可發現在所有矩形中圓角的大小和形狀都不會改變,所以全部右上角的圓角完全重疊在一起。全部點線邊框的藍色矩形都是從紅色矩形用選取工具進行縮放得到的,且不作任何圓角控制點的手動調整。
For a comparison, here is the same composition but now created with the “Scale rounded corners” button on:
縮放圓角矩形開啟同時 "縮放圓角"
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:
拖曳時游標在橢圓形的外面移動可得到一個扇形 (一個弧形加上兩個半徑);拖曳時游標在橢圓形的內部移動則可得到一個弧形。上面的左邊有 4 個扇形而右邊有 3 個弧形。注意那些弧形是未閉合的形狀,也就是說邊框沿著橢圓形但弧形的兩端點沒有接合在一起。如果你移除填色只留下邊框可讓這個特徵更明顯:
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 的奧妙,讓他們玩這個工具。它有無窮的樂趣 — 會讓人徹底上癮!
星形工具能建立兩種類似但外觀不同的物件:星形和多邊形。一個星形有兩個控制點,控制點的位置決定星形尖角的長度和形狀;而一個多邊形僅有一個控制點,當拖曳這個控制點可簡單地旋轉和調整多邊形的大小:
星形
多邊形
在星形工具的控制列上,前兩個按鈕是控制星形繪製方式 (普通多邊形或星形)。下一項,數字輸入欄可設定星形或多邊形的頂點數目。這項參數只能經由控制列進行編輯。容許範圍從 3 到 1024,但是如果你的電腦運算能力較差不應該嚐試過大的數值 (比如說,超過 200)。
當繪製一個新的星形或多邊形,
Drag with Ctrl to snap the angle to 15 degree increments.
當然,星形較為有趣 (雖然實際上多邊形比較有用)。星形的兩個控制點有截然不同的功能。第一個控制點 (一開始位於頂點上,即在星形的凸角上) 可使星形的光芒變長或變短,但是當你旋轉它時 (相對於形狀的中心點),另一個控制點也會跟著旋轉。這表示你不能用這個控制點來傾斜星形的光芒。
另一個控制點 (一開始位於兩個頂點之間的凹角上) 能任意地沿徑向和切線方向移動,而不會影響頂點的控制點。(事實上,這個控制點可經由移動超過另一個控制點位置使其變成頂點) 它可以傾斜星形的尖角來獲得各種樣式的結晶、曼陀羅、雪花和豪豬:
如果你要的只是簡單、規則的星形而不是這種花邊創作,你可以讓星形不要傾斜:
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.
「切線方向」表示與半徑垂直的方向。如果你按著 Shift 繞著中心點逆時鐘「旋轉」控制點,可得到正圓角;順時鐘旋轉,則可得到負圓角。(看下面的負圓角範例)
比較一下圓角正方形 (矩形工具) 和圓角四邊形 (星形工具) 的差別:
Rounded多邊形
Rounded矩形
正如你所見,圓角矩形有直線段的邊和圓形 (一般為橢圓形) 圓角,而圓角多邊形或星形整體上沒有直線段;曲率從最大值 (頂點) 平順地變化為最小值 (頂點間的中途)。Inkscape 藉由將同一直線的貝茲切線加入到形狀的每個節點輕易地產生這種效果 (如果把形狀轉成路徑並用節點工具查看路徑可見到詳細情形)。
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 能使星形和多邊形隨機化 (即隨機扭曲)。輕微的隨機化會使星形有點不規則、更人性、更好玩;高度隨機化則可獲得各種瘋狂不可預知的形狀。圓角星形隨機化時仍保有平滑圓角。下面有相關快捷鍵:
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。
就如同橢圓形工具不僅可繪製橢圓也能繪製弧形 (固定曲率的線條),螺旋形工具對於製作平滑彎曲變化的曲線時非常好用。和普通的貝茲曲線比較起來,弧形或螺旋常常較為便利,因為你可以藉由拖動控制點來沿著曲線變短或變長而不影響形狀外觀。另外,一般繪製出來的螺旋形沒有填色,你可加入填色並移除邊框來產生有趣的效果。
點狀邊框的螺旋形特別地有趣 — 融合平滑的集中形狀和規則的均勻分佈可製作出優美的波紋標誌 (點或線段):
結論
Inkscape 的形狀工具是非常強大的。學習形狀工具的技巧並於空閒時練習使用 — 這會讓你進行設計工作時獲得益處,因為常常使用形狀會可讓向量插圖創作更快速且更容易修改。如果你有任何改進形狀工具的意見,請聯絡開發人員。
Bulia Byak; Jonathan Leighton; Colin Marquardt; Nicolas Dufour; Gellért Gyuris
Dong-Jun Wu — 2009, 2016; — 2009
Esteban Capella — 2019