그래픽 이벤트

K-MOOC 모바일 프로그래밍  7주차 그래픽과 이미지, 7-1 안드로이드 그래픽 에 대한 내용입니다.

 

안드로이드에서의 그래픽 사용 방법

(1) XML 언어로 그래픽, 애니메이션 정의

(2)그래픽 기능을 사용하기 위해서 onDraw() 메소드 안의 draw관련 함수 이용

draw관련 함수를 이용해서 그리기 메소드 호출하여 화면에 그림 그리기

 

커스텀 뷰 생성 > 커스텀 뷰 클래스의 onDraw 메소드 이용

 

작업 순서

1. 뷰 클래스에서 상속받은 커스텀 뷰를 새롭게 만들어야 함.

2. onCreate 함수에서 커스텀 뷰에 대해 지정.

3. onDraw함수에서 그리고자 하는 도형의 프로그램 실행.

 

Canvas 클래스 (도화지 + 액션 인식)

Paint 클래스 (붓, 물감, 속성)

 

Canvas 클래스 매소드들을 이용해 화면에 그림을 그림.

DrawPoint // 하나의 점 찍기

drawRect // 사각형 그리기

drawOval // 원, 타원 그리기

Drawline // 선 그리기

Drawcircle // 원 그리기

Drawtext // 글자 그리기

 

이 매소드들은 좌표계를 필요로 함.

> 스마트폰의 해상도를 알아야 한다 

> x와 y의 최댓값을 알아야 하기 때문. 왼쪽 맨 위가 (0,0)

 

Paint 속성

-색상 ( 예) paint.setColor(0xFF0000); paint.setColor(Color.RED); )

-선의 스타일 : Canvas 클래스에서 도형을 내부/경계선으로 구분한다. 도형 그리기 옵션 : FILL / FILL_AND_STROKE / STROKE 

 

실습1. 여러 도형과 글자 그래픽 보이기

class MyCustomView extends View {
    public MyCustomView(Context mycontext){
        super(mycontext); // 상속받은 뷰에서 정의 돼 있는 생성자의 일을 그대로 진행
        setBackgroundColor(Color.LTGRAY); // 캔버스 배경색 변경
    }
    // onDraw함수에서 화면 구성
    @Override
    protected void onDraw(Canvas mycanvas){ // mypaint라는 붓의 속성 바꾸기
        Paint mypaint=new Paint(); // mypaint 객체 생성
        mypaint.setColor(Color.BLUE); // 선의 색
        mypaint.setStrokeWidth(20); // 선의 두께
        mypaint.setTextSize(40);
        mycanvas.drawText("drawText를 사용한 텍스트",100,100,mypaint); // 쓰여질 글자, 시작될 위치, 쓸 붓

        mypaint.setColor(Color.YELLOW);
        mycanvas.drawRect(100,200,600,400,mypaint);

        mypaint.setColor(Color.RED);
        mycanvas.drawCircle(200,470,50,mypaint);
        mycanvas.drawCircle(500,470,50,mypaint);

        mypaint.setColor(Color.BLUE);
        mycanvas.drawLine(200,300,500,350,mypaint);
    }

}

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // 화면상에 보여줄 내용은 myview가 가지고 있음을 나타냄.
        // MyCustomView로 변수 myview를 만들고 onCreate 함수를 통해서 myview 초기값 생성


        MyCustomView myview = new MyCustomView(this);
        setContentView(myview); // myview 객체를 넘겨줌
    }
}

 

Path (패스) : 선, 곡선 등이 서로 연결돼 하나의 길다란 선을 만드는 작업

 

실습2. onDraw 함수에 Path 관련 코드 추가

Path mypath=new Path();
        Paint my2paint=new Paint();

        my2paint.setStyle(Paint.Style.STROKE); // 페인트 속성
        mypath.moveTo(100,600); // 함수를 통해서 path만들기, moveTo : 위치만 옮김
        mypath.cubicTo(300,600,400,800,500,700); // cubicTo : 4개의 좌표를 이용해서 곡선 그리기
        mypath.lineTo(400,800); // lineTo : 정해진 위치까지 선분 그리기

        my2paint.setColor(Color.MAGENTA);
        my2paint.setStrokeWidth(10);

        mycanvas.drawPath(mypath, my2paint);

        my2paint.setStyle(Paint.Style.FILL);
        my2paint.setTextSize(40);
        mycanvas.drawTextOnPath("Path 사용하기",mypath,0,0,my2paint);