Ti.UI.imageViewで読み込んだ画像を指定サイズにフィットさせる方法
/
TitaniumでTi.UI.imageViewをつかって以下のように画像の読み込みを行う場合、
var imageView = Ti.UI.createImageView({
width: 320,
height: 160,
image: "image.png",
hires: true
});
width: 320,
height: 160,
image: "image.png",
hires: true
});
読み込む画像のサイズ(あるいはアスペクト比)がimageViewと異なる場合、imageViewは画像全体を収めようとしてアスペクト比を保ったまま画像のスケールを行う。そのため、画像の上下や左右に余白が生じる。
しかし指定サイズにフィットさせたい場合もあるが、なぜかそれを実現するプロパティやメソッドの類が用意されていない(SDK 2.1.3, iOS)。
imageViewで行わず単にviewの背景画像として指定すればそれも可能ではあるのですが、この場合にはimageViewが持つ特性である画像の遅延読み込みを利用できない。こんなシンプルな話なのになぜ出来ないのだろう。。
結局のところ、これを実現するには画像の読み込み後、blobで処理をする。
imageView.addEventListener('load', function(e) {
var is_retina = (Ti.Platform.displayCaps.dpi == 320) ? true : false;
var _w = imageView.width; _w = (is_retina) ? _w * 2 : _w;
var _h = imageView.height; _h = (is_retina) ? _h * 2 : _h;
var blob = e.source.toBlob();
var newImage = blob.imageAsResized(_w, _h);
e.source.image = newImage;
is_retina = null; _w = null; _h = null; blob = null; newImage = null;
});
var is_retina = (Ti.Platform.displayCaps.dpi == 320) ? true : false;
var _w = imageView.width; _w = (is_retina) ? _w * 2 : _w;
var _h = imageView.height; _h = (is_retina) ? _h * 2 : _h;
var blob = e.source.toBlob();
var newImage = blob.imageAsResized(_w, _h);
e.source.image = newImage;
is_retina = null; _w = null; _h = null; blob = null; newImage = null;
});
blobを使えばこれ以外にも画像を正方形でcropするなどの処理も出来て便利。ただしやってみたことはないですが、大量の枚数の処理には負荷が高くて向かないはずです。