「tmlib.js 怒濤の 100 サンプル!!」を試す その95

その95。

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編

今回試すサンプルは「図形(上級)」の「簡単なペイントツールを作ってみよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
白い背景にクリックしながらマウスを動かすと自由な線が描画されたと思います。

/*
* 定数
*/
var SCREEN_WIDTH = 300;
var SCREEN_HEIGHT= 300;

tm.main(function() {
// canvas インスタンス生成
var canvas = tm.graphics.Canvas("#world");
// element インスタンス生成
var element = tm.dom.Element("#world");

// 幅, 高さを指定
canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);

// 背景を白でクリア
canvas.clearColor("white");

// ライン幅指定
canvas.setLineStyle(8, "round", "round", 10);

// ポインタ位置
var pointX = null, pointY = null;

// タッチ開始
element.event.pointstart(function(e) {
pointX = e.pointX;
pointY = e.pointY;
});
// タッチ移動
element.event.pointmove(function(e) {
if (pointX == null || pointY == null) return ;

canvas.drawLine(pointX, pointY, e.pointX, e.pointY);
pointX = e.pointX;
pointY = e.pointY;
e.stop();
});
// タッチ終了
element.event.pointend(function(e) {
pointX = null;
pointY = null;
e.stop();
});

});

このサンプルは入門用としてよく出来てるなぁと思います。
構造がシンプルなので理解しやすく、発展させやすいのでついつい追加機能を付けたくなりますね。
では本編へ

11行目

今までになかった行が追加されています。
処理内容としては10行目と同じですが意味がちょっと違います。
噛み砕いて言うならば10行目の「 canvas 」は絵や文字を書いたりできるホワイトボードです。
この行の「 element 」はホワイトボードに貼り付ける様々な形をしたマグネットという感じです。
ですので貼り付けることもできるし取ることもできます。
(例えば少しズレているような気がしますが意味が伝わればいいかな)

20行目

描画する線のスタイルを決めています。
詳細はその63を読んでもらうとしてパラメータは順番に「 線幅、先端、接続スタイル、マイター限界値 」となります。

23行目

コメントで「 ポインタ位置 」とある通リ、ポインタの位置情報扱うための変数を用意して初期化しています。
ちなみに「 null 」はデータが何も入っていない状態を表す用語です。

26~29行目

26~29行目は「 element 」が「 pointstart 」というイベントが発生した時に処理されます。
この「 pointstart 」はクリックしたままの状態の時に発生します。
処理内容としては上記のイベントが発生した時のマウスポインタの座標を取得し23行目で用意した変数にXとY座標をそれぞれ格納しています。

31~38行目

31~38行目はクリックしたままでマウスポインタを動かした時に処理されます。
処理内容としては、32行目で「 pointX 」または「 pointY 」が「 null(空っぽ) 」だったら、「 return(終了) 」するように条件定義されています。
return 」は正確に言うならば「 戻り値を返す 」ですが、特に戻り値を使った処理がないのでこのイベントを終了させるためだと思っていいかと思います。
上記の条件が成立しなかったらさらに処理を続けます。

34行目では「 canvas 」に対して「 drawLine 」で直線を引くように指示されています。
drawLine 」についてはその8に詳しく書いています。
パラメータに26~29行目で取得したクリックしたときの座標から、現在のマウスポインタを動かした時にの座標を指定してあるのがポイントですね。
クリックした座標から動かした現在の座標までの差を線で結ぶというわけです。
そして、35~36行目では現在の座標を次回の処理のために「 pointX 」と「 pointY 」に格納しています。
上記の処理まで行って「 e.stop(); 」でこのイベント処理を終了させています。

40~44行目

今までクリックした状態だったのをしていない状態(マウスから指を話した)になったときにこのイベントは発生します。
41~42行目では線の引き始めの座標を格納するのに使っていた変数「 pointX 」と「 pointY 」にまた「 null 」を代入し、空っぽにし初期化しています。
次回クリックされたときにそのまま使えるようにするためですね。
43行目でイベントを終了させます。

冒頭でも言いましたがとてもよく出来ているサンプルですので、描画する色を3色から選べるという新しい機能を追加する場合には、どのタイミングで何の処理を行えばいいか考えると勉強になると思います。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です