Samouczek na płótnie 01 | Jak korzystać z płótna w trzepotu?

0. Co stworzymy?

Dzisiaj powiem ci, jak korzystać z płótna, aby narysować własny kształt, to jest samouczek krok po kroku, chodźmy! Najpierw pozwól, że pokażę ci, co stworzymy!

Logo Flutter Open

Tak, masz rację, stworzymy logo Flutter Open.

1. Współrzędna lub rozmiar obrazu

Zanim zaczniemy pracę, powinniśmy zapoznać się z pikselami projektowymi logo, takimi jak rozmiar koła lub położenie prostokąta itd., Więc powinniśmy wiedzieć, że poniższe zdjęcie powinno określić współrzędną lub rozmiar kształt, należy zauważyć, że punkt zerowy jest left_top na ekranie i obraz ma 584 * 648 pikseli.

Nuty kół o współrzędnej środkowej i promieniu.logo trzepotania w górę ze współrzędną punktową

Jeśli chcesz narysować jakiś kształt sam, powinieneś zrobić to sam z PS lub innymi narzędziami do modyfikacji obrazu.

Nie zapomnij też o kolorach.

const BLUE_NORMAL = Kolor (0xff54c5f8);
const GREEN_NORMAL = Kolor (0xff6bde54);
const BLUE_DARK2 = Kolor (0xff01579b);
const BLUE_DARK1 = Kolor (0xff29b6f6);

2. Rozmiar projektu a rozmiar logiczny urządzenia

Projektując kształt, używamy po prostu piksela, który nam się podoba, ale jest tak wiele urządzeń o różnej wielkości ekranu, a rozmiar logiki jest również inny, czasami po prostu umieszczamy niestandardowy kształt w pojemniku, abyśmy mogli narysować rozmiar jako podobnie jak widżet nadrzędny. Na przykład rozmiar tego logo to 548 * 648 jako projekt, ale logiczny rozmiar, aby pokazać to logo to 200 * 400, to będzie wyglądać jak poniżej:

Co możemy z tym zrobić, zobaczmy kod poniżej

Po pierwsze, powinniśmy zdefiniować klasę util

import „package: flutter / material.dart”;
importuj „dart: matematyka”;
klasa Rozmiar Do {
  static const _DESIGN_WIDTH = 580;
  static const _DESIGN_HEIGHT = 648;

  // rozmiar logiki w urządzeniu
  rozmiar statyczny _logicSize;

  // radio pikselowe urządzenia.

  statyczna szerokość pobierania {
    return _logicSize.width;
  }

  wysokość statyczna {
    return _logicSize.height;
  }

  rozmiar zestawu statycznego (rozmiar) {
    _logicSize = rozmiar;
  }

  // @ param w jest projektem w;
  static double getAxisX (double w) {
    return (w * szerokość) / _DESIGN_WIDTH;
  }

// kierunek y
  static double getAxisY (double h) {
    return (h * wysokość) / _DESIGN_HEIGHT;
  }

  // wartość kierunku przekątnego z rozmiarem projektowym s.
  static double getAxisBoth (double s) {
    zwroty *
        sqrt ((szerokość * szerokość + wysokość * wysokość) /
            (_DESIGN_WIDTH * _DESIGN_WIDTH + _DESIGN_HEIGHT * _DESIGN_HEIGHT));
  }
}

Umożliwi to zmianę rozmiaru projektu na rozmiar logiki. Drugi wystarczy go użyć. Możesz zainicjować rozmiar z rozmiarem urządzenia, co oznacza, że ​​narysujesz kształt tak samo jak ekran, jeśli nie przypiszesz innego rozmiaru.

SizeUtil.size = MediaQuery.of (kontekst). Rozmiar;

3. Zdefiniuj CustomPainter

Jest to najbardziej ważna klasa do zdefiniowania własnego kształtu, tutaj zapisana jest cała logika rysowania kształtu.

Po pierwsze, stwórz klasę CustomPainter i utwórz farbę. Jeśli rozmiar nie jest mniejszy niż 1,0, przypisz go jako rozmiar logiczny.

klasa OpenPainter rozszerza CustomPainter {
@nadpisanie
pusta farba (płótno, rozmiar w rozmiarze) {
if (size.width> 1.0 && size.height> 1.0) {
  drukuj („> 1.9”);
  SizeUtil.size = rozmiar;
}
var paint = Paint ()
  ..style = PaintingStyle.fill
  ..kolor = NIEBIESKI_ORMALNY
  ..isAntiAlias ​​= true;
}
 @nadpisanie
  bool powinienRepaint (CustomPainter oldDelegate) => false;
}

Następnie narysuj logo Flutter. Ale najpierw powinniśmy użyć „canvas.drawPath”, aby narysować czworokąt.

void _drawFourShape (płótno na płótnie,
    {Offset left_top,
    Offset right_top,
    Offset right_bottom,
    Offset left_bottom,
    Rozmiar rozmiar,
    malować}) {
  left_top = _convertLogicSize (left_top, rozmiar);
  right_top = _convertLogicSize (right_top, size);
  right_bottom = _convertLogicSize (prawy_dół, rozmiar);
  left_bottom = _convertLogicSize (left_bottom, size);
  var path1 = Path ()
    ..moveTo (left_top.dx, left_top.dy)
    ..lineTo (right_top.dx, right_top.dy)
    ..lineTo (right_bottom.dx, right_bottom.dy)
    ..lineTo (left_bottom.dx, left_bottom.dy);
  canvas.drawPath (ścieżka 1, farba);
}
Offset _convertLogicSize (Offset, rozmiar Rozmiar) {
  return Offset (SizeUtil.getAxisX (off.dx), SizeUtil.getAxisY (off.dy));
}

Na koniec narysujemy koła w funkcji „farby (płótno, rozmiar)”.

var circleCenter = Offset (SizeUtil.getAxisX (294), SizeUtil.getAxisY (175));
paint.color = BLUE_NORMAL;
canvas.drawCircle (circleCenter, SizeUtil.getAxisBoth (174), farba);
paint.color = GREEN_NORMAL;
canvas.drawCircle (circleCenter, SizeUtil.getAxisBoth (124), farba);
paint.color = Colors.white;
canvas.drawCircle (circleCenter, SizeUtil.getAxisBoth (80), farba);

Wreszcie powinniśmy zapisać płótno.

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

4. Użyj OpenPainter

Definiujemy teraz OpenPainter, więc jak możemy korzystać z OpenPainter. Najbardziej importowaną klasą jest CustomPaint. powinieneś używać go jako widżetu nadrzędnego.

CustomPaint (
  malarz: OpenPainter (),
)

Następnie możemy użyć CustomPaint jako wspólnego widżetu do pokazania naszego kształtu. Na naszej stronie głównej możemy użyć tego w ten sposób.

Szafot(
  appBar: AppBar (
    tytuł: Tekst („Pierwsze płótno”),
  ),
  body: Container (
      dziecko: Centrum (
    dziecko: Kontener (
      szerokość: 280,
      wysokość: 320,0,
      dziecko: CustomPaint (
        malarz: OpenPainter (),
      ),
    ),
  )),
)

Pokaże się tak.

o logicznym rozmiarze szerokości: 280, wysokości: 320,0,

Jeśli zmienimy rozmiar kontenera, jak mówimy powyżej 200 * 400 dla wielkości logicznej, będzie nieco inaczej.

Pojemnik(
// szerokość: 280,
// wysokość: 320,0,
          szerokość: 200,
          wysokość: 400,
          dziecko: CustomPaint (
            malarz: OpenPainter (),
          ),
        )
o logicznym rozmiarze szerokości: 200, wysokości: 400,0,

Jeśli nie ustawimy rozmiaru, rozmiar w funkcji „malowanie (płótno, rozmiar)” wyniesie zero, dopasujemy rozmiar urządzenia, sprawdźmy, czy jest poprawny, czy nie, tym razem powinniśmy anulować nadrzędny widżet Centrum , wtedy możemy to odwiedzić.

Szafot(
// appBar: AppBar (
// title: Text („First Canvas”),
//),
      body: Container (
        dziecko: Kontener (
// szerokość: 280,
// wysokość: 320,0,
          dziecko: CustomPaint (
            malarz: OpenPainter (),
          ),
        ),
      ),
    );
z logicznym rozmiarem wielkości urządzenia

Fajnie, uzupełniliśmy logo Flutter Open. Jest to tworzone przez społeczność Open Source Flutter. Czołgi za wsparcie.

Cały projekt jest tutaj: https://github.com/FlutterOpen/flutter-canvas. Jeśli Ci się podoba lub pomogłeś, daj mi gwiazdkę w GitHub.

_______________koniec________________

Strona na Facebooku: https://www.facebook.com/flutteropen

Grupa na Facebooku: https://www.facebook.com/groups/948618338674126/