Android - 2D graphics -

2D グラフィックスライブラリは android.graphics

Color クラス
Paint クラス
Canvas クラス
View クラス
Path クラス
etc..

More...

Color

アルファ、赤、緑、青 (ARGB)　の4つの値で色を表現する。
アルファは透明度で、
アルファ = 0 : 透明
アルファ = 255 : 不透明

・色の指定方法
Colorクラスの静的定数

view plainprint?

1. int color = Color.BLUE;  // 青  
2. int color = Color.argb(127, 255, 0, 255);   // 半透明の紫  

int color = Color.BLUE;  // 青
int color = Color.argb(127, 255, 0, 255);   // 半透明の紫

XML リソースファイルで定義

view plainprint?

1. <!--xml version="1.0" encoding="utf-8"?-->  
2. <resources>  
3.   <color name="color1">#7fff00ff</color>  
4. </resources>  

  #7fff00ff

・色の参照

XML ファイルで付けた名前で参照

view plainprint?

1. android:background="@color/color1";  

android:background="@color/color1";

Java コードで取得

view plainprint?

1. int color = getResources().getColor(R.color.color1);  

int color = getResources().getColor(R.color.color1);

getResources() : 現在の Activity に対応する ResourceManager クラスを返す
getColor() : Resource ID に対応する色を Manager に問い合わせる



Paint

グラフィックスの描画で必要なスタイル、色、その他の情報を管理

・描画色を設定

view plainprint?

1. Paint cPaint = new Paint();  
2. cPaint.setColor(Color.LTGRAY);  // light gray  

Paint cPaint = new Paint();
cPaint.setColor(Color.LTGRAY);  // light gray

Canvas

描画対象のキャンバスを表現

・キャンバスに描画する
View.onDraw() メソッドをオーバーライドする

view plainprint?

1. static public class GraphicsView extends View {  
2.   public GraphicsView(Context context) {  
3.     super(context);  
4.   }  
5.   @Override  
6.   protected void onDraw(Canvas canvas) {  
7.      // Drawing commands  
8.   }  
9. }  

static public class GraphicsView extends View {
  public GraphicsView(Context context) {
    super(context);
  }
  @Override
  protected void onDraw(Canvas canvas) {
     // Drawing commands
  }
}

Path

直線、曲線、矩形などのベクター描画コマンドを持つ

・円形パスを定義

view plainprint?

1. @Override  
2. protected void onDraw(Canvas canvas) {  
3.  Path circle = new Path();  
4.  circle.addCircle(150, 150, 100, Path.Direction.CW);  
5.  Paint cPaint = new Paint();  
6.  Paint tPaint = new Paint();  
7.  cPaint.setStyle(Paint.Style.STROKE);  
8.  cPaint.setColor(Color.YELLOW);  
9.  tPaint.setColor(Color.WHITE);  
10.  canvas.drawPath(circle, cPaint);  
11.    
12.  final String ss = "Happy Birthday To You !!! Happy Birthday To You !!! Happy Birthday To You !!! Happy Birthday To You !!!";  
13.  canvas.drawTextOnPath(ss, circle, 0, 20, tPaint);    
14. }  

 @Override
 protected void onDraw(Canvas canvas) {
  Path circle = new Path();
  circle.addCircle(150, 150, 100, Path.Direction.CW);
  Paint cPaint = new Paint();
  Paint tPaint = new Paint();
  cPaint.setStyle(Paint.Style.STROKE);
  cPaint.setColor(Color.YELLOW);
  tPaint.setColor(Color.WHITE);
  canvas.drawPath(circle, cPaint);
  
  final String ss = "Happy Birthday To You !!! Happy Birthday To You !!! Happy Birthday To You !!! Happy Birthday To You !!!";
  canvas.drawTextOnPath(ss, circle, 0, 20, tPaint);  
 }

Direction.CW : right hand

view plainprint?

1. // 色設定  
2. paint.setColor(Color.argb(255,255,0,0));  
3. // アンチエイリアス  
4. paint.setAntiAlias(true);  
5. // 塗りつぶし  
6. paint.setStyle(Paint.Style.FILL);  
7. // 塗りつぶしなし  
8. paint.setStyle(Paint.Style.STROKE);  
9. // 枠線の幅  
10. paint.setStrokeWidth(2);  
11. // 直線  
12. canvas.drawLine(25,5,25,5+40,paint);  
13. // パス  
14. Path path = new Path();  
15. path.moveTo(55+ 0,5+ 0);  
16. path.lineTo(55+30,5+ 5);  
17. path.lineTo(55+10,5+20);  
18. path.lineTo(55+40,5+25);  
19. path.lineTo(55+ 0,5+40);  
20. canvas.drawPath(path, paint);  
21. // 四角  
22. canvas.drawRect(new Rect(0, 0, 40, 40), paint);  
23. canvas.drawRect(0, 0, 40, 40, paint);  
24. // 角丸四角  
25. canvas.drawRoundRect(new RectF(0, 0, 40, 40), 10, 10, paint);  
26. canvas.drawRoundRect(0, 0, 40, 40, 10, 10, paint);  
27. // 円  
28. canvas.drawCircle(100, 100, 150, paint);  

// 色設定
paint.setColor(Color.argb(255,255,0,0));
// アンチエイリアス
paint.setAntiAlias(true);
// 塗りつぶし
paint.setStyle(Paint.Style.FILL);
// 塗りつぶしなし
paint.setStyle(Paint.Style.STROKE);
// 枠線の幅
paint.setStrokeWidth(2);
// 直線
canvas.drawLine(25,5,25,5+40,paint);
// パス
Path path = new Path();
path.moveTo(55+ 0,5+ 0);
path.lineTo(55+30,5+ 5);
path.lineTo(55+10,5+20);
path.lineTo(55+40,5+25);
path.lineTo(55+ 0,5+40);
canvas.drawPath(path, paint);
// 四角
canvas.drawRect(new Rect(0, 0, 40, 40), paint);
canvas.drawRect(0, 0, 40, 40, paint);
// 角丸四角
canvas.drawRoundRect(new RectF(0, 0, 40, 40), 10, 10, paint);
canvas.drawRoundRect(0, 0, 40, 40, 10, 10, paint);
// 円
canvas.drawCircle(100, 100, 150, paint);

PathEffect クラスを使うと面白い効果が作れる