この引数のCanvasクラスは描画するための最小単位のクラスで、こいつでテキストだしたり、画像出したりしてる。android1.0から存在する大先輩クラス
今ではほとんどCanvasを意識せずViewの組み合わせによりUI構築を行うが、結局は各ViewのonDraw()で描写してるだけに過ぎない。ゆえにImageView、TextView、ListViewなどのViewを継承してるクラスのonDraw()をオーバーライドさせてやれば何でも描画できる!
てことでonDraw時のCanvasを制御する方法をまとめる
文字の逆さ表示(TextViewのOverride)やり方はCanvasを回転させて逆さにする。
Canvas# rotate()メソッドに回転方向、回転軸x、yを引数にして回転させる
回転軸は設定しないと、Viewの左上が回転軸になる。Viewの中心で回転させるので、横幅、縦幅の半分が回転軸
/** 逆向き表示TextView */
TextView textView1 = new TextView(this) {
@Override
public void onDraw(Canvas canvas) {
canvas.save();
canvas.rotate(180, getWidth() / 2, getHeight() / 2);
super.onDraw(canvas);
canvas.restore();
}
};
文字の反転(TextViewのOverride)やり方はCanvasの倍率を変更するメソッドで倍率をx軸を-1倍にする。
そうすると、X軸に対し、線対称に表示される
/** 反転表示TextView */
TextView textView4 = new TextView(this) {
@Override
public void onDraw(Canvas canvas) {
canvas.save();
canvas.scale(-1, 1);
canvas.translate(-getWidth(), 0);
super.onDraw(canvas);
canvas.restore();
}
};
影付き文字(TextViewのOverride)影付けるにはCanvasの文字を描写するメソッドを使い、少しずれた位置に表示文字色より、薄い色で文字を描く
/** 影付きTextView */
TextView textView2 = new TextView(this) {
Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
@Override
public void onDraw(Canvas canvas) {
canvas.save();
// 影の部分を先に描いてその上にほんとの文字を描く
// 色の設定。本物の色を取ってきて、RGBに加算して色を足す
p.setColor(getTextColors().getDefaultColor() | 0x00AFAFAF);
// 文字のサイズを合わせる
p.setTextSize(getTextSize());
// 表示文字を合わせる
String text = getText().toString();
// 文字の表示位置調整。文字の高さ、マージンとか計算
FontMetrics fm = p.getFontMetrics();
float size = (fm.descent - fm.ascent);
float margin = (getHeight() - size) / 2;
canvas.drawText(text, 0, margin + getTextSize(), p);
// 表示位置のずれ具合調整。だいたい5とか10くらい
int dx = 5;
canvas.drawText(text, 0 + dx, margin + getTextSize() + dx, p);
canvas.restore();
// 通常描写
super.onDraw(canvas);
}
};
スクロールアニメーション(TextViewのOverride)Handler使って描画時間を調整しつつ、Canvasを平行移動させていくことで文字をずらしていく。
Handlerでスレッド止めたりするのキューたまりすぎないか心配なので、Threadとかで時間管理した方がいい気がする
/** スクロールアニメーションTextView. */
TextView textView3 = new TextView(this) {
Point point = new Point();
Handler handler = new Handler();
Runnable runnable = new Runnable() { public void run() {
// 10m秒このスレッドの時間を止める。その後強制描写メソッドで、onDraw()を呼ぶ
try {Thread.sleep(10);} catch (InterruptedException e) {}
invalidate();}
};
@Override
public void onDraw(Canvas canvas) {
canvas.save();
// 結構ややこしい計算だけど、幅の2倍移動するので、移動式がこんな感じ
canvas.translate(point.x + getWidth(), 0);
super.onDraw(canvas);
canvas.restore();
// 座標を3ずらして表示。表示幅の2倍より大きくなったらリセット
point.x = (point.x -3) % (getWidth() * 2);
handler.post(runnable);
}
};
角度を変えた画像の重ね合わせ(ImageViewのOverride)
| この画像を回転させながら重ね合わせて、扇風機の羽を作る |
/** 重ね合わせImageView. */
ImageView imageView = new ImageView(this) {
@Override
public void onDraw(Canvas canvas) {
canvas.save();
// 回転軸の決定
PointF axis = new PointF(getWidth() / 2, getHeight() / 2);
super.onDraw(canvas);
canvas.rotate(90, axis.x, axis.y);
super.onDraw(canvas);
canvas.rotate(180, axis.x, axis.y);
super.onDraw(canvas);
canvas.rotate(270, axis.x, axis.y);
super.onDraw(canvas);
canvas.restore();
}
};
こんな感じで簡単にViewの編集が行える





0 件のコメント:
コメントを投稿