CreateJS実践講座

Shapeオブジェクトをステージの中心に置いて円を描く

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Shapeオブジェクトをステージの中心に置き、オブジェクトの原点から円を描きます。
講師:
04:15

字幕

このレッスンではキャンバスのサイズから その中心を割り出し そこにshapeオブジェクトを置いた上で shapeオブジェクトの原点から円を描きます 今Dreamweaverで開いている HTMLドキュメントも キャンバス あるいはCreateJSの言い方ですと ステージと言っていいんですけれども ステージの真ん中に青い円を描いています ただしその真ん中というのは 特にキャンバスのサイズを調べたわけではなく キャンバスに240と180という数字を決めたので その半分の数字を決め打ちしています またシェイプの座標も 特に動かしていませんので デフォルトでは左上隅にあることになります 結果は同じなんですけれども この構成を変えようという事です 一応 現在の状況を確認しておきましょう ファイルメニューから 「ブラウザーでプレビュー」です 確かにステージの中心に 青い円が描かれていますけれども Shapeは左上隅にあり円を描く位置を 調整して青い円を描いたという事になります 別にこれでもいいのではないか 何が都合が悪いのかと思われるかもしれません CreateJSではアニメーションを行います そういった時 今の書き方ですと この円を動かそうとしたら中心座標を変える その前に円を消します 消して中心座標を変えて描き直すという事を 一秒間に何回あるいは何十回と 繰り返さなければいけません そうしたくないです ですから座標は常にシェイプの中心 つまり原点 0,0から行うことにします そうすると当然 円の描かれる位置が 変わってきますね 確認しましょう ファイルを保存して ブラウザーでプレビューします shapeの 0,0を中心に円を描きました そしてshapeのデフォルトの位置は ステージの 0,0 左上隅になりますから こういうことになります では次にどうするかというとshapeの位置を ステージの真ん中に持ってきます shapeの位置 X Y座標というのは shapeのXおよびYというプロパティで 設定することができます ですからこの後に加えまして myShape をコピーで持ってきて そのXということで X座標を変えることができます ステージの真ん中にしたいという事なんですが Canvasからキャンバスの縦横を取り出します ですからこれをコピーして持ってきて キャンバスの幅は .width です その半分にすれば中心ですので 2で割ります ではYについても同様ですので これをコピーしてしまいましょう そしてペーストします Yに変えて 幅でなく高さですから height ということになりますね ではこれで確認したいと思います ファイルを保存して ブラウザーでプレビューです 始めと結果は変わりませんけれども 今度はshapeがステージの真ん中に置かれ 円はshapeの原点 0,0 を中心に 円を描いたという事です そうするとアニメーションなどで扱いたい時は shapeのX Y座標を変えさえすれば良くて 円を描き直す必要がありません このレッスンではshapeに描く円は あくまでshapeの原点 0,0を 中心に書きました そしてステージの真ん中に持ってくるためには shapeのX Y座標を キャンバスのサイズを調べて その半分という事で中心を求めて shapeを真ん中に置き 真ん中を中心とした円を描いたという事です

CreateJS実践講座

CreateJSは、これまでFlashでしかできなかったようなインタラクティブなコンテンツや多彩なアニメーションを作ることができるJavaScriptライブラリです。このコースではチャプターごとにJavaScriptコードのサンプルをひとつずつとりあげながら、その制作方法を一歩一歩段階的に解説します。

3時間26分 (37 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年07月07日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。