10. Основи графіки

Первинні вкладки

1. Створіть новий проект. Скачайте будь-яку картинку та скопіюйте її в папку drawable.

2. Перейдіть у MainActivity та замініть метод OnCreate:

1
2
3
4
5
6

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       // setContentView(R.layout.activity_main); це вже не потрібно
        Draw2D draw2D = new Draw2D(this);
        setContentView(draw2D);
    }

3. Створіть новий клас з назвою Draw2D.

4. У новому класі оголосіть змінні:

1
2
3

    private Paint mPaint = new Paint(); // змінна для холста
    private Rect mRect = new Rect(); // змінна для фігур
    private Bitmap mBitmap; // змінна для зображення

5. Оголосіть нові методи Draw2D та OnDraw:

1
2
3
4
5
6
7
8
9
10
11
12

 public Draw2D(Context context) {
        super(context);
 
        // показ картинки із ресурсів
        Resources res = this.getResources();
        mBitmap = BitmapFactory.decodeResource(res, R.drawable.snake);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

6. Метод OnDraw буде містити  команди малювання. Створіть холст білого кольору:

1
2
3
4
5
6

       // стиль "заливка"
        mPaint.setStyle(Paint.Style.FILL);
 
        // холст білого кольору
        mPaint.setColor(Color.WHITE);
        canvas.drawPaint(mPaint);

7. Намалюйте жовте коло з написом під кутом "Sun":

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

     // малюємо жовте коло
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.YELLOW);
        canvas.drawCircle(300, 30, 25, mPaint);
 
        // текст "сонце" під кутом
        int x = 285;
        int y = 85;
 
        mPaint.setColor(Color.GRAY);
        mPaint.setTextSize(27);
        String str2rotate = "Sun ^_^";
 
        // створюється прямокнутник
        // поворот текста відносно прямокутника
        canvas.rotate(-45, x + mRect.exactCenterX(), y + mRect.exactCenterY());
 
        // пишемо текст
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawText(str2rotate, x, y, mPaint);

8. Намалюйте зелений прямокутник, який імітуватиме траву.

1
2
3

        // зелена "трава"
        mPaint.setColor(Color.GREEN);
        canvas.drawRect(0, 650, 800, 680, mPaint);

9. На попередньому прямокутнику розмістіть ваше зображення і напис(на ваш розсуд).

1
2
3
4
5
6
7
8
9
10
11
12

        // малюємо текст
        mPaint.setColor(Color.BLUE);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAntiAlias(true);
        mPaint.setTextSize(32);
        canvas.drawText("Snake is here", 30, 648, mPaint);
 
        // відновлюємо холст
        canvas.restore();
 
        // показ зображення
        canvas.drawBitmap(mBitmap, 0, 100, mPaint);

10. Запустіть на виконання. Результат(всі змінні бралися під розмір екрану 400х800. Якщо у вашого емулятора інші розміри, то вам необхідно буде підбирати їх самотужки):

Контрольні питання:

1. Як створити новий клас?

2. Як виконується заливка?

3. Як намалювати коло?

4. Як намалювати прямокутник?

Tags: 
графіка
android
java