Zenn
Open18

自作のベクターグラフィックスドローイングツールの使い方をまとめてみる

C#
WPF
dhq_boilerdhq_boiler

Adobe Illustratorのような高機能なベクターグラフィックスドローイングツールに憧れて、いつしか自分の手で自作していました。
名をboiler's Graphics（ボイラーズ グラフィクス）と言います。

このスクラップでは、boiler's Graphicsを皆さんに手に取っていただきたく、その使い方をまとめてみようと思います。

dhq_boilerdhq_boiler

boiler's Graphics

boiler's Graphicsは、様々な素材となる画像を貼り、それを矩形や円形で加工したり、線を描画したりして飾るといった使い方が主流になるのかなと思っています。もちろん、画像処理のオプションも増やしていきたいと考えているので、自由度は高くなりそうですね。

boiler's Graphics の使い方を学んでいくに際して、一番の近道となるのが、一般的なPhotoshopやIllustratorと同じように、左側のツールバーに並んでいるツールを使いこなすことだと思います。
１つ１つ紹介していきます。

dhq_boilerdhq_boiler

直線ツール

  1. 画面左側のツールから直線ツールを選択します。
  2. キャンパス上でドラッグして直線を描画します。

draw_straight_line

dhq_boilerdhq_boiler

四角形ツール

  1. 画面左側のツールから四角形ツールを選択します。
  2. キャンパス上でドラッグして四角形を描画します。

draw_rectangle

dhq_boilerdhq_boiler

円ツール

  1. 画面左側のツールから円ツールを選択します。
  2. キャンパス上でドラッグして円を描画します。
  3. Shift押しながらドラッグすると幅と高さが等しい円が描けます。
  4. Alt押しながらドラッグすると、マウスダウンした点を中心にした円が描けます。

draw_ellipse

dhq_boilerdhq_boiler

多角形ツール

  1. 画面左側のツールから多角形ツールを選択します。
  2. 多角形ウィンドウが表示されます。ここでは、多角形を構成する頂点の情報を入力します。頂点の情報は角度（度）と半径です。頂点の情報は追加ボタンを押下することで、追加できます。必要のない頂点の情報は削除ボタンで削除することができます。
  3. 多角形を構成する頂点の情報を入力したら、始点Xと始点Yを入力します。
  4. 描画ボタンを押下します。
  5. キャンパス上でドラッグして多角形を描画します。

draw_polygon

dhq_boilerdhq_boiler

ベジエ曲線ツール

  1. 画面左側のツールからベジエ曲線ツールを選択します。
  2. キャンパス上でドラッグしてベジエ曲線を描画します。
  3. ベジエ曲線を描画すると、制御点１と制御点２が現れます。これらをドラッグしてベジエ曲線の制御点の位置を調節します。

draw_bezier

dhq_boilerdhq_boiler

画像ツール

  1. 画面左側のツールから画像ツールを選択します。
  2. ファイルダイアログが開きます。描画したい画像ファイルを選択します。
  3. キャンパス上でドラッグして画像を描画します。
  4. Shift押しながらドラッグすると画像のアスペクト比を維持したまま描画できます。

draw_picture

dhq_boilerdhq_boiler

文字ツール

  1. 画面左側のツールから文字ツールを選択します。
  2. キャンパス上でドラッグして描画範囲を決定します。
  3. 画面左側のツールから選択ツールを選択します。
  4. 2で決定した描画範囲をクリックして選択します。
  5. レタリングダイアログが開きます。ここでは描画する文字列、フォント、太字か、イタリックか、フォントサイズ、自動改行するかを指定します。
  6. 例えば、文字列：boiler's Graphics、フォント：メイリオ、太字：チェックしない、イタリック：チェックしない、フォントサイズ：30、自動改行：チェックしないの場合は下記GIFアニメのようになります。

draw_letter

dhq_boilerdhq_boiler

縦書きツール

  1. 画面左側のツールから縦書きツールを選択します。
  2. キャンパス上でドラッグして描画範囲を決定します。
  3. 画面左側のツールから選択ツールを選択します。
  4. 2で決定した描画範囲をクリックして選択します。
  5. レタリングダイアログが開きます。ここでは描画する文字列、フォント、太字か、イタリックか、フォントサイズ、自動改行するかを指定します。
  6. 例えば、文字列：ボイラーズグラフィックス、フォント：メイリオ、太字：チェックしない、イタリック：チェックしない、フォントサイズ：30、自動改行：チェックするの場合は下記GIFアニメのようになります。

draw_letter_vertical

dhq_boilerdhq_boiler

スナップポイントツール

  1. 画面左側のツールからスナップポイントツールを選択します。
  2. キャンパス上で任意の点をクリックしてスナップポイントを追加します。
  3. 画面右側のレイヤーウィンドウで追加されたアイテム（スナップポイント）を右クリックし、スナップポイントを移動を選択します。
  4. スナップポイントの移動先の点の座標を入力します。
  5. スナップポイントを移動したら、そのスナップポイントを使って図形を描画します。

draw_with_snappoint

dhq_boilerdhq_boiler

グループ化

  1. 画面左側のツールから選択ツールを選択します。
  2. グループ化したい、キャンパス上の任意の図形をクリックします。複数の図形を選択状態にするにはShiftキーを押しながらクリックします。
  3. 画面上部のツールバーからグループ化をクリックします。

グループ化解除

  1. グループ化解除したいキャンパス上の図形を選択します。
  2. 画面上部のツールバーからグループ化解除をクリックします。

grouping_ungrouping