[Mobile Programming] Android에서의 그래픽

그래픽

Canvas 클래스: 점,선,원,사각형,텍스트 등 그리기

• DrawPoint : 점
• DrawCircle : 원
• Drawline : 선
• drawtext : 글자
• drawRect : 사각형
• drawOval : 원, 타원

Paint 클래스 : 색상, 스타일, 펜 두께, 글꼴

 

전체적인 그래픽 작업 순서

1. 뷰 클래스에서 상속받은 커스텀 뷰를 새롭게 만듦
2. onCreate 함수에서 커스텀 뷰에 대해 지정
3. onDraw 함수에서 도형을 그림

실습

class MyCustomView extends View {

    //생성자
    public MyCustomView(Context mycontext) {
        super(mycontext);
        setBackgroundColor(Color.LTGRAY);
    }

    //onDraw
    @Override
    protected void onDraw(Canvas mycanvas) {
        Paint mypaint = new Paint();
        mypaint.setColor(Color.BLUE); // 페인트 색
        mypaint.setStrokeWidth(20);  // 페인트 선 두께
        mycanvas.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,250,500,350,mypaint);    // 선
    }

}
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 커스텀 뷰 지정
        MyCustomView w = new MyCustomView((this));
        setContentView(w);
    }
}

---

터치이벤트 - 그래픽

• 화면에 생성한 뷰를 터치하면 Touch 이벤트 발생
• View 클래스의 onTouchEvent() 메소드를 오버라이드해서 코딩
• 터치 발생한 위치를 입력 데이터로 사용하여 그림을 그림

실습

간단한 그림판의 실행 ( 터치지점으로 선, 사각형, 원 그리기 )

• View 클래스의 상속을 받는 MyGraphicView 클래스
• 옵션 메뉴 작성 onCreateOptionsMenu()와 onOptionsItemSelected()
• MyGraphicView 클래스에 터치와 관련된 메소드 완성
• 실제로 화면에 도형이 그려질 onDraw() 메소드 완성

public class MainActivity extends AppCompatActivity {
    // 변수 선언 
    final static int LINE = 1, RECT =2, CIRCLE =3;
    static int kindofshape = LINE;

    // 뷰 클래스를 상속받는 MyGraphicView 클래스 만듦
    private static class MyGraphicView extends View {
        int startx, starty, endx, endy;

        //생성자
        public MyGraphicView ( Context mycontext) {
            super(mycontext);
        }

        @Override // 터치이벤트 함수 
        public boolean onTouchEvent(MotionEvent myevent){
            switch ((myevent.getAction())) {
                case MotionEvent.ACTION_DOWN:
                    startx = (int)myevent.getX();
                    starty = (int)myevent.getY();
                    break;
                case MotionEvent.ACTION_MOVE:

                case MotionEvent.ACTION_UP:
                    endx=(int) myevent.getX();
                    endy = (int) myevent.getY();
                    this.invalidate();
                    break;
            }
            return true;
        }
        // 그려질 도형 
        protected void onDraw(Canvas mycanvas) {
            super.onDraw(mycanvas);

            Paint mypaint = new Paint();
            mypaint.setAntiAlias(true);
            mypaint.setStrokeWidth(8);
            mypaint.setStyle(Paint.Style.STROKE);
            mypaint.setColor(Color.RED);

            switch(kindofshape) {
                case LINE :
                    mycanvas.drawLine(startx, starty, endx,endy,mypaint);
                    break;
                case RECT:
                    mycanvas.drawRect(startx,starty,endx,endy,mypaint);
                    break;
                case CIRCLE :
                    int radius =(int) Math.sqrt(Math.pow((endx-startx), 2.0 )+ Math.pow((endy-starty), 2.0));
                    mycanvas.drawCircle(startx,starty,radius,mypaint);
                    break;
            }
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new MyGraphicView(this)); // 화면에 보일 클래스 
    }

    // 옵션 메뉴 만듦
    public boolean onCreateOptionsMenu(Menu mymenu) {
        super.onCreateOptionsMenu(mymenu);
        mymenu.add(0,1,0,"LINE");
        mymenu.add(0,2,0,"RECT");
        mymenu.add(0,3,0,"CIRCLE");
        return true;
    }

    public boolean onOptionsItemSelected(MenuItem myitem) {
        switch(myitem.getItemId()) {
            case 1 :
                kindofshape = LINE;
                return true;
            case 2 :
                kindofshape = RECT;
                return true;
            case 3:
                kindofshape = CIRCLE;
                return true;
        }
        return super.onOptionsItemSelected(myitem);
    }


}

---

이미지 활용

• 리소스 폴더에 이미지 파일을 복사
• 비트맵(bitmap) → BitmapFactory.decodeFile("파일경로 및 파일");

실습

• 이미지를 화면 중앙에 출력하기
• 많이 사용되는 Canvas 클래스의 기하학적 메소드 사용

public class MainActivity extends AppCompatActivity {

    private static class MyCustomView extends View {
        public MyCustomView (Context mycontext) {
            super(mycontext);
        }

        protected void onDraw(Canvas mycanvas) {
            super.onDraw(mycanvas);

            // 리소스 타입에 분석 후 비트맵으로 바꿔주는 역할
            Bitmap mypicture = BitmapFactory.decodeResource(getResources(), R.drawable.cute);

            int centerx = this.getWidth() /2;
            int centery = this.getHeight() /2;
            int pic_x = (this.getWidth() - mypicture.getWidth()) / 2;
            int pic_y = (this.getHeight() - mypicture.getHeight()) / 2;

            mycanvas.drawBitmap(mypicture, pic_x,pic_y, null);

            mycanvas.translate(-150, 200);  // 이미지 이동
            mycanvas.drawBitmap(mypicture, pic_x, pic_y, null);

            mycanvas.rotate(45,centerx, centery); // 이미지 회전
            mycanvas.drawBitmap(mypicture,pic_x,pic_y,null);

            mycanvas.scale(0.5f,2,centerx,centery); // 이미지 크기
            mycanvas.drawBitmap(mypicture,pic_x,pic_y,null);

            mycanvas.skew(0.4f, 0.4f); // 이미지 기울이기
            mycanvas.drawBitmap(mypicture, pic_x,pic_y, null);

            mypicture.recycle();

        }
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new MyCustomView(this));
    }
}