その74。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「変形」の「変形した変換マトリックスをリセットしよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
赤い円が画面中央に、左上に1/4円が描画されたと思います。
/*
* 定数
*/
var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT= 465;
tm.main(function() {
// canvas インスタンス生成
var canvas = tm.graphics.Canvas("#world");
// 幅, 高さを指定
canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
// 画面にフィットさせる
canvas.fitWindow();
// 円を描画
canvas.fillStyle = "red";
canvas.setTransformCenter();
canvas.fillCircle(0, 0, 100);
// 変換マトリックスをリセット
canvas.resetTransform();
canvas.fillCircle(0, 0, 100);
};
今回勉強するのは21行目になりますが順を追って説明します。
16行目
描画する図形の色を「 赤 」と指示しています。
17行目
その73で勉強した図形等を画面中央に整列させるメソッドでしたね。
以降描画されるものは画面中央に描画されるということになります。
18行目
塗りつぶしの円が半径100でXとYの座標0の位置に描画されるよう指示しています。
ですが、16行目で色は赤に17行目で描画位置は中央に指示していますのでその設定を受けて描画されます。
21行目
今回の肝はここですね。
setTransformCenter()で画面中央に指示していたものをリセットしています。
ある疑問が浮かびます。20行目にある変換マトリックスとは何なのかと。
事細かく説明すると難しくなりすぎるので簡単に要約すると、移動( translate() )、回転( rotate() )、伸縮( scale() )を1つのデータにまとめて管理しているものだと思って下さい。
超こじつけですが、映画のマトリックスでは複数の人間を1つの仮想現実で管理していましたよね？
あんなイメージです。全く関係ないわけでもないですし、あくまで理解してもらうためのイメージということで。
詳しく知りたい方はtransform() メソッド、 HTML5 Canvasの変換マトリックスについて解説してみる をご覧ください。
映画のマトリックスについてはwikiをどうぞ。
22行目
この行では2個目の円を描画しています。
21行目で中央に整列する指示はリセットされていますので円描画の際に指示した座標(XとY共に0)に描画されることになります。
リセットしたのは位置に関することだけですので色はそのまま赤で描画されることになります。
tmlib.js を使えるようになるための解説ですので関連することは浅く解説するようにしています。
完全に理解出来ているわけではないので説明できないとも言えますが・・・
その当たりはご了承くださいませ！
