그리기 객체

기본적인 그래픽을 그리는 방법은 View를 상속하는 클래스를 만들고 Paint, Canvas객체를 이용하면 된다.

1. View를 상속하는 클래스 A를 만든다.
2. A의 생성자에서 Paint객체를 가지고 그리기 관련 설정을 한다.
3. A에서 onDraw(Canvas canvas)메서드를 오버라이딩하고, 파라미터인 canvas를 이용해 drawRect, drawCircle, drawText, drawLine 메서드를 이용하여 각각 사각형, 원, 텍스트, 선을 그린다.

다음은 액티비티 화면에 두 개의 그래픽(하나는 선, 하나는 면)을 그리는 테스트 코드다.

+ View클래스를 상속하는 클래스 작성 (여기에서 Paint와 Canvas를 이용하여 그래픽을 그린다.)

public class GraphicView extends View {
 
    Paint p;
    int left, top, right, bottom;
 
 
    public GraphicView(Context context) {
        super(context);
 
        left = 100;
        top = 100;
        right = 200;
        bottom = 200;
        
        p = new Paint(); //Paint 객체 생성
        p.setStyle(Paint.Style.STROKE); //영역을 외곽 선으로만 채운다
        p.setColor(Color.GREEN); //색상 설정
        p.setAntiAlias(true); // 부드럽게 그릴 때 설정
        p.setStrokeWidth(3); //선의 두께를 설정
        
    }
 
    //만약 XML파일에 태그로 직접 설정 한다면 이 메서드를 이용하니 꼭 선언한다.
    public GraphicView(Context context, AttributeSet attr) {
        super(context, attr);
 
        left = 200;
        top = 200;
        right = 300;
        bottom = 300;
        
        p = new Paint();
        p.setStyle(Paint.Style.FILL); //영역을 꽉 채운다.
        p.setColor(Color.BLUE); //색상 설정
        
 
    }
 
 
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //Canvas를 이용해 사각형을 그리고, 마지막 인자에는 설정객체인 Paint객체를 넣는다.
        canvas.drawRect(left, top, right, bottom, p);
    }
}

Canvas의 drawRect메서드의 파라미터인 좌표값 알아보기

사각형의 그래픽을 놓고 외쪽 위의 모서리와 오른쪽 아래의 모서리가 좌표가 된다.

+ Canvas객체의 대표적 메서드

drawPoint	하나의 점을 그린다. drawPoints메서드를 이용하면 여러개의 점을 그릴 수 있다.
drawLine	두 점의 x, y좌표값으로 선을 그린다. drawLines를 이용해 여러개의 선을 그릴 수 있다.
drawRect	각 모서리의 좌표값을 이용해 사각형을 그린다.
drawRoundRect	사각 영역과 모서리 부분 타원의 반지름 값을 이용해 둥근 모서리의 사각형을 그린다.
drawCircle	원의 중앙 좌표값과 반지름을 이용해 원을 그린다.
drawOval	사각 영역을 이용해 타원을 그린다.
drawArc	사각 영역과 각도를 이용해 아크를 그린다.
drawPath	패스 정보를 이용해 연결선 또는 부드러운 곡선을 그린다.
drawBitmap	비트맵 이미지를 주어진 좌표값에 그린다.

+ 메인 액티비티

public class BitmapActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bitmap);
        
        //직접 GraphicView객체를 생성한다.
        GraphicView gv = new GraphicView(this);
        //id를 이용해 부모 레이아웃을 가져와서.. 
        RelativeLayout layout = (RelativeLayout) findViewById(R.id.mainLayout);
        //레이아웃에 생성한 GraphicView객체를 추가한다.
        layout.addView(gv);
    }
}

+ 메인 XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.choonie.mutitouchapp.BitmapActivity">
 
    <!-- XML에 직접 GraphicView를 추가하는 방법 -->
    <com.example.choonie.mutitouchapp.GraphicView
        android:id="@+id/graphicView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
 
 
</RelativeLayout>
 

invalidate()를 호출하면 기존에 화면에 보이는 그래픽이 사라지고 onDraw(...)를 다시 호출한다.

그렇기 때문에 터치이벤트안에서 좌표를 옮길 때마다 invalidate()를 호출하고 그래픽이 될 좌표를 다시 설정하면 터치하거나 드래그한 곳으로 그래픽이 다시 나타나게 할 수 있다.

@Override
public boolean onTouchEvent(MotionEvent event) {
 
     int action = event.getAction();
 
     if(action == MotionEvent.ACTION_MOVE || action == MotionEvent.ACTION_UP){
         float x = event.getX();
         float y = event.getY();
 
         left = (int)x - 30;
         top = (int)y - 30;
         right = (int)x + 30;
         bottom = (int)y + 30;
     }
 
     invalidate();
 
     return true;
}

선을 그리기 위한 설정은 Paint.setStyle(Paint.Style.Stroke)로 설정 할 수 있으며, Paint객체의 다음 메서드를 사용하여 선을 그릴 때 추가적인 작업을 할 수 있다.

Paint.setStrokeWidth(...)  :  선의 폭 길이를 설정

Paint.setStrokeCap(...)  :  선의 시작점과 끝점의 모양을 설정

Paint.setStrokeJoin(...)  :  선이 꺽여질 때 꼭지점의 모양을 설정

Paint.setStrokeMiter(...)  :  선의 폭 절반에 대한 Miter길이의 비율을 제한할 때 설정

아래는 Cap과 Join을 나타내는 그림이다. 

다음은 Path를 이용해서 Canvas객체에 drawPath메서드를 사용하여 연결선을 그리는 테스트 코드다.

위의 GraphicView클래스의 onDraw(Canvas canvas)메서드만 변경해본다.

@Override
protected void onDraw(Canvas canvas) {
      super.onDraw(canvas);
 
      //그래픽을 그리기 위해 Path객체 생성 및 설정
      Paint paint = new Paint();
      //부드러운 곡선을 표현하도록 설정
      paint.setAntiAlias(true);
      //그리기 스타일을 선으로 설정
      paint.setStyle(Paint.Style.STROKE);     
      //선의 폭 넓이를 설정
      paint.setStrokeWidth(20.0f);
      //선의 Cap을 설정
      paint.setStrokeCap(Paint.Cap.BUTT);
      //선의 Join을 설정
      paint.setStrokeJoin(Paint.Join.MITER);
      //선의 색을 설정
      paint.setColor(getResources().getColor(R.color.colorPurple));
      //canvas.drawLine(120, 150, 240, 300, p);
 
      Path path = new Path();
      //처음 시작 좌표 설정
      path.moveTo(20, 20);
      //여기 부터 각각 선이 연결되는 좌표 설정
      path.lineTo(120, 20);
      path.lineTo(160, 90);
      path.lineTo(180, 80);
      path.lineTo(200, 120);
        
      //Path를 이용한 선을 그린다.
      canvas.drawPath(path, paint);
 
      //offset을 지정하여 좌표를 이동한다.
      path.offset(30, 120);
      //선의 Cap설정
      paint.setStrokeCap(Paint.Cap.ROUND);
      //선의 색 설정
      paint.setColor(getResources().getColor(R.color.colorYellow));
      //또 한번 Path를 이용한 선을 그린다.
      canvas.drawPath(path, paint);
 
}

코드를 살펴보면 Path객체의 moveTo(...)는 선이 시작될 좌표를 정하는 것이고, lineTo(...)는 계속 선이 연결될 좌표를 지정하는 것이다. 그리고 offset(...)은 선이 시작하는 시작점을 옮기는 것이다.