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

その25。

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

今回試すサンプルは「図形-中級(Figure)」の「矢印を描画しよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。

右下がりの矢印が描画されたと思います。

/*
* 定数
*/
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.drawArrow(100, 100, 300, 200);
});

今回勉強するのは16行目です。「 drawArrow() 」で矢印を描画をしています。
基本的には線の描画と同じでパラメータに「 A地点のX座標、A地点のY座標、B地点のX座標、B地点のY座標 」を指定します。
ドキュメントを見ると5番目のパラメータとして「 arrowRadius 」直訳すると「 矢の半径 」が指定できます。
指定なしだとデフォルト値が自動補完されますのでサンプルのよう始点と終点だけでも構いません。
10とか指定するとちょっと大きめな矢印になります。

ちなみにこの矢印は正三角形のようですので、二等辺三角形にしたい場合は線と三角形を組み合わせるといいかと思います。
tmlib.js自体を弄るという方法もありますがオススメしません。


コメントを残す

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