トップ > 知っておきたい機能 > 複製と生成 >
塗りつぶし(類似色の連続領域の形状でパスを生成)

  

塗りつぶしツールで色の連続を塗る

この記事では、塗りつぶしツールについて紹介します。 なお、Inkscapeの塗りつぶしツールは、GIMPなどのペイント系ソフトウェアの塗りつぶしツールとは動作が大きく異なります。 実際に塗りつぶすのではなく、その形状の新たなパスを生成する仕様になっています

 

何度も説明しているように、Inkscapeでは1つのオブジェクトは1つのフィルとストロークしか持てません。 そのため、オブジェクトの一部の領域だけを塗りつぶすなんてことはできないのです

  
テキストだけは例外です。 テキストは文字ごとにフィル/ストロークを持つことができます。

塗りつぶしツールを使ってみよう

では、塗りつぶしツールを使ってみましょう。 まずは、いくつかのシェイプを用意します。

1. 7つの矩形のシェイプを作成
1. 7つの矩形のシェイプを作成

上図のように7つの矩形のシェイプを作成します。 左から、ストロークのみの矩形、重なり合っているストロークのみの2つの矩形、隣り合う水色・緑色・黄色のフィルのみの3つの矩形、青色から白色へのグラデーションのフィルとストロークを持つ矩形、の7つです。

なお、背景が市松模様なのはドキュメントのプロパティダイアログの "格子柄の背景" をオンにしているためです。 透明部分であることをわかりやすくするために市松模様にしてみました

では説明を続けます。 まずは、塗りつぶしツールに切り替えましょう。

2. 塗りつぶしツールを選択
2. 塗りつぶしツールを選択

上図のように画面左部にあるツールボックスから塗りつぶしツールを選択します(またはキーボードのU(またはSHIFT+F7キー)を押します)。

続いて、塗る色を指定する必要があります。 今回は赤色で塗ってみましょう。 画面下部のカラーパレットから赤色を指定します。

3. 色をクリック
3. 色をクリック

上図のようにカラーパレットの赤色を、マウスの左ボタン(マウスの左ボタン)でクリックします。

4. カレントスタイルのフィルが赤色になる
4. カレントスタイルのフィルが赤色になる

上図のようにツールコントロールの右端にあるカレントスタイルのフィルが赤色になります。

  
ツールコントロールの右端にはカレントスタイルと呼ばれる領域があります。 カレントスタイルには、選択中のツールに設定されているフィルとストロークの情報が表示されます。
  
カレントスタイルではフィルやストロークの設定を変更することはできません。 画面左下のスタイルインジケータとは異なり、見るだけの項目です。

これで塗りつぶす準備が整いましたので実際に塗ってみましょう。 まずは、何もない場所を塗ってみます

5. 何もない場所をクリック
5. 何もない場所をクリック

上図のようにシェイプが置かれていない何もない場所をマウスの左ボタン(マウスの左ボタン)でクリックします。

6. 何も変化はない
6. 何も変化はない

上図のように何も変化はありません。 理由は、画面下部の通知エリアに表示されています

7. 通知エリア
7. 通知エリア

上図のように通知エリアに "領域は境界線で囲まれていません。塗りつぶしできません。" と表示されています。 つまり、塗りつぶしが失敗したということです

塗りつぶしが失敗したのは、塗りつぶす領域が無限に広がっているためです。 Inkscapeでは、ページはあくまでも目安であり、ページの外にもオブジェクトを配置することができます。 そのため、塗りつぶしがページの境界で止められる、という仕様にはなっていません

結果、クリック地点から同色をたどった領域が無限に広がることになりエラーが発生しました。 このように、囲まれていない領域を塗りつぶすことはできません

では次に、一番左のストロークのみの矩形のフィルを塗ってみましょう。

8. ストロークのみの矩形の内側をクリック
8. ストロークのみの矩形の内側をクリック

上図のようにストロークのみの矩形の内側をマウスの左ボタン(マウスの左ボタン)でクリックします。

9. フィルが赤色で塗られる
9. フィルが赤色で塗られる

上図のようにフィルが赤色で塗られます。 ただし、本当にフィルが赤色に塗られたわけではありません。 赤色のフィルを持つ新たなパスが作成されています

また、よく見ると赤色の周囲に隙間が見えます。 Inkscapeの塗りつぶしは、キャンバス上に現在表示されている画像で色が判別されるためです。 つまり、表示倍率が低いと隙間が多くなり、表示倍率を上げると隙間は少なくなります

ではここで、赤色で塗られた領域が新たなオブジェクトであることを確認してみます。 選択ツールに切り替えて移動してみましょう

10. 新たなオブジェクトを移動する
10. 新たなオブジェクトを移動する

上図のように新たなオブジェクトを移動します。 ストロークのみの矩形は何も変化していないことがわかります

ではここで、赤色で塗られたオブジェクトを削除します

11. 赤色で塗られたオブジェクトを削除する
11. 赤色で塗られたオブジェクトを削除する

上図のように赤色で塗られたオブジェクトを削除します。 削除したら再び塗りつぶしツールに切り替えましょう

