Toggle

ウェブ

Creativeでのベジェ曲線の描き方まとめ

small_4134503728
photo credit: Dave DeSandro via photopin cc

今回は、先日のYahoo Creative Award 2013で作品を作成した際に使用したCreativeJSでのベジェ曲線の書き方にについて、備忘録としてまとめておく。

1. IllustratorかPhotoshopでベジェ曲線を描いてみる

IllustratorやPhotoshopで、ペンツールを利用して思い描く曲線を書いてみる。例えば、下図のようなS字の線を書いたとする。 ベジェ曲線は、始点ベクトルと終点ベクトルで表される(と勝手に思っている)。緑色の矢印がそれぞれのベクトルを表す。 skitch.1

作成したベジェ曲線のポイントにカーソルを合わせ、座標情報を取得する。 skitch.2

全てのポイントを座標で表すと、おおよそ下図のようになる。

skitch

2. Canvasを用意する

下記のように、canvas要素を用意し、画面が読み込まれた時にそこにベジェ曲線を作るようにする。

3. コードを書く

コード全体。大まかな流れとしては、 + canvas要素を用意 + CreateJSを読み込む(今回使用しているのは、その内EaselJSのライブラリのみ) + stageを作成 + myShapeインスタンスを作成 + インスタンス配置位置を決定 + ベジェ曲線を作成 + stageをアップデート

4. できました!

105, 95 をスタート地点として、canvas要素内にベジェ曲線が描かれます。 (分かりやすいように、PixelWindowでピクセル定規を表示しています)

スクリーンショット 2013-08-23 1.28.03

URL
TBURL

LEAVE A REPLY

*
*
* (公開されません)

Return Top