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

その97。

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

今回試すサンプルは「図形(上級)」の「DataURL Scheme に変換した描画情報を画像として保存しよう(png)」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
白い背景上に何か書き込み下の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() {
canvas.saveAsImage();
});

});

以前勉強したその95のペイントツールとその96のDataURL Schemeを合わせた合体応用編です。
といっても面倒なことはtmlib.jsが行なってくれますので簡単です。
今回も要素毎に解説してみます。

要素1 「見出し」

その96でもありましたが改めて、処理に直接影響はないです。
HTML側で「 h1 」タグを使ってあるので大見出しということですね。
文字を変更したい場合はHTML側で変更が可能です。

要素2 「ペイントツール」

その95で勉強した簡単なペイントツールです。
詳細は確認して頂くとして省略します。

要素3 「Clearボタン」

ここからが前回と違う点です。
HTML側で生成されているID名に「 clear 」と付いている「 clearボタン 」が押されたら画面上に描画されたものを消去するためのボタンですね。
ですがこの記述はどこかで見たことありませんか?
どのサンプルでもおまじないとして画面初期化の時に登場するアイツです。
このサンプルでも17行目にいますよ。

要素4 「Saveボタン」

メインディッシュの登場です。
ID名に「 save 」と付いている「 Saveボタン 」が押されたら現在のcanvas上ものを画像として保存します。
何も書いていなくても保存されます。
メソッド自体は「 canvas.saveAsImage(); 」と1行で終わりです。
canvas 」に対して「 saveAsImage() 」直訳で「 画像として保存 」しなさい。という指示を出しているだけです。
引数に指定がないので、tmlib.js ではデフォルトの拡張子として「 png 」となるように処理を行なってくれて保存されます。
jpgや他の拡張子で保存する方法はサンプルがわけてありますのでまた次回ということになります。


「tmlib.js 怒濤の 100 サンプル!!」を試す その97」への1件のフィードバック

コメントを残す

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