当然ではありますが、ブラウザが画像をロードし終わらないと、JavaScript でサイズを知る事ができません。EASELJS の createjs.Bitmap の引数は、文字列の URL では無く Image オブジェクトを使用しています。 画像サイズが解ったら、そのサイズを使って計算し、scaleX と scaleY で縮小します。 トリミングは createjs.Rectangle で四角形を作成して、Bitmap の sourceRect プロパティに設定します。表示位置は、x プロパティと y プロパティで Stage の中の位置を設定します。 画像を角丸にする為、Shape オブジェクトで画像に合った角丸の形状を作成して、Bitmap の mask プロパティに設定します。
実際の画像 1200x900
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
if ( typeof createjs === 'undefined' ) {
document.write("<"+"script src=\"https://code.createjs.com/easeljs-0.8.2.min.js\"></"+"script>");
}
</script>
<script>
$(function(){
$("#tm_action").on("click", function(){
// トリミング
var rect = new createjs.Rectangle(700, 300, 200, 200);
bitmap.sourceRect = rect;
bitmap.x = 10;
bitmap.y = 10;
stage1.update();
});
$("#mask_action").on("click", function(){
shape.graphics.drawRoundRect(10, 10, 200, 200, 16, 16);
bitmap.mask = shape;
stage1.update();
});
$("#clear_action").on("click", function(){
bitmap.mask = null;
stage1.clear();
});
});
</script>
<input type="button" value="トリミング" id="tm_action">
<input type="button" value="角丸マスク" id="mask_action">
<input type="button" value="クリア" id="clear_action">
<br>
<canvas id="load_area1" width="400" height="220" style='border:1px solid #000000'></canvas><br><canvas id="load_area2" width="400" height="300" style='border:1px solid #000000'></canvas>
<script>
var stage1 = new createjs.Stage("load_area1");
var stage2 = new createjs.Stage("load_area2");
var bitmap,shape;
img = new Image()
img.onload = function() {
// トリミング用 bitmap
bitmap = new createjs.Bitmap(this);
stage1.addChild(bitmap);
// マスク用 shape
shape = new createjs.Shape();
var bitmap_all = new createjs.Bitmap(this);
bitmap_all.scaleX = 400/bitmap_all.image.width;
bitmap_all.scaleY = 300/bitmap_all.image.height;
stage2.addChild(bitmap_all);
stage2.update();
}
img.src = "https://lh3.googleusercontent.com/-A5QW2HTze84/VyNZEIwxh4I/AAAAAAAAeRE/-rCcFQmsKawDMRrV6logONKz0i6LVhtYACCo/s1200/wing_elf.jpg";
</script>
easeljs のロードは、ブログの記事に書き込む事を想定して、そのページで一度きりのロードです。
以前、v57 頃の時に作成した平面の『蝶』の画像を飛翔させるデモです。バージョンがかなり変わって前のままでは動作しなくなったものを少し修正してさらに使いやすくかつ解りやすくしました。『飛翔』そのもののコードは、Three.js 内で今も使われているもので昔から全く変わっていません。この部分は、
※ 凡例をクリックすると、その部分が飛び出ます
※ グラフをクリックすると、データが表示されます。
※ 誰でもすぐ使えます
addColumn を２回していますが、Excel の表を２列作ったのと同じで、タイトルとデータ型を設定して、行を7つ作っています。後は、セルにデータとタイトルをセットしていると思って下さい。
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
