Lõuendi õpetus 01 | Kuidas kasutada lõuendit laperdamisel?

0. Mida me loome?

Täna ütlen teile, kuidas kasutada lõuendit oma kuju joonistamiseks , see on samm-sammult õpetus, lähme! Esiteks lubage mul näidata teile, mida me loome!

Flutter logo on avatud

Jah, teil on õigus, loome selle Flutter Open logo.

1. Pildi koordinaat või suurus

Enne töö alustamist peaksime teadma logo kujundlikku pikslit, näiteks kuidas oleks umbes ringi suurus või ristküliku asukoht ja nii edasi, nii et peaksime teadma, et allpool olev pilt peaks teile näitama koordinaadi või suuruse või kuju, peaksite tähele panema, et nullpunkt on ekraanil vasakul_top ja pildi suurus on 584 * 648 pikslit.

Keskmise koordinaadi ja raadiusega ringide märkused.pöörake ülespoole sirutuvat logo punkti koordinaadiga

Kui soovite ise mingi kuju joonistada, peaksite seda tegema ise PS-i või muude pildi muutmise tööriistade abil.

Ärge unustage ka värve.

const BLUE_NORMAL = värv (0xff54c5f8);
const GREEN_NORMAL = värv (0xff6bde54);
const BLUE_DARK2 = värv (0xff01579b);
const BLUE_DARK1 = värv (0xff29b6f6);

2. Kujunduse suurus VS-seadme loogiline suurus

Kuju kujundamisel kasutame lihtsalt pikslit, mis meile meeldib, kuid erineva ekraanisuurusega seadmeid on nii palju ja ka loogika suurus on erinev, mõnikord paneme lihtsalt kohandatud kuju konteinerisse, et saaksime selle suuruse joonistada sama palju kui vanemvidin. Näiteks on selle logo kujundus kujundusena 548 * 648, kuid selle logo kuvamiseks on loogiline suurus 200 * 400, siis näitaks see järgmist:

Vaatame allolevat koodi, mida me selle abil teha saame

Esiteks peaksime määratlema util klassi

import 'pakett: laperdus / materjal.dart';
impordi 'noolemäng: matemaatika';
klass SizeUtil {
  staatiline konstants _DESIGN_WIDTH = 580;
  staatiline konstants _DESIGN_HEIGHT = 648;

  // loogika suurus seadmes
  staatiline suurus _logicSize;

  // seadme piksliraadio.

  staatiline saada laius {
    return _logicSize.width;
  }

  staatiline saada kõrgus {
    tagasi _logicSize.height;
  }

  staatiline komplekti suurus (suurus) {
    _logicSize = suurus;
  }

  // @ param w on kujundus w;
  staatiline topelt getAxisX (topelt w) {
    tagasi (w * laius) / _DESIGN_WIDTH;
  }

// y-suund
  staatiline topelt getAxisY (topelt h) {
    tagasi (h * kõrgus) / _DESIGN_HEIGHT;
  }

  // diagonaalse suuna väärtus konstruktsiooni suurusega s.
  staatiline topelt getAxisBoth (topelt s) {
    tagasi s *
        sqrt ((laius * laius + kõrgus * kõrgus) /
            (_DESIGN_WIDTH * _DESIGN_WIDTH + _DESIGN_HEIGHT * _DESIGN_HEIGHT));
  }
}

See võimaldab teil muuta kujunduse suuruse oma loogika suuruseks. Teine lihtsalt kasutage seda. Võite suuruse algatada seadme suurusega, see tähendab, et kui te ei määra teist suurust, joonistate kuju sama palju kui ekraan.

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

3. Defineerige CustomPainter

See on kõige olulisem klass meie enda kuju määratlemiseks, kõik loogiline kuju joonistamine on kirjutatud siia.

Esiteks looge klass laiendab CustomPainterit ja looge värv. Kui suurus pole siis väike kui 1,0, määrake see loogiliseks suuruseks.

klassi OpenPainter laiendab CustomPainterit {
@ ületamine
tühi värv (lõuend lõuend, suuruse suurus) {
if (suurus.laius> 1.0 && suurus.kõrgus> 1.0) {
  print ("> 1,9");
  SizeUtil.size = suurus;
}
var paint = Paint ()
  ..style = PaintingStyle.fill
  ..värv = SININE_NORMALNE
  ..isAntiAlias ​​= tõsi;
}
 @ ületamine
  bool shouldRepaint (CustomPainter oldDelegate) => false;
}