では続いて、表示倍率を上げずに隙間を少なくする方法を説明します。 画面上部のツールコントロールにある "拡縮量" を調整することで隙間を減らすことができます。

12. コントロールの拡縮量を1.5pxにする
12. コントロールの拡縮量を1.5pxにする

上図のように画面上部にあるツールコントロールの拡縮量を 1.5px に変更します。 では、もう一度、ストロークのみの矩形のフィルを塗ってみましょう。

13. ストロークのみの矩形の内側をクリック
13. ストロークのみの矩形の内側をクリック

上図のようにストロークのみの矩形の内側をマウスの左ボタン(マウスの左ボタン)でクリックします。

14. フィルが赤色で塗られる
14. フィルが赤色で塗られる

上図のようにフィルが赤色で塗られます。 また、隙間が少なくなっていることがわかります。 これは、領域が 1.5px だけ広げられたためです。

  
拡縮量にマイナス値を設定することで、縮小させることもできます。

では次に、矩形の交差部分を塗ってみましょう。

15. 矩形の交差部分をクリック
15. 矩形の交差部分をクリック

上図のように矩形の交差部分をマウスの左ボタン(マウスの左ボタン)でクリックします。

16. 交差部分が赤色で塗られる
16. 交差部分が赤色で塗られる

上図のように交差部分が赤色で塗られます。 もちろん、実際に塗られたわけではなく新たなオブジェクトが作成されています。 このように、異なるオブジェクトで囲まれた領域も塗ることができます

では、元に戻しましょう。 画面上部のプルダウンメニューの"編集(E)" -> "元に戻す(U)"を実行します(またはキーボードのCTRL+Zを押します)。

17. 元に戻る
17. 元に戻る

上図のように元に戻ります。

では次にストロークの部分を塗ってみましょう

18. ストローク部分をクリック
18. ストローク部分をクリック

上図のようにストローク部分をマウスの左ボタン(マウスの左ボタン)でクリックします。

19. ストロークが赤色で塗られる
19. ストロークが赤色で塗られる

上図のようにストロークが赤色で塗られます。 このように、ストローク部分も塗ることができます。 なお、作成された図形の赤色の部分はフィルであり、ストロークは持っていません

では、元に戻しましょう。 画面上部のプルダウンメニューの"編集(E)" -> "元に戻す(U)"を実行します(またはキーボードのCTRL+Zを押します)。

20. 元に戻る
20. 元に戻る

上図のように元に戻ります。

では続いて、複数の領域をまとめて塗る方法を説明しますALTキーを押しながら塗りつぶしたい領域を全て通過するようにマウスの左ボタン(マウスの左ボタン)でドラッグします。

21. 塗りつぶしたい領域を全て通過するようにドラッグ
21. 塗りつぶしたい領域を全て通過するようにドラッグ

上図のように塗りつぶしたい領域を全て通過するようにドラッグします。 赤色の矢印はドラッグの動きを表しています。

22. 3つの領域が赤色で塗られる
22. 3つの領域が赤色で塗られる

上図のように3つの領域が赤色で塗られます。 このようにALTキーを押しながらマウスの左ボタン(マウスの左ボタン)でドラッグすることで、複数の領域をまとめて塗ることができます

なお、マウスが通過したにも関わらずストローク部分が塗られていないのは、ドラッグ開始位置の色と異なるためです。 ドラッグ開始位置が透明色だったため、黒色であるストロークは塗りの対象とはなりませんでした

次の記事へ

長くなってきましたので、一区切りします。 続きは次の記事を参照ください

  
  

まとめ

塗りつぶしツールを使って、同色の連続を塗りつぶすことができます。 ただし、本当にフィル/ストロークを塗るわけではなく、同色の連続領域と同じ形状のパスを新たに生成します。 なお、ページの境界を超えて判別されるため、囲まれていない領域を塗ろうとするとエラーとなります。

塗りつぶしでは、異なるオブジェクトで囲まれた領域を塗ることも、ストロークを塗ることも、フィルとストロークをまたいで塗ることもできます。 また、ALTキーを押しながら操作することで、複数の領域をまとめて塗ることもできます。

操作/コマンド 説明
[塗りつぶしツール]ボタン
(または)
U
(または)
SHIFT+F7キー
塗りつぶしツールを選択する
(塗りつぶしツール選択中)
マウスの左ボタン(マウスの左ボタン)のクリック
クリックした地点からクリック地点と同色が連続する領域を求めてその形状のパスを生成する
※カレントスタイルのフィル/ストロークが設定される
(塗りつぶしツール選択中)
ALT+マウスの左ボタン(マウスの左ボタン)のドラッグ
ドラッグした範囲からドラッグ開始地点と同色が連続する領域を求めてその形状のパスを生成する
※カレントスタイルのフィル/ストロークが設定される

同色かどうかの判定はキャンバス上に表示されている画像で行われるため、表示倍率が低いと隙間ができやすくなります。 表示倍率を上げるか、ツールコントロールの拡縮量で領域を太らせて隙間を防ぎましょう。

パラメータ 意味
拡縮量 生成するオブジェクトを広げる/狭める
メニュー