CreateJS でベクターシェイプを描写するためには Graphics クラスのメソッドを使って書いていきます。
単純な図形なら問題ないのですが、 複雑なパスを書くとなるとちょっと面倒ですね。
Toolkit for CreateJS を使ってFlashで書いて出力する方法もあるのですが、 今回は Illustrator を使って出力する方法を紹介します。
Drawscript
Drawscript は Illustrator のプラグインです。
Illustrator で書いたベクターシェイプを、選択した形式で扱えるコードに変換してくれます。
BETA4 の段階では、
- Objective-C
- C++
- Canvas(JavaScript)
- CreateJS(EaselJS)
- Processing
- ActionScript 3
- JSON
- RAW BEZIER POINTS
に対応しているようです。
今回は CreateJS 用のコードに変換してみることにします。
上記URLの Download Drawscript のボタンを押して、 メールアドレスを入力するとダウンロードできます。
ダウンロードしてきた zxp ファイルを Adobe Extension Manager を使ってインストールします。
Illustrator のウィンドウ → エクステンション の中に Drawscript という項目が追加されていれば成功です。
チェックを入れて有効にすると Drawscript のパネルが表示されます。
左上のセレクトボックスから吐き出したいコードの形式を選びます。
オブジェクトを選択(複数も可能)して、 右側の Generate を押すと下のテキストボックスにコードが吐き出されます。
後は Copy ボタンを押して、ソースコードの利用したい箇所にペーストすれば完了です。
Live のチェックボタンを有効にする事で、選択しているシェイプに変更があった際に即座にコードが反映されるようにすることもできます。
注意
- キャンバス上の位置も反映されてしまうので、0,0の位置に配置したい場合はオブジェクトを左端に持っていく必要がある。
- グループ化されたものや複合パスのコードは吐き出せないようなので、 複合パスやグループ化を解除する必要がある。
DEMO
先ほど書いた葉っぱとてんとう虫のコードを EaselJS で表示されるようにしたものです。
葉っぱをクリックしてみてください。
何倍にも拡大されましたが、画像が荒れることはなく、 てんとう虫の背中の色も Illustrator で書いた時とは違う色に次々と変化しています。
Canvas上でベクターシェイプとして扱っているためこのように、後から塗り色を変更することも可能だという訳です。
ちょっとした絵や図をさくっとコードに反映させたい時は使えるかもしれないですね。