Seejärel joonistage Flutteri logo. Kuid kõigepealt peaksime nelinurga joonistamiseks kasutama lõiku canvas.drawPath.

tühine _drawFourShape (lõuendi lõuend,
    {Offset left_top,
    Parempoolne nihe,
    Parempoolne nihkumine alt,
    Nihe vasakult alt,
    Suuruse suurus,
    värv}) {
  left_top = _convertLogicSize (left_top, size);
  right_top = _convertLogicSize (right_top, size);
  right_bottom = _convertLogicSize (parem_ põhi, suurus);
  left_bottom = _convertLogicSize (vasakpoolne, alumine, suurus);
  var path1 = tee ()
    ..moveTo (left_top.dx, left_top.dy)
    ..lineTo (right_top.dx, right_top.dy)
    ..lineTo (right_bottom.dx, right_bottom.dy)
    ..lineTo (vasak_bottom.dx, vasak_bottom.dy);
  canvas.drawPath (tee1, värv);
}
Offset _convertLogicSize (ofset off, size size) {
  return Offset (SizeUtil.getAxisX (off.dx), SizeUtil.getAxisY (off.dy));
}

Viimasena joonistame ringid funktsioonis 'maal (lõuend, suurus)'.

var circleCenter = nihe (SizeUtil.getAxisX (294), SizeUtil.getAxisY (175));
värv.värv = SININE_NORMAL;
canvas.drawCircle (ringCenter, SizeUtil.getAxisBoth (174), värv);
paint.color = GREEN_NORMAL;
canvas.drawCircle (ringCenter, SizeUtil.getAxisBoth (124), värv);
värv.värv = värvid.valge;
canvas.drawCircle (ringCenter, SizeUtil.getAxisBoth (80), värv);

Lõpuks peaksime lõuendi salvestama.

lõuend.save ();
lõuend.restore ();

4. Kasutage OpenPainterit

Me määratleme OpenPaineri nüüd, kuidas saaksime OpenPainterit kasutada. Kõige impordiklass on CustomPaint. peaksite seda kasutama vanemvidinana.

CustomPaint (
  maalija: OpenPainter (),
)

Siis saame kohandatud vidinat kasutada oma kujundi näitamiseks ühise vidinaga. Meie avalehel saame seda niimoodi kasutada.

Tellingud (
  appBar: AppBar (
    pealkiri: tekst ("Esimene lõuend"),
  ),
  korpus: konteiner (
      laps: Keskus (
    laps: konteiner (
      laius: 280,
      kõrgus: 320,0,
      laps: CustomPaint (
        maalija: OpenPainter (),
      ),
    ),
  )),
)

Seda näidatakse niimoodi.

loogilise suurusega laius: 280, kõrgus: 320,0,

Kui muudame konteineri suurust, nagu me ütleme loogika suuruse korral üle 200 * 400, on see natuke erinev.

Konteiner (
// laius: 280,
// kõrgus: 320,0,
          laius: 200,
          kõrgus: 400,
          laps: CustomPaint (
            maalija: OpenPainter (),
          ),
        )
loogilise suurusega laius: 200, kõrgus: 400,0,

Kui me suurust ei määra, on funktsiooni 'maal (lõuend, suurus)' suurus null, sobitame seadme suuruse, kontrollime, kas see on õige või mitte, peaksime seekord tühistama keskuse vanemate vidina , siis saame seda külastada.

Tellingud (
// appBar: AppBar (
// pealkiri: tekst ("Esimene lõuend"),
//),
      korpus: konteiner (
        laps: konteiner (
// laius: 280,
// kõrgus: 320,0,
          laps: CustomPaint (
            maalija: OpenPainter (),
          ),
        ),
      ),
    );
koos seadme suuruse loogilise suurusega

See on tore, et meil on täielik Flutter Open logo. Selle on loonud avatud lähtekoodiga kogukond Flutter. Mahutid teie toetuseks.

Kogu projekt on siin: https://github.com/FlutterOpen/flutter-canvas. Kui teile meeldib või aitab teid natuke, palun andke mulle GitHubis täht.

_______________lõpp________________

Facebooki leht: https://www.facebook.com/flutteropen

Facebooki grupp: https://www.facebook.com/groups/948618338674126/