Titaniumの標準APIのみで画像を正方形に切り抜いて表示する方法

前から作りたかったクラフトビール好きな人のためのiPhoneアプリを作り始めたこともあり、Titaniumの標準APIのみで割りと今風なUIを実現できないか日々模索してます。

Instagramやミイルのようなアプリで写真が正方形にレイアウトされているかと思いますが、こういうのをTitaniumの標準API のみで実現できないか関連しそうな情報を探していたらAppceleratorのQ&AにCrop imageViewという情報を見つけました

上記記事にソースコード書かれてるのですが、元画像と実際に切り抜き結果のキャプチャを比較しながらのほうがより理解できると思うので、簡単にまとめておきます

ビール系の写真が見つからないので、ひとまずこれを素材画像としました。

f:id:h5y1m141:20130416073540j:plain

どうでもいいけど↑これブラザーズ人形町店というお店で食べたハンバーガーで凄い美味かった

切り抜き処理のポイント

以下がソースコード全体なのですが、ポイントは以下３つです

pictImage:切り抜き対象の画像を指定
cropView:実際に切り抜いた時の枠の大きさをここで指定。以下だと300x300で切り抜く
pictImage.leftとpictImage.top:画像を枠にどのように表示するかこの数字にて調整

app.coffee

pictImage = Ti.UI.createImageView
  image: "ui/image/food.jpg"
  left:0
  top:0
  width:480
  height:720
  
cropView = Titanium.UI.createView
  width:300
  height:300
  
cropView.add pictImage
pictImage.left = -50
pictImage.top = -150

croppedImage = cropView.toImage()

imageView = Titanium.UI.createImageView
  image:croppedImage
  top:10
  left:10
  borderWidth:1
  borderColor:"#fff"

pictWindow = Ti.UI.createWindow()
pictWindow.add imageView
pictWindow.open()

切り抜き対象の画像サイズを480x720にした場合と、640x960とではこのような違いがでます

480x720の場合	640x960の場合

この辺りは実際に切り抜かれた結果をみながら微調整することで、ハンバーガーの美味しさが際立つ写真になりますねｗｗ

おまけ：blob.imageAsCropped()というのもあるみたいだけど

Titanium SDK 3.0.2から音声や画像などのバイナリデータを格納するBLOB（Binary Large OBject）のAPIにimageAsCropped()というメソッドが加わったようですが、自分の理解がまちがってるのか

pictImage = Ti.UI.createImageView
  image: "http://craftbeer-tokyo.info/wp/wp-content/uploads/2013/03/IMG_4208_2.jpg"
  width:320
  height:420
  left:0
  top:0
  
blob = pictImage.toBlob()
blob.imageAsCropped
  height:200
  width:200
  x:-100
  y:-100

imageView = Titanium.UI.createImageView
  image:blog
  top:2
  left:5