Рисование фигур пальцами

В Android очень легко рисовать простые фигуры пальцами.
Для начала нужно создать пользовательский View:
Затем понадобятся объекты: Bitmap, Canvas и Paint.
Для инициализации изображения и канвы в DrawingView нужно переопределить метод:
Для создания канваса нужен Bitmap на котором собственно и будет выполняться рисование.

Теперь нужно создать объект рисования. Paint хранит информацию о стиле и цвете, которым в данный момент выполняется рисование. Например:
Здесь можно использовать любой желаемый стиль.

Наконец, следует переопределить методы onDraw() и onTouchEvent().
Можно применить подобную логику для рисования линий, сглаженных линий, окружностей, квадратов, прямоугольников, треугольников...

В начале рисования срабатывает событие MotionEvent.ACTION_DOWN. Здесь можно сохранить начальную точку, потому что она может пригодиться в последующих шагах.
Когда мы водим пальцем по экрану, срабатывает событие MotionEvent.ACTION_MOVE, а когда палец отрывается от экрана, срабатывает MotionEvent.ACTION_UP.
Метод invalidate() передаёт управление методу onDraw(), что приводит к перерисовке экрана.

Прямоугольник

Прямоугольник

Начнём с прямоугольника:

[копировать] [скачать]

1. @Override
2. public boolean onTouchEvent(MotionEvent event) {
3.     mx = event.getX();
4.     my = event.getY();
5.     switch (mCurrentShape) {
6.         case RECTANGLE:
7.             onTouchEventRectangle(event);
8.             break;
9.    }
10.    return true;
11. }
12.  
13. @Override
14. protected void onDraw(Canvas canvas) {
15.     super.onDraw(canvas);
16.     canvas.drawBitmap(mBitmap, 0, 0, mPaint);
17.  
18.     if (isDrawing){
19.         switch (mCurrentShape) {
20.             case RECTANGLE:
21.                 onDrawRectangle(canvas);
22.                 break;
23.         }
24.     }
25. }
26.  
27. private void onTouchEventRectangle(MotionEvent event) {
28.     switch (event.getAction()) {
29.         case MotionEvent.ACTION_DOWN:
30.             isDrawing = true;
31.             mStartX = mx;
32.             mStartY = my;
33.             invalidate();
34.             break;
35.         case MotionEvent.ACTION_MOVE:
36.             invalidate();
37.             break;
38.         case MotionEvent.ACTION_UP:
39.             isDrawing = false;
40.             drawRectangle(mCanvas, mPaintFinal);
41.             invalidate();
42.             break;
43.     }
44. }
45.  
46. private void onDrawRectangle(Canvas canvas) {
47.     drawRectangle(canvas,mPaint);
48. }
49.  
50. private void drawRectangle(Canvas canvas, Paint paint){
51.     float right = mStartX > mx ? mStartX : mx;
52.     float left = mStartX > mx ? mx : mStartX;
53.     float bottom = mStartY > my ? mStartY : my;
54.     float top = mStartY > my ? my : mStartY;
55.     canvas.drawRect(left, top, right, bottom, paint);
56. }

Квадрат

Квадрат

Аналогично и для квадратов:

[копировать] [скачать]

1. private void onDrawSquare(Canvas canvas) {
2.     onDrawRectangle(canvas);
3. }
4.  
5. private void onTouchEventSquare(MotionEvent event) {
6.     switch (event.getAction()) {
7.         case MotionEvent.ACTION_DOWN:
8.             isDrawing = true;
9.             mStartX = mx;
10.             mStartY = my;
11.             invalidate();
12.             break;
13.         case MotionEvent.ACTION_MOVE:
14.             adjustSquare(mx, my);
15.             invalidate();
16.             break;
17.         case MotionEvent.ACTION_UP:
18.             isDrawing = false;
19.             adjustSquare(mx, my);
20.             drawRectangle(mCanvas,mPaintFinal);
21.             invalidate();
22.             break;
23.     }
24. }
25.  
26. /**
27.  * Преобразует текущие координаты, чтобы получился квадрат
28.  */
29. protected void adjustSquare(float x, float y) {
30.     float deltaX = Math.abs(mStartX - x);
31.     float deltaY = Math.abs(mStartY - y);
32.     float max = Math.max(deltaX, deltaY);
33.     mx = mStartX - x < 0 ? mStartX + max : mStartX - max;
34.     my = mStartY - y < 0 ? mStartY + max : mStartY - max;
35. }

Единственное отличие, в методе adjustSquare происходит преобразование координат точки (mx, my) которые сдвигаются так, чтобы получился квадрат.

Окружность

Окружность

Для рисования окружностей следует посчитать радиус:

[копировать] [скачать]

1. private void onDrawCircle(Canvas canvas) {
2.     canvas.drawCircle(mStartX, mStartY, calculateRadius(mStartX, mStartY, mx, my), mPaint);
3. }
4.  
5. private void onTouchEventCircle(MotionEvent event) {
6.     switch (event.getAction()) {
7.         case MotionEvent.ACTION_DOWN:
8.             isDrawing = true;
9.             mStartX = mx;
10.             mStartY = my;
11.             invalidate();
12.             break;
13.         case MotionEvent.ACTION_MOVE:
14.             invalidate();
15.             break;
16.         case MotionEvent.ACTION_UP:
17.             isDrawing = false;
18.             mCanvas.drawCircle(mStartX, mStartY,
19.                  calculateRadius(mStartX,mStartY,mx,my), mPaintFinal);
20.             invalidate();
21.             break;
22.     }
23. }
24.  
25. protected float calculateRadius(float x1, float y1, float x2, float y2) {
26.     return (float) Math.sqrt( Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2) );
27. }

Прямая линия

Прямая линия

На очереди прямые линии:

[копировать] [скачать]

1. private void onDrawLine(Canvas canvas) {
2.     float dx = Math.abs(mx - mStartX);
3.     float dy = Math.abs(my - mStartY);
4.     if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
5.         canvas.drawLine(mStartX, mStartY, mx, my, mPaint);
6.     }
7. }
8.  
9. private void onTouchEventLine(MotionEvent event) {
10.     switch (event.getAction()) {
11.         case MotionEvent.ACTION_DOWN:
12.             isDrawing = true;
13.             mStartX = mx;
14.             mStartY = my;
15.             invalidate();
16.             break;
17.         case MotionEvent.ACTION_MOVE:
18.             invalidate();
19.             break;
20.         case MotionEvent.ACTION_UP:
21.             isDrawing = false;
22.             mCanvas.drawLine(mStartX, mStartY, mx, my, mPaintFinal);
23.             invalidate();
24.             break;
25.     }
26. }

Сглаженная линия

Сглаженная линия

Последние две фигуры будут посложнее.
Сглаженная линия. Используется класс Path.

[копировать] [скачать]

1. private void onTouchEventSmoothLine(MotionEvent event) {
2.     switch (event.getAction()) {
3.         case MotionEvent.ACTION_DOWN:
4.             isDrawing = true;
5.             mStartX = mx;
6.             mStartY = my;
7.             mPath.reset();
8.             mPath.moveTo(mx, my);
9.             invalidate();
10.             break;
11.         case MotionEvent.ACTION_MOVE:
12.             float dx = Math.abs(mx - mStartX);
13.             float dy = Math.abs(my - mStartY);
14.             if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
15.                 mPath.quadTo(mStartX, mStartY, (mx + mStartX) / 2, (my + mStartY) / 2);
16.                 mStartX = mx;
17.                 mStartY = my;
18.             }
19.             mCanvas.drawPath(mPath, mPaint);
20.             invalidate();
21.             break;
22.         case MotionEvent.ACTION_UP:
23.             isDrawing = false;
24.             mPath.lineTo(mStartX, mStartY);
25.             mCanvas.drawPath(mPath, mPaintFinal);
26.             mPath.reset();
27.             invalidate();
28.             break;
29.     }
30. }

Треугольник

Треугольник

Чтобы нарисовать треугольник, придётся слегка изменить логику, т.к. его нельзя нарисовать по двум точкам, как этот делалось со всеми предыдущими фигурами. По двум точкам можно нарисовать опору треугольника, а уже с третьим касанием построить две оставшиеся стороны.

[копировать] [скачать]

1. int countTouch = 0;
2. float basexTriangle = 0;
3. float baseyTriangle = 0;
4.  
5. private void onDrawTriangle(Canvas canvas) {
6.     if (countTouch < 3) {
7.         canvas.drawLine(mStartX, mStartY, mx, my, mPaint);
8.     } else if (countTouch == 3) {
9.         canvas.drawLine(mx, my, mStartX, mStartY, mPaint);
10.         canvas.drawLine(mx, my, basexTriangle, baseyTriangle, mPaint);
11.     }
12. }
13.  
14. private void onTouchEventTriangle(MotionEvent event) {
15.     switch (event.getAction()) {
16.         case MotionEvent.ACTION_DOWN:
17.             countTouch++;
18.             if (countTouch == 1){
19.                 isDrawing = true;
20.                 mStartX = mx;
21.                 mStartY = my;
22.             } else if (countTouch == 3){
23.                 isDrawing = true;
24.             }
25.             invalidate();
26.             break;
27.         case MotionEvent.ACTION_MOVE:
28.             invalidate();
29.             break;
30.         case MotionEvent.ACTION_UP:
31.             countTouch++;
32.             isDrawing = false;
33.             if (countTouch < 3) {
34.                 basexTriangle = mx;
35.                 baseyTriangle = my;
36.                 mCanvas.drawLine(mStartX, mStartY, mx, my, mPaintFinal);
37.             } else if (countTouch >= 3) {
38.                 mCanvas.drawLine(mx, my, mStartX, mStartY, mPaintFinal);
39.                 mCanvas.drawLine(mx, my, basexTriangle, baseyTriangle, mPaintFinal);
40.                 countTouch = 0;
41.             }
42.             invalidate();
43.             break;
44.     }
45. }

Теперь можно дать ребёнку поиграться с этим приложением и он нарисует маленький домик у моря с прекрасным солнцем на небе.
 

Демо видео


Исходный код: GitHub

---

Автор оригинала: Gabriele Mariotti