【Raphael.js】自由な形を描く方法

path関数

rect関数やellipse関数は丸や四角などの決まりきった形しか描画できませんでした。三角形など自由な形で図形を描画する時はpath関数を使用します。自由な形を描くのに、SVGの記法に則った文字を打ち込む必要がありますが、これはあまり覚える必要はありません。専用のエディタがいくつもあるからです。ここでは「こういうこともできる」という事だけフムフムしましょう！

実行結果

再生ボタンで実行結果を見れます。何の面白味もない結果です。

解説

ここでは三本の線を描いています。2本が直線で、1本が曲線です。引数にMやLといった文字が紛れてますね。その意味を少しだけ説明します。

paper.path("M100,200 L100,100");

これは、(x, y) = (100, 200) 地点から (x, y) = (100, 100) 地点までの直線を引けという命令になります。Mは”この位置から線を描く”という目印。Lは”ここまで直線を引け”という命令です。

paper.path("M100,200 C100,100 250,100 250,150");

Cは更に複雑で、(x, y) = (100, 200) 地点から (x, y) = (100, 100) 地点まで引いた直線と、(x, y) = (250, 150) 地点から (x, y) = (250, 100) 地点まで引いた2本の直線を接線とした”カーブを描け”という命令です。ここでいう接線を可視化する為に、2本の直線を描いてます。ちなみにSの場合は線と点とでカーブを形成します。最後にZを付ければパスが閉じ、面としてのデータとなりますが、今回はつけてません。

以上、ざっくり説明しましたが、この記法を理解したとしても、そう簡単に理想としたラインをそう簡単に作れるでしょうか？当然ながら答えはノーです。目隠しして絵を描く時のような心地よいイライラ感を提供してくれることでしょう。カタカタとキーボードを叩いて作れるパスは恐らく、三角形や多角形などの簡単な図形くらいではないでしょうか。それ以外の複雑な図形は遠慮なくillustratorなどのSVGに対応した便利なソフトを使いましょう！！

Paper.path( pathstring );

• Paper: Raphael関数で指定した描画エリア
• pathstring: いちいちめんどくさいパス文字列