その39。

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

今回試すサンプルは「イメージ」の「drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
見きれたtmlib.jsのロゴ画像が描画されたと思います。

/*
* 定数
*/
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();

// 画像を描画
var img = new Image();
img.src = "https://raw.github.com/phi1618/tmlib.js/0.1.3/logo.png";
img.onload = function() {
canvas.drawImage(img, 50, 330, 400, 150, 0, 0, 200, 100);
};

今回勉強するのは19行目です。

19行目

これも基本的にはその37で勉強した「 drawImage() 」なんですが、
応用編な感じでちょっとややこしいです。
パラメータから見てみましょう。
「 drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 」となっています。
追加された分は「 sx 」「 sy 」「 sw 」「 sh 」です。

色々考えたのですが、わかりやすくするために前回とはちょっと表現を変えて説明します。
切り取られる画像と切り取った画像を別々に扱うと思って下さい。
切り取られる画像とは読み込んだ画像ということです。
まず切り取られる画像を加工します。

1. どこから切り始めるのかを決めるの。
2. 横幅、縦幅を決める。

1ですが、切り始めの位置を決めるのですが「 sx 」でX座標「 sy 」でY座標です。
2で切り取られる画像の縦横幅を決めます。
その38で勉強した拡大縮小の要領です。ただし、元の画像の大きく指定することはできません。
そこが違う所ですね。

次に切り取った取った画像を加工します。

1. どこから描画するのか。
2. 切り取った画像の横幅、縦幅を決める。

1は切り取った画像の描画開始位置を決めます。
「 dx 」でX座標「 dy 」でY座標です。
2では切り取った画像の縦横幅を決めます。
切り取った画像では元々の画像の比率は関係なく「 sw 」「 sh 」で切り取ったものを1:1と認識しますので縦長に切り取ったものをさらに縦長に表示するということもできます。

今までの説明でサンプルを表現するならば言葉は前後しますが

「元の画像を横幅400、縦幅150に変形して画像のX座標50、Y座標330の位置から切り取りを開始しcanvasのX座標0、Y座標0の位置に横幅200縦幅100に変形させたものを描画する」

と言った感じでしょうか。
正直言葉で表現するのが難しいです…
図表もやってみましたがちょっと上手くいかなかったです。
まぁその37、その38では上手く使えるようになって物足りなくなったらでいいかな？と思ってたり。
こんな物もあったなぁと頭の隅でも置いておけばいいかと。
よく使うものから覚えるのが手っ取り早いですしね。

Tweet