カテゴリー別アーカイブ: View

Androidビュー 透過色で塗りつぶす

Androidのビューを透過色で塗りつぶす, 具体的にはお絵描きアプリの消しゴム機能を実装する場合です.

お絵描きアプリの消しゴム機能の実装方法としては, 以下の2つの方法が考えられます.

  • 背景色と同色を利用する
  • PorterDuffXfermodeクラスを利用する

背景色と同色で塗りつぶす実装は簡単ですが, 描いた絵を別のアプリで利用する場合などで問題が生じます.

PorterDuffXfermodeクラスを利用すれば, 透過色で塗りつぶすことができるので, どのアプリで画像を見ても, 消しゴムで消された部分は透過されて表示されます. 実装も以下のようにシンプルです.

import android.graphics.PorterDuffXfermode;
import android.graphics.PorterDuff;

// ....

Paint paint = new Paint();
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
paint.setARGB(0, 0, 0, 0);

Android ListViewのテキストのスタイルを設定する

こんな感じ

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_single_choice, urls) {
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
         TextView view = (TextView)super.getView(position, convertView, parent);

          //テキストのスタイル設定
          view.setTextSize(12);
          // ... etc

         return view;
    }
};

Android Bitmapのデータをbyte配列に格納する

こんな感じ

public class CanvasView extends View {
    //....

     public static byte[] getBitmapAsByteArray(Bitmap bitmap) {
         ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();

         //PNG, クオリティー100としてbyte配列にデータを格納
         bitmap.compress(CompressFormat.PNG, 100, byteArrayOutputStream);

         return byteArrayOutputStream.toByteArray();
     }

     //....
}

Android 透過色で塗りつぶす

Androidのビューで透明色で塗りつぶすには,

paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
paint.setARGB(0, 0, 0, 0);

これは, HTML5 Canvasで, globalCompositeOperationプロパティの設定に相当する.
ただし, 設定は異なるぽい (?)

例えば, HTML5 Canvasで透過色に塗りつぶすには,

var canvas   = document.createElement('canvas');
var context = canvas.getContext('2d');

context.globalCompositeOperation = 'destination-out';

と, ‘destination-out’を設定する.

この辺はもう少し情報を収集していく必要がありそう.

ちなみに, Androidで透過色で塗りつぶした場合, そのデフォルトの背景は黒なので, 一見すると黒で塗りつぶされていると思ってしまう. 透過色で塗りつぶされていることを確認するためには, 背景に市松模様の画像なんかを敷いてあげればいいかな ?.

変形マトリクス

備忘録的に…

元のマトリクス

[1, 0, 0
 0, 1, 0
 0, 0, 1]

移動

[1, 0, tx
 0, 1, ty
 0, 0, 1]

拡大・縮小

[sx, 0, 0
 0, sy, 0
 0, 0, 1]

回転

[cos(rad), sin(rad), 0
 -sin(rad), cos(rad), 0
               0,             0, 1]

傾斜

[           1, tan(zy), 0
 tan(zx),             1, 0
            0,             0, 1]

ActionScript 3.0での解説

この変形マトリクスは, HTML5 Canvas, CSS3 , ActionScript 3.0, Android Canvasと利用する場面が多いので覚えておいて損はないと思います.