, 2014年2月3日

SVGでは四角形や円などが手軽に描けますが、複雑な図形を描く方法としてpathがあります。今回はそのpathを使って曲線を描く方法を解説したいと思います。

pathの基本

まずはpathの基本です。
pathには以下のようなコマンドが含まれており、これらを組み合わせることによって複雑な図形を描きます。

  • M,m – 始点を決める
  • L,l – 直線を引く
  • H,h – 水平線を引く
  • V,v – 垂直線を引く
  • Q,q – 二次ベジェ曲線
  • C,c – 三次ベジェ曲線
  • A,a – 円弧
  • Z,z – 線を閉じる

大文字は絶対座標、小文字は相対座標を表します。
具体例には、このような形式で書いていきます。

<path d="M50,50 l100,100 h200 v200" stroke="black" fill="none"></path>

d属性の中に処理を書いていきます。
この指定を日本語で表すと、

  • 絶対座標で50,50の位置からスタート
  • そこから右に100、下に100の位置まで線を引く
  • さらに200の水平線
  • さらに200の垂直線

となり、このような線が引けます。
dの部分は、下のように書くと見やすいです。

<path stroke="black" fill="none" d="
M50,50
l100,100
h200
v200
"></path>

直線は簡単なので、いよいよ曲線に挑戦しましょう!

二次ベジェ曲線

ベジェ曲線とは、フランスの工学者ピエール・ベジェさんが考えた、曲線を描く方法です。
ベジェ曲線についてはここを見るとすごく良く分かる。

二次ベジェ曲線ではQコマンドを使い、1つの制御点と終点を指定します。

<path stroke="black" fill="none" d="
M 0,0
Q 100,300 200,200
"></path>

100,300が制御点、200,200が終点になります。
サンプルを用意したので、確認して見てみて下さい。
二次ベジェ曲線のサンプル

青丸が制御点の位置になります。
制御点で引っ張られている様子、分かります?

三次ベジェ曲線

三次のベジェ曲線では、制御点が2つになります。
Cコマンドを使い、始点の制御点、終点の制御点、終点の順に指定します。

<path stroke="black" fill="none" d="
M 0,0
C 250,100 100,300 300,300
"></path>

250,100が始点の制御点、100,300が終点の制御点、300,300が終点になります。
サンプルはこちらです。三次ベジェ曲線のサンプル

2本の制御点によって引っ張られている様子が分かると思います。

円弧

少し特殊な曲線に円弧があります。
Aコマンドを用いますが、指定するパラメータが多いため大変です。

<path stroke="black" fill="none" d="
M 0,0
A 200,200 0 0 0 200,200
"></path>

パラメータは5つあります。左から順に

  • 円弧の半径dx,dy
  • 円弧の回転
  • 大きく回るか小さく回るか(0,1)
  • 右を回るか左を回るか(0,1)
  • 終点x,y

円弧を描く方針として、まず円弧の半径と終点を決めてしまいます。
この時、無茶な半径を指定すると描画されないので注意!

「位置0,0から位置1000,1000まで半径10の円弧で描いてね☆(ゝω・)vキャピ」とか指定しても、そりゃ無理ですわって話です。

あとは真ん中の3つのパラメータを適当に弄って、良い感じにするという力技。
詳しい話はこちらの円弧の解説に載ってるので丸投げします。

円弧のサンプルも置いておくので、フラグを変化させて動作を確認して下さい。
自分でいじると原理が良く分かります。

まとめ

あんまり極めてなくてタイトル詐欺っぽいですが、以上です。

最後に、pathを極めるのに役立つサイトの一覧を載せておきます。

CATEGORIES