onTouchEvent를 이용한 자유곡선 그리기 (그림판)

 
1. 선을 그릴때 필요한 포인터(지점)을 위한 Point 클래스 생성
public class Point{ Point(float ax, float ay, boolean ad){ x=ax; y=ay; Draw=ad; } float x; float y; boolean Draw; }
x, y는 각각 x좌표, y좌표값을 나타내며 Draw는 화면에 터치되었을때 선을 그릴지의 여부를 나타낸다.


2. 각좌표들을 저장해줄 ArrayList선언
ArrayList<Point> arPoint; arPoint=new ArrayList<Point>();


3. 선을 그리게해줄 View를 생성
protected class MyView extends View{ Paint mPaint; public MyView(Context context){ super(context); mPaint=new Paint(); mPaint.setColor(Color.BLACK); mPaint.setStrokeWidth(3); mPaint.setAntiAlias(true); } public void onDraw(Canvas canvas){ canvas.drawColor(Color.LTGRAY); for(int i=0; i<arPoint.size(); i++){ if(arPoint.get(i).Draw){ canvas.drawLine(arPoint.get(i-1).x, arPoint.get(i-1).y, arPoint.get(i).x, arPoint.get(i).y, mPaint); } } } }
새로운 View를 생성해야하기때문에 MyView라는 클래스가 View클래스를 상속받도록 클래스를 정의한다. 그러고난후 for문을 이용하여 OnTouchListener에 의해 저장된 각지점의 좌표들을 이용하여 선을 그린다.

Void drawLine(float startX, float startY, float stopX, float stopY, Paint paint)
캔버스에 선을 그리는 메소드로 시작점, 끝점, Paint객체를 넣으면 선이 그려진다.

ArrayList에서 시작점, 끝점의 x, y좌표를 받아와 선을 그릴수있도록 설정을 한다.

4. OuTouchListener설정
private MyView vm; vm = new MyView(this); vm.setOnTouchListener(new View.OnTouchListener() { public boolean onTouch(View v, MotionEvent event) { if(event.getAction()==MotionEvent.ACTION_DOWN) { arPoint.add(new Point(event.getX(), event.getY(), false)); return true; } if(event.getAction()==MotionEvent.ACTION_MOVE) { arPoint.add(new Point(event.getX(), event.getY(), true)); vm.invalidate(); return true; } return false; } });
MyView인스턴스를 생성하고 OuTouchListener를 설정한다.
OuTouchListener설정시 2가지의 유의를 해야한다.
  1. 화면에 터치되었을때는 좌표만 얻어지게되고 그지점에 선이 그러지지는 않는다.
  2. 터치를 유지한상태로 드래그(이동)하였을때 이동하는 좌표마다 선이 그려지게된다.

event.getAction()==MotionEvent.ACTION_DOWN 조건을 만족시켰을때는 좌표값만 받아오고
event.getAction()==MotionEvent.ACTION_MOVE 조건이 만족되었을때는 좌표값을 받아와 drawLine시행한다.

                     - 실행 결과화면 -

※ 전체소스코드

OnTouchDraw.java

public class OnTouchDraw extends Activity { LinearLayout linear; ArrayList<Point> arPoint; private MyView vm; public void onCreate(Bundle savedInstanceState) { vm = new MyView(this); super.onCreate(savedInstanceState); setContentView(R.layout.main); linear=(LinearLayout)findViewById(R.id.linear); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT); linear.addView(vm, params); arPoint=new ArrayList<Point>(); vm.setOnTouchListener(new View.OnTouchListener() { public boolean onTouch(View v, MotionEvent event) { if(event.getAction()==MotionEvent.ACTION_DOWN) { arPoint.add(new Point(event.getX(), event.getY(), false)); return true; } if(event.getAction()==MotionEvent.ACTION_MOVE) { arPoint.add(new Point(event.getX(), event.getY(), true)); vm.invalidate(); return true; } return false; } }); findViewById(R.id.btn_red).setOnClickListener(mClickListener); findViewById(R.id.btn_blue).setOnClickListener(mClickListener); findViewById(R.id.btn_green).setOnClickListener(mClickListener); findViewById(R.id.btn_black).setOnClickListener(mClickListener); findViewById(R.id.btn_white).setOnClickListener(mClickListener); } View.OnClickListener mClickListener = new View.OnClickListener() { public void onClick(View v) { switch(v.getId()){ case R.id.btn_red: arPoint=new ArrayList<Point>(); vm.mPaint.setColor(Color.RED); break; case R.id.btn_blue: arPoint=new ArrayList<Point>(); vm.mPaint.setColor(Color.BLUE); break; case R.id.btn_green: arPoint=new ArrayList<Point>(); vm.mPaint.setColor(Color.GREEN); break; case R.id.btn_black: arPoint=new ArrayList<Point>(); vm.mPaint.setColor(Color.BLACK); break; case R.id.btn_white: arPoint=new ArrayList<Point>(); vm.mPaint.setColor(Color.WHITE); break; } } }; public class Point{ Point(float ax, float ay, boolean ad){ x=ax; y=ay; Draw=ad; } float x; float y; boolean Draw; } protected class MyView extends View{ Paint mPaint; public MyView(Context context){ super(context); mPaint=new Paint(); mPaint.setColor(Color.BLACK); mPaint.setStrokeWidth(3); mPaint.setAntiAlias(true); } public void onDraw(Canvas canvas){ canvas.drawColor(Color.LTGRAY); for(int i=0; i<arPoint.size(); i++){ if(arPoint.get(i).Draw){ canvas.drawLine(arPoint.get(i-1).x, arPoint.get(i-1).y, arPoint.get(i).x, arPoint.get(i).y, mPaint); } } } } }