その98。

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

今回試すサンプルは「図形(上級)」の「DataURL Scheme に変換した描画情報を画像として保存しよう(svg)」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
白い背景上に何か書き込み下のSAVEボタンをクリックすると別ウインドウもしくはタブで表示されたと思います。

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

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();
});

// ボタンに処理を登録
tm.dom.Element("#clear").event.click(function() {
canvas.clearColor("white");
});
tm.dom.Element("#save").event.click(function(tm.graphics.Canvas.MIME_TYPE_SVG) {
canvas.saveAsImage();
});

});

その97勉強した内容とほとんど同じなのですが、50行目に引数として
「 tm.graphics.Canvas.MIME_TYPE_SVG 」と指定します。
ちょっと長いですので3つに分解して説明します。

分解1　「tm.graphics.Canvas」

単純にわかりやすく表現すると以下のようになります。
「 graphicsクラスのCanvasを利用する 」
後ろにまだ続くので文章のように言い切った形ではありませんが、イメージしやすいかと思います。
さらに言うならばプログラムには初めから設定されている命令群がたくさんありその中の「 graphics 」というカテゴリにある「 canvas 」を使うということになります。
※イメージしやすい表現を使っていますので正確な意味を示していないこともありますのでご了承くださいませ。

分解2　「.MIME_TYPE」

HTMLを勉強し始めた頃の癖で未だに「 ミメ タイプ 」と咄嗟に読んでしまいます。
正確な読みは「 マイム タイプ 」です。
「 MIME TYPE 」を単独で分解1と同じように表現するならば「 カテゴリ 」を示すとイメージしてください。
たとえば前回出てきた「 PNG 」という拡張子は「 IMAGE (画像) 」のカテゴリ(MIME TYPE)に含まれます。
「 GIF 」という拡張子も画像の拡張子ですので「 IMAGE 」のカテゴリといった感じです。
ちなみに「 HTML 」の拡張子は「 TEXT 」に分けられます。
HTML5ではこのMIME_TYPEも含めて拡張子を指定しないといけないのですが、そこはtmlib.js が補完してくれるので難しく考える必要はありません。
おまじないだと思ってこのまま記述してください。

分解3　「_SVG」

分解1と2は意味がわかるよう説明してみましたが、変更する部分はありません。
最後の拡張子を指定する部分だけ変えればOKです。
ですがこの「 SVG 」という拡張子は聞き慣れない方も多いかと思います。
Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略でwikiを引用すると

”XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである”

とのことです。わかりづらいですね。
「 XML 」とはHTMLの親戚みたいなものでwebで扱いやすい言語だと理解してもらうといいかと思います。
「 ベクターイメージ 」とは拡大、縮小しても画像が荒れないデータ形式のことです。
これらの特性を取り込んだ拡張子が「 SVG 」というわけです。

分解して説明してみましたが、結局の所「 tm.graphics.Canvas.MIME_TYPE_SVG 」を1つの単語として覚えていても問題ありません。
ですが何故こうなっているのか？と疑問に思う方もいるかなと思ったので長くはなりましたが書いてみました。

Tweet