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

от
Android    перевод, canvas

В Android очень легко рисовать простые фигуры пальцами.
Для начала нужно создать пользовательский View:
  1. public class DrawingView extends View { }
Затем понадобятся объекты: Bitmap, Canvas и Paint.
  1. protected Paint mPaint;
  2. protected Bitmap mBitmap;
  3. protected Canvas mCanvas;
Для инициализации изображения и канвы в DrawingView нужно переопределить метод:
  1. @Override
  2. protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  3.     super.onSizeChanged(w, h, oldw, oldh);
  4.     mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
  5.     mCanvas = new Canvas(mBitmap);
  6. }
Для создания канваса нужен Bitmap на котором собственно и будет выполняться рисование.

Теперь нужно создать объект рисования. Paint хранит информацию о стиле и цвете, которым в данный момент выполняется рисование. Например:
  1. public DrawingView(Context context) {
  2.     super(context);
  3.     init();
  4. }
  5.  
  6. protected void init() {
  7.     mPaint = new Paint(Paint.DITHER_FLAG);
  8.     mPaint.setAntiAlias(true);
  9.     mPaint.setDither(true);
  10.     mPaint.setColor(getContext().getResources().getColor(android.R.color.holo_blue_dark));
  11.     mPaint.setStyle(Paint.Style.STROKE);
  12.     mPaint.setStrokeJoin(Paint.Join.ROUND);
  13.     mPaint.setStrokeCap(Paint.Cap.ROUND);
  14.     mPaint.setStrokeWidth(TOUCH_STROKE_WIDTH);
  15. }
Здесь можно использовать любой желаемый стиль.

Наконец, следует переопределить методы onDraw() и onTouchEvent().
Можно применить подобную логику для рисования линий, сглаженных линий, окружностей, квадратов, прямоугольников, треугольников...
  1. @Override
  2. public boolean onTouchEvent(MotionEvent event) {
  3.     // Получаем точку касания
  4.     mx = event.getX();
  5.     my = event.getY();
  6.  
  7.     switch (event.getAction()) {
  8.         case MotionEvent.ACTION_DOWN:
  9.         // Первое касание. Сохраняем начальную позицию
  10.         invalidate();
  11.  
  12.         case MotionEvent.ACTION_MOVE:
  13.         // Рисуем
  14.         invalidate();
  15.  
  16.         case MotionEvent.ACTION_UP:
  17.         // Завершаем рисование и рисуем всё в канвас.
  18.         invalidate();
  19.     }
  20.     return true;
  21. }

В начале рисования срабатывает событие MotionEvent.ACTION_DOWN. Здесь можно сохранить начальную точку, потому что она может пригодиться в последующих шагах.
Когда мы водим пальцем по экрану, срабатывает событие MotionEvent.ACTION_MOVE, а когда палец отрывается от экрана, срабатывает MotionEvent.ACTION_UP.
Метод invalidate() передаёт управление методу onDraw(), что приводит к перерисовке экрана.
  1. @Override
  2. protected void onDraw(Canvas canvas) {
  3.     super.onDraw(canvas);
  4.     canvas.drawBitmap(mBitmap, 0, 0, mPaint);
  5.     // Рисуем фигуру
  6. }

Прямоугольник
Квадрат
Окружность
Прямая линия
Сглаженная линия
Треугольник
Теперь можно дать ребёнку поиграться с этим приложением и он нарисует маленький домик у моря с прекрасным солнцем на небе.
  Screenshot_2014-01-17-23-18-21.png

Демо видео


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

Автор оригинала: Gabriele Mariotti
  • +6
  • views 8749