Vászon bemutató 01 | Hogyan lehet a vászont használni a csapkodásban?

0. Mit fogunk létrehozni?

Ma elmondom, hogyan kell a vászon segítségével saját alakját felhívni , lépésről lépésre bemutató, menjünk! Először hadd mutassam meg, mit fogunk készíteni!

A Flutter Open logója

Igen, igazad van, létrehozzuk a Flutter Open ezt a logót.

1. A kép koordinátája vagy mérete

Mielőtt elkezdenénk a munkát, meg kell ismernünk a logó kialakításának pixeljét, például hogy mi lenne a körmérettel, vagy a téglalap helyzetével és így tovább, tehát tudnunk kell, hogy az alábbi képen látható, ha a alak, akkor észre kell vennie, hogy a nulla pont a képernyő bal oldalán van, és a kép mérete 584 * 648 pixel.

A körök jegyzetei középső koordinátával és sugarakkal.a felfelé csapkodó logó pont koordinátájával történő elforgatása

Ha önmagát szeretne rajzolni valamilyen formában, akkor ezt önmagában is meg kell tennie a PS vagy más képmódosító eszköz segítségével.

Ne felejtse el a színeket sem.

const BLUE_NORMAL = Szín (0xff54c5f8);
const GREEN_NORMAL = Szín (0xff6bde54);
const BLUE_DARK2 = Szín (0xff01579b);
const BLUE_DARK1 = Szín (0xff29b6f6);

2. Tervezési méret VS eszköz logikai mérete

Az alak tervezésekor csak a tetszőleges képpontot használjuk, de nagyon sok olyan eszköz van, amelynek képernyő mérete eltérő, és a logikai méret is különbözik, néha csak testreszabott alakjainkat helyezzük a tartályba, így a ugyanúgy, mint a szülő widget. Például ennek a logónak a mérete 548 * 648, de a logó logikai mérete 200 * 400, az alábbiak szerint jelenik meg:

Mit tehetünk ezzel, lássuk az alábbi kódot

Először meg kell határoznunk egy util osztályt

import „csomag: csapkodás / anyag.dart”;
importáljon „dart: math”;
osztály SizeUtil {
  statikus érték _DESIGN_WIDTH = 580;
  statikus érték _DESIGN_HEIGHT = 648;

  // logikai méret az eszközben
  statikus méret _logicSize;

  // eszköz pixel rádió.

  statikus kapaszkodási szélesség {
    return _logicSize.width;
  }

  statikus kapási magasság {
    return _logicSize.height;
  }

  statikus készletméret (méret) {
    _logicSize = méret;
  }

  // @ param w a w tervezés;
  statikus dupla getAxisX (dupla w) {
    visszatérés (szélesség *) / _DESIGN_WIDTH;
  }

// az y irány
  statikus kettős getAxisY (dupla h) {
    visszatérés (h * magasság) / _DESIGN_HEIGHT;
  }

  // átlós irányérték s tervezési mérettel.
  statikus dupla getAxisBoth (dupla s) {
    visszatérés *
        sqrt ((szélesség * szélesség + magasság * magasság) /
            (_DESIGN_WIDTH * _DESIGN_WIDTH + _DESIGN_HEIGHT * _DESIGN_HEIGHT));
  }
}

Ez lehetővé teszi a tervezési méret megváltoztatását a logikai méretre. A második csak azt használja. A méretet az eszköz méretével kezdeményezheti, vagyis annyit rajzol az alakja, mint a képernyő, ha nem ad hozzá másik méretet.

SizeUtil.size = MediaQuery.of (kontextus) .size;

3. Definiálja a CustomPainter alkalmazást

Ez a legimportosabb osztály, amely meghatározza a saját alakunkat, az összes alak rajzolásához szükséges logika itt van írva.

Először hozzon létre egy osztályt, amely kiterjeszti a CustomPainter alkalmazást, és hozzon létre egy festéket. Ha a méret nem kisebb, mint 1,0, akkor rendelje hozzá logikai méretként.

osztály OpenPainter kiterjeszti a CustomPainter {
@override
üres festék (vászon, vászon, méret) {
if (méret.szélesség> 1.0 és&&méret.magasság> 1.0) {
  print ( "> 1,9");
  SizeUtil.size = méret;
}
var paint = Festék ()
  ..style = PaintingStyle.fill
  ..color = BLUE_NORMAL
  ..isAntiAlias ​​= igaz;
}
 @override
  bool shouldRepaint (CustomPainter oldDelegate) => false;
}

Ezután rajzolja a Flutter logót. De először a 'canvas.drawPath' -t kell használnunk négyszög rajzolására.

void _drawFourShape (vászon,
    {Offset left_top,
    Eltolás jobbra,
    Ellentétes a jobb alsó,
    Eltolás a bal alsó,
    Méret méret,
    festék}) {
  left_top = _convertLogicSize (bal felső, méret);
  right_top = _convertLogicSize (jobb felső, méret);
  right_bottom = _convertLogicSize (jobb alsó, méret);
  left_bottom = _convertLogicSize (bal alsó, méret);
  var path1 = Útvonal ()
    ..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 (1. út, festék);
}
Ofszet _convertLogicSize (Eltolás off, méret) {
  visszatérési eltolás (SizeUtil.getAxisX (off.dx), SizeUtil.getAxisY (off.dy));
}

Végül felhívjuk a köröket a 'festék (vászon, méret)' függvényében.

var circleCenter = Eltolás (SizeUtil.getAxisX (294), SizeUtil.getAxisY (175));
paint.color = BLUE_NORMAL;
canvas.drawCircle (circleCenter, SizeUtil.getAxisBoth (174), festék);
paint.color = GREEN_NORMAL;
canvas.drawCircle (circleCenter, SizeUtil.getAxisBoth (124), festék);
paint.color = Colors.white;
canvas.drawCircle (circleCenter, SizeUtil.getAxisBoth (80), festék);

Végül meg kell mentenünk a vászont.

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

4. Használja az OpenPainter alkalmazást

Az OpenPainter-t most definiáljuk, tehát hogyan lehet használni az OpenPainter-t. A legtöbb importálási osztály a CustomPaint. szülő widgetként kell használni.

CustomPaint (
  festő: OpenPainter (),
)

Ezután használhatjuk a CustomPaint-t általános widgetként az alak megjelenítéséhez. Honlapunkon ezt így használhatjuk.

Állvány(
  appBar: AppBar (
    cím: Szöveg ("Első vászon"),
  ),
  karosszéria: konténer (
      gyerek: Központ (
    gyerek: konténer (
      szélesség: 280,
      magasság: 320,0,
      gyermek: CustomPaint (
        festő: OpenPainter (),
      ),
    ),
  )),
)

Ilyen lesz.

logikai mérettel: szélesség: 280, magasság: 320,0,

Ha megváltoztatjuk a tároló méretét, amint azt a logikai méret size 200 * 400 felett mondjuk ,, akkor kicsit más lesz.

Tartály(
// szélesség: 280,
// magasság: 320,0,
          szélesség: 200,
          magasság: 400,
          gyermek: CustomPaint (
            festő: OpenPainter (),
          ),
        )
logikai mérettel: szélesség: 200, magasság: 400,0,

Ha nem állítottuk be a méretet, akkor a 'festék (vászon, méret)' függvényben a méret nulla lesz, illeszkedünk az eszköz méretéhez, ellenőrizzük, hogy helyes-e vagy sem, ezúttal töröljük a Center szülő widgetjét , akkor meglátogathatjuk.

Állvány(
// appBar: AppBar (
// cím: Szöveg ("Első vászon"),
//),
      karosszéria: konténer (
        gyerek: konténer (
// szélesség: 280,
// magasság: 320,0,
          gyermek: CustomPaint (
            festő: OpenPainter (),
          ),
        ),
      ),
    );
az eszköz méretének logikai méretével

Nagyon szép, megvan a Flutter Open logója. Ezt a Flutter nyílt forráskódú közösség hozta létre. Tartályok a támogatásához.

A teljes projekt itt található: https://github.com/FlutterOpen/flutter-canvas. Ha tetszik vagy valamiben segít neked, kérlek, adj nekem egy csillagot a GitHub-ban.

_______________end________________

Facebook oldal: https://www.facebook.com/flutteropen

Facebook-csoport: https://www.facebook.com/groups/948618338674126/