안드로이드: 간단 그림판 만들기!(Canvas, Paint 클래스 사용하기)

Canvas클래스와 Paint클래스를 이용해서 간단한 그림판을 만들었다.

 

메뉴를 버튼을 이용해 직선, 원, 직사각형을 그릴 수 있게 했고

 

서브 메뉴로 색 변경 버튼을 달아 빨강, 파랑, 초록을 선택할 수 있도록 했다. 

 

 

디폴트 값은 직선, 빨강이다.

 

 

 

 

메뉴버튼을 달아서 색을 변경할 수 있다.

 

 

 

 

 

 

 

 

MyShape 클래스를 추가로 설정해서 다른 그림을 그려도 지워지지 않고 남아있다.

 

또한 xml파일을 따로 두지 않고 클래스만으로 만들었다.

 

 

<MainActivity.java>

package org.techtown.minipaint;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.SubMenu;
import android.view.View;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    final static int LINE = 1, CIRCLE = 2;
    final static int RECT = 3;
    final static int red = 4, blue = 5, green = 6;
    static int shape  = LINE;
    static int color = red;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new MyPaintView(this));
        setTitle("간단 그림판");
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);

        menu.add(0,1,0,"선 그리기");
        menu.add(0, 2, 0, "원 그리기");
        menu.add(0, 3, 0, "직사각형 그리기");
        // 그룹id, 메뉴id, 순서, 원하는 텍스트

        SubMenu submenu = menu.addSubMenu("색상 변경 >>");
        submenu.add(0,4,0,"빨강");
        submenu.add(0,5,0,"파랑");
        submenu.add(0,6,0,"초록");
        //색상변경을 도와주는 서브메뉴만들기 

    return true;
    }


    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {


        switch (item.getItemId()){
            case LINE:
                shape = LINE;
                return true;
            case CIRCLE:
                shape = CIRCLE;
                return true;
            case RECT:
                shape = RECT;
                return true;
            case red:
                color = red;
                return true;
            case blue:
                color = blue;
                return true;
            case green:
                color = green;
                return true;



        }

    return false;
    }

    public static class MyPaintView extends View{
        ArrayList<MyShape> myShapeArrayList = new ArrayList<>();

        MyShape currentShape;
        int startX= -1;
        int startY= -1;
        int stopX= -1;
        int stopY= -1;

        public MyPaintView(Context context) {
            super(context);
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {

            switch (event.getAction()){

                case MotionEvent.ACTION_DOWN: //터치할때
                    startX = (int)event.getX();
                    startY = (int)event.getY();
                    break;
                                   
                case MotionEvent.ACTION_UP: // 손을 땔때
                        stopX = (int)event.getX();
                        stopY = (int)event.getY();
                        this.invalidate(); // onDraw메소드로 이동
            }
            return true;
        }


        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            
            Paint paint = new Paint();
            paint.setAntiAlias(true);
            paint.setStrokeWidth(5);
            paint.setStyle(Paint.Style.STROKE);

            currentShape = new MyShape(shape, startX, startY, stopX, stopY, paint);
            myShapeArrayList.add(currentShape);
      
            for(MyShape cshape: myShapeArrayList)
                     draw_shape(cshape, canvas);

            if(currentShape != null)
            draw_shape(currentShape, canvas);

        }
        
        public void draw_shape(MyShape myshape, Canvas canvas) {

            switch (myshape.shape_type) {
            
                case LINE:
                    canvas.drawLine(myshape.startX, myshape.startY, myshape.stopX, myshape.stopY, myshape.paint);
                    break;
                case CIRCLE:
                    int radius = (int) Math.sqrt(Math.pow(myshape.stopX - myshape.startX, 2) + Math.pow(myshape.stopY - myshape.startY, 2));
                    canvas.drawCircle(myshape.startX, myshape.startY, radius,myshape.paint);
                    break;
                case RECT:
                    Rect rect = new Rect(myshape.startX,myshape.startY, myshape.stopX, myshape.stopY);
                    canvas.drawRect(rect, myshape.paint);
                    break;
            }
        }
        

// 그려진 정보를 저장하는 MyShape클래스
        private static class MyShape {
        
            int shape_type, startX, startY, stopX, stopY;
            Paint paint;

            public MyShape(int shape_type, int startX, int startY, int stopX, int stopY, Paint paint) {
                
                this.shape_type = shape_type;
                this.startX = startX;
                this.startY = startY;
                this.stopX = stopX;
                this.stopY = stopY;
                this.paint = paint;
                
                switch (color){
                
                    case red:
                        paint.setColor(Color.RED);
                        break;
                    case blue:
                        paint.setColor(Color.BLUE);
                        break;
                    case green:
                        paint.setColor(Color.GREEN);
                        break;
                }
            }
        }
    }

}

 

< 정리 >

 

1.  xml파일 없이 클래스로만 화면을 띄운다. 

 

2. 메뉴를 만들기 위해 onCreatOptionView와 onOptionstiemselected를 오바라이드한다.

 

3. 그림을 그리기 위해 View 클래스를 상속받아 MyPaintView 클래스를 만들어준다.

 

4. MyPaintView 클래스안에 터치할때 반응하는 onTouchEvent와 onDraw 메소드를 오버라이드한다.

 

5. MyShape 클래스를 MyPaintView 내부에 만들어 그림의 정보를 담는다(추가적으로 그림을 더 그릴 수 있게 하기 위함)

 

6. 그려진 그림(MyShape의 인스턴스)을 차례로 저장할 ArrayList를 만든다.