Полотно підручник 01 | Як користуватися полотном у трепеті?

0. Що ми створимо?

Сьогодні я розповім, як за допомогою полотна намалювати власну форму , це покроковий посібник, давайте! По-перше, дозвольте мені показати, що ми створимо!

Логотип Flutter Open

Так, ви праві, ми створимо цей логотип Flutter Open.

1. Координат або Розмір малюнка

Перш ніж розпочати роботу, ми повинні знати піксельну піктограму логотипу, як, наприклад, розмір кола чи положення прямокутника тощо, тому ми повинні знати, що на малюнку нижче буде вказана координата чи розмір або Форма, ви повинні помітити, що нульова точка знаходиться на екрані ліворуч, а зображення - 584 * 648 пікселів.

Ноти кіл із центральною координатою та радіусом.обертання логотипу, що обертається вгору, з точковою координатою

Якщо ви хочете намалювати якусь фігуру самостійно, вам слід зробити це самостійно за допомогою PS або інших інструментів для зміни зображення.

Також не забувайте про кольори.

const BLUE_NORMAL = Колір (0xff54c5f8);
const GREEN_NORMAL = Колір (0xff6bde54);
const BLUE_DARK2 = Колір (0xff01579b);
const BLUE_DARK1 = Колір (0xff29b6f6);

2. Розмір дизайну VS Device Logical Size

Коли ми розробляємо форму, ми просто використовуємо піксель, який нам подобається, але є так багато пристроїв з різним розміром екрана, а логічний розмір також різний, іноді ми просто поміщаємо нашу індивідуальну форму в контейнер, щоб ми могли намалювати розмір як стільки, скільки батьківський віджет. Наприклад, розмір цього логотипу становить 548 * 648 як дизайн, але логічний розмір для відображення цього логотипу дорівнює 200 * 400, тоді він буде показаний як нижче:

Що ми можемо зробити з цим, давайте подивимось код нижче

По-перше, ми повинні визначити клас util

імпорт 'пакет: flutter / material.dart';
імпорт 'dart: математика';
клас SizeUtil {
  статичний const _DESIGN_WIDTH = 580;
  статичний const _DESIGN_HEIGHT = 648;

  // логічний розмір у пристрої
  статичний розмір _logicSize;

  // пристрій піксельної радіо.

  статична ширина отримання {
    return _logicSize.width;
  }

  статична висота отримання {
    return _logicSize.height;
  }

  статичний набір (розмір) {
    _logicSize = розмір;
  }

  // @ param w - конструкція w;
  статичний подвійний getAxisX (подвійний ш) {
    повернення (w * ширина) / _DESIGN_WIDTH;
  }

// напрямок y
  статичний подвійний getAxisY (подвійний h) {
    повернення (h * висота) / _DESIGN_HEIGHT;
  }

  // значення діагонального напрямку з розміром конструкції s.
  статичний подвійний getAxisBoth (double s) {
    повернути s *
        sqrt ((ширина * ширина + висота * висота) /
            (_DESIGN_WIDTH * _DESIGN_WIDTH + _DESIGN_HEIGHT * _DESIGN_HEIGHT));
  }
}

Це дозволить вам змінити розмір дизайну на свій логічний розмір. Другий просто використовуйте його. Ви можете вписати розмір за розміром пристрою, це означає, що ви намалюєте форму стільки ж, скільки і екран, якщо не призначите іншого розміру.

SizeUtil.size = MediaQuery.of (контекст) .size;

3. Визначте CustomPainter

Це найбільш імпортний клас, який визначає нашу власну форму, тут все записано логічне малювання фігури.

По-перше, створення класу розширює CustomPainter і створює фарбу. Якщо розмір не малий 1,0, то призначте його як логічний розмір.

клас OpenPainter розширює CustomPainter {
@override
порожня фарба (полотно полотна, розмір розміру) {
якщо (size.width> 1.0 && size.height> 1.0) {
  друк ("> 1,9");
  SizeUtil.size = розмір;
}
var paint = Фарба ()
  ..style = PaintingStyle.fill
  ..color = BLUE_NORMAL
  ..isAntiAlias ​​= вірно;
}
 @override
  bool shouldRepaint (CustomPainter oldDelegate) => false;
}

Потім намалюйте логотип Flutter. Але спочатку нам слід використати "canvas.drawPath", щоб намалювати чотирикутник.

void _drawFourShape (Полотно полотна,
    {Зсув ліворуч,
    Зсув праворуч,
    Зсув праворуч знизу,
    Зсув ліворуч_низу,
    Розмір,
    фарба}) {
  left_top = _convertLogicSize (left_top, розмір);
  right_top = _convertLogicSize (right_top, розмір);
  right_bottom = _convertLogicSize (right_bottom, size);
  left_bottom = _convertLogicSize (зліва_bottom, розмір);
  var path1 = Шлях ()
    ..moveTo (left_top.dx, left_top.dy)
    ..lineTo (right_top.dx, right_top.dy)
    ..lineTo (right_bottom.dx, right_bottom.dy)
    ..lineTo (зліва_bottom.dx, зліва_bottom.dy);
  canvas.drawPath (шлях1, фарба);
}
Зміщення _convertLogicSize (зміщення вимкнено, розмір) {
  повернути зміщення (SizeUtil.getAxisX (off.dx), SizeUtil.getAxisY (off.dy));
}

Нарешті, ми намалюємо кола у функції "фарба (полотно, розмір)".

var circleCenter = Зсув (SizeUtil.getAxisX (294), SizeUtil.getAxisY (175));
paint.color = BLUE_NORMAL;
canvas.drawCircle (circleCenter, SizeUtil.getAxisBoth (174), фарба);
paint.color = GREEN_NORMAL;
canvas.drawCircle (circleCenter, SizeUtil.getAxisBoth (124), фарба);
paint.color = Colors.white;
canvas.drawCircle (circleCenter, SizeUtil.getAxisBoth (80), фарба);

Нарешті, нам слід зберегти полотно.

canvas.save ();
canvas.restore ();

4. Використовуйте OpenPainter

Тепер ми визначаємо OpenPainter, тож як ми можемо використовувати OpenPainter. Найбільш класом імпорту є CustomPaint. ви повинні використовувати його як батьківський віджет.

CustomPaint (
  художник: OpenPainter (),
)

Тоді ми можемо використовувати CustomPaint як звичайний віджет, щоб показати свою форму. На нашій домашній сторінці ми можемо використовувати це так.

Ліси (
  appBar: AppBar (
    назва: Текст ("Перше полотно"),
  ),
  корпус: контейнер (
      дитина: Центр (
    дитина: контейнер (
      ширина: 280,
      висота: 320,0,
      дитина: CustomPaint (
        художник: OpenPainter (),
      ),
    ),
  )),
)

Це покаже так.

з логічним розміром ширини: 280, висота: 320,0,

Якщо ми змінимо розмір контейнера, як ми говоримо вище 200 * 400, для логічного розміру , це буде трохи інакше.

Контейнер (
// ширина: 280,
// висота: 320,0,
          ширина: 200,
          висота: 400,
          дитина: CustomPaint (
            художник: OpenPainter (),
          ),
        )
з логічним розміром ширини: 200, висота: 400,0,

Якщо ми не встановимо розмір, розмір у функції «фарба (полотно, розмір)» буде нульовим, ми підійдемо до розміру пристрою, давайте перевіримо, правильно чи ні, на цей раз ми повинні скасувати батьківський віджет Центру , то ми можемо його відвідати.

Ліси (
// appBar: AppBar (
// назва: Текст ("Перше полотно"),
//),
      корпус: контейнер (
        дитина: контейнер (
// ширина: 280,
// висота: 320,0,
          дитина: CustomPaint (
            художник: OpenPainter (),
          ),
        ),
      ),
    );
з логічним розміром розміру пристрою

Це добре, ми завершили логотип Flutter Open. Це створено спільнотою Flutter Open source. Танки для вашої підтримки.

Весь проект тут: https://github.com/FlutterOpen/flutter-canvas. Якщо вам подобається чи трохи допомогти вам, будь ласка, дайте мені зірку в GitHub.

_______________end________________

Сторінка Facebook: https://www.facebook.com/flutteropen

Група у Facebook: https://www.facebook.com/groups/948618338674126/