Tutorial | シェイプ
このチュートリアルは 4 つのシェイプツール (矩形、円/弧、星形、らせん) について説明しています。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 には多用途の 4 つのシェイプツールがあり、どのツールでもシェイプの作成と編集が行えます。シェイプは、ドラッグ可能なハンドルと、数値パラメーターによって形状が決定され、各シェイプに固有の方法で変更を加えることが可能なオブジェクトです。
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 つのハンドルが角にあります。実際には 4 つのハンドルがあるのですが、そのうちの 2 つ (右上) は矩形の角が丸まっていないときには重なっています。この 2 つは丸めハンドル、他の 2 つはリサイズハンドルです。
はじめに丸めハンドルを見てみましょう。そのうちの一つをつかんで引き下げてみてください。矩形の 4 つの角が丸くなり、角の元の場所に 2 つ目の丸めハンドルが見えたはずです。円状に丸めたいのであればこれだけで事足ります。もし角の一方の辺側をもう一方より丸めたいのであればもう一方のハンドルを左に動かすことで行えます。
最初の 2 つは角を円状に丸めた矩形、他の 2 つは角を楕円状に丸めた矩形です:
角を楕円状に丸めた矩形
角を円状に丸めた矩形
矩形を選択して、矩形ツールの丸めハンドルについてもう少しみてみましょう。
しばしば、角を持つシェイプの丸め半径と形状は作品全体にわたり一定であることが必要とされます。矩形の大きさが異なっていても (色々な大きさの角を丸めた箱で描かれた図を考えてみてください) これは必要なことです。Inkscape でこれを実現するのは簡単です。選択ツールに切り替えてください。ツールコントロールバーの右側に 4 つのトグルボタンがあり、その左から 2 番目に同心の丸めた角が表示されています。このボタンで、丸めた角を矩形が拡大縮小されたときに丸めも拡大縮小するかを制御します。
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.
今度は、矩形のリサイズハンドルを見てみましょう。なぜこれが必要なのか不思議に思うかもしれません、選択ツールで矩形のサイズを変更すればいいのではないか?
選択ツールの問題点は、水平および垂直の概念が常にドキュメントページの水平および垂直方向であることです。決まりとして、矩形のリサイズハンドルは、矩形が回転しても歪んでいても 矩形の辺に沿って拡大縮小を行います。例えば、最初に選択ツールでサイズ変更した矩形を次に矩形ツールのリサイズハンドルでサイズ変更してみてください:
リサイズハンドルは 2 つあるので、どの方向へもサイズ変更することができますし、辺に沿って移動することも可能です。リサイズハンドルは常に丸め半径を維持します。
リサイズハンドルのショートカットは以下のとおりです:
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
傾けたり回転した矩形を複製しリサイズハンドルでサイズを変更し、3D の構図を簡単に作ることができます:
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:
扇形 (弧と 2 つの半径からなる) を作るには楕円の外側をドラッグし、弧を作るには内側をドラッグします。上図の左側には 4 つの扇形、右側には３つの弧があります。弧は閉じていないシェイプであることに注意してください。つまりストロークは楕円にそっていますが端点はつながっていません。フィルを削除してストロークだけにすると明らかになります:
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).
楕円のその他の 2 つハンドルは中心を基準としたサイズ変更に使用します。ショートカットは矩形の丸めハンドルに似ています:
Drag with Ctrl to make a circle (make the other radius the same).
Ctrl+click to make a circle without dragging.
そして、矩形のリサイズハンドルの様に、楕円のリサイズハンドルも楕円の高さと幅を楕円の座標系で変更します。これは回転したり歪んだりしている楕円でも、回転や歪みはそのままで元の座標系に沿って伸張したり圧縮したりできることを意味します。これらの楕円のリサイズハンドルでサイズ変更を試してみましょう:
星形
星形はもっとも複雑で刺激的な Inkscape のシェイプです。もし友人を Inkscape で驚かせるなら、星形ツールを使わせてみてください。これはもう飽きの来ない面白さ、まさに中毒的!
星形ツールは 2 つの良く似た、しかし異なる種類のオブジェクト、星形と多角形を作成します。星形は頂点の長さと形を決める 2 つのハンドルを持ち、多角形はドラッグして回転とサイズ変更を行う 1 つのハンドルを持ちます:
星形
多角形
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.
生来、星形は断然面白いシェイプです (しばしば多角形の方がより有用ですが)。星形の二つのハンドルはわずかに異なる機能を持っています。はじめのハンドル (初期状態で頂点にあるハンドル、つまり星形の 凸 な角にある方) は星の光芒の長さを調整します。しかし、ハンドルを回すと (シェイプの中心で相対的に)、もう一方のハンドルもそれに応じて回転します。このことは星形の光芒はこのハンドルでは歪められないことを意味します。
もう一方のハンドル (初期状態で頂点の間の 凹 な角にある) は、逆に、半径方向にも接線方向にも頂点ハンドルに影響をあたえずに自由に動きます (実際、このハンドルはもう一方のハンドルより遠くに動いて頂点になることもできます)。このハンドルは星形の頂点を歪ませ、光芒をあらゆる種類の結晶型、曼荼羅模様、雪片形、ヤマアラシ形にします:
もし、飾りのない普通の星形を作りたいなら、ハンドルの歪みの動きを規制することができます:
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 の星形は他にも 2 つの仕掛けがあります。幾何学の世界では多角形は鋭角から直線の辺を持ちますが、現実世界では様々な度数の曲がりや丸さが存在します。そして Inkscape もそれを実現可能としています。ただし、多角形の丸めは矩形の丸めとは少し異なる作用をします。丸めるにはハンドルを使う必要がありません。以下のようにします:
Shift+drag a handle tangentially to round the star or polygon.
Shift+click a handle to remove rounding.
“接線方向”とは中心に対して直角方向と言う意味です。Shift を押しながらハンドルを反時計方向に“回転”すると、丸めの値は正になり、時計方向に回すと負の丸めになります (下の負の丸めの例を見てください)。
ここで、丸めた正方形 (矩形ツール) と丸めた正 4 角形 (星形ツール) を比較してみましょう:
Roundedpolygon
Roundedrectangle
見て分かるように、丸めた矩形は辺に直線区間と円弧状 (一般的には楕円弧) の区間があり、丸めた多角形と星形には直線区間が全くありません。曲率は最大 (角の部分) から最小 (角と角の中間) へと滑らかに変化します。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.
描画されると、らせんは内側と外側の端点に 2 つのハンドルをもちます。どちらのハンドルもらせんを巻いたり、解いたりします (つまり、"続けて" 巻き数を変えます)。その他のショートカットは以下のとおりです:
外側のハンドル：
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
Toshifumi Sato — 2005; Masato Hashimoto — 2009, 2012
Esteban Capella — 2019