HTML5テクニカルノート

EaselJSで連続した座標の軌跡を描く

EaselJSで連続した座標の軌跡を描きたいときがあります(図001)。たとえば、マウスドラッグにしたがって線を引くような場合です。本稿では、とくに滑らかな曲線で軌跡を描くやり方について考えます。

図001■連続した座標を軌跡として描く

01 座標を直線で結ぶ

もっとも簡単なのが、座標を直線で結ぶことです。メソッドとしてはGraphics.lineTo()を用います。マウスポインタの動きにしたがって軌跡を描くといったときでも、フレームレートが高く、座標間の距離や変化が小さければ、滑らかな線に見えます。けれど、変化の大きいジグザグの軌跡では、座標の角が目立ちます(図002)。

図002■ジグザグの座標の軌跡は角が目立つ

02 2次ベジエ曲線で軌跡を描く

Graphics.quadraticCurveTo()またはGraphics.curveTo()メソッドを用いると、2次ベジエ曲線が描描けます(両メソッドは同じ関数を参照しますので、以降はGraphics.quadraticCurveTo()で代表します)。2次ベジエ曲線を描くには、始点と終点(これらを合わせて「アンカーポイント」と呼ぶことにします)のほかに、コントロールポイントを与えなければなりません(FN1306002「EaselJSのGraphicクラスで2次ベジエ曲線を描く」図002参照)。

FN1306002図002■コントロールポイントと両端を結ぶ直線は曲線の接線になる(再掲)

>>jsdo.itシミュレーションサンプル

すると、連続した座標をひとつおきでアンカーポイントとコントロールポイントに振分けることが思いつくでしょう。けれど、ジグザグの軌跡については、滑らかな曲線にはなりません(図003)^[*1]。

図003■2次ベジエ曲線でもジグザグの座標の軌跡には角が生じる

03 座標はコントロールポイントとして中点をアンカーポイントに定める

そこで、ひとつ工夫をします。連続した座標は、すべてコントロールポイントにします。そして、座標の中点をアンカーポイントとして結ぶのです(図004)^[*1]。こうすれば、軌跡は滑らかな曲線になります。

図004■座標はコントロールポイントとして中点をアンカーポイントに定めた

気をつけなければならないのは、軌跡の曲線が座標の上を通過しないことです。けれど、座標の変化が小さければ軌跡はそれらの近くをとおり、変化が大きくても滑らかな曲線を描きます^[*2]。jsdo.itにシミュレーションのサンプルコードを掲げました。Canvas上で続けてクリックした座標から軌跡を描きます。

作成者: 野中文雄
作成日: 2013年7月13日