Canvas-opas 01 | Kuinka käyttää kangasta räpylässä?

0. Mitä me luomme?

Tänään kerron teille, kuinka piirtoalustan avulla piirtää oma muoto - tämä on askel askeleelta-opas, mennään! Ensinnäkin, haluan näyttää sinulle, mitä me luomme!

Kyllä, olet oikeassa, luomme tämän Flutter Open -logon.

1. Koordinaatti tai kuvan koko

Ennen töiden aloittamista meidän pitäisi tietää logon suunnittelupikseli, kuten miten ympyrän koko tai suorakulmion sijainti ja niin edelleen, joten meidän pitäisi tietää, että alla oleva kuva antaa sinulle koordinaatin tai koon tai Muoto, sinun tulisi huomata, että nollapiste on näytön vasemmalla puolella ja kuvan koko on 584 * 648 pikseliä.

Ympyrän muistiinpanot, joiden keskikoordinaatti ja säde ovat.

pyöritä ylöspäin räpytyslogoa pistekoordinaatin avulla

Jos haluat piirtää muodon itse, sinun tulee tehdä tämä itse PS: llä tai muilla kuvanmuokkaustyökaluilla.

Älä myöskään unohda värejä.

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

2. Suunnittelukoko VS-laitteen looginen koko

Kun suunnittelemme muotoa, käytämme vain haluamaamme pikseliä, mutta laitteita, joiden näytön koko on erilainen, on myös niin paljon ja logiikan koko on myös erilainen, joskus laitamme mukautetun muodon vain säilöön, jotta voimme piirtää koon paljon kuin vanhemmat widgetit. Esimerkiksi, tämän logon koko on mallina 548 * 648, mutta looginen koko tämän logon näyttämiseksi on 200 * 400, niin se näkyisi alla:

Katsotaan alla oleva koodi, mitä voimme tehdä tällä

Ensinnäkin meidän pitäisi määritellä util-luokka

tuo 'paketti: räpytys / materiaali.dart';
Tuo 'tikka: matematiikka';
luokka SizeUtil {
  staattinen vakio _DESIGN_WIDTH = 580;
  staattinen vakio _DESIGN_HEIGHT = 648;

  // laitteen logiikan koko
  staattinen koko _logicSize;

  // laitteen kuvapisteradio.

  staattinen get leveys {
    palauta _logicSize.width;
  }

  staattinen get korkeus {
    palauta _logicSize.height;
  }

  staattinen asetettu koko (koko) {
    _logicSize = koko;
  }

  // @ param w on malli w;
  staattinen kaksinkertainen getAxisX (kaksinkertainen w) {
    paluu (w * leveys) / _DESIGN_WIDTH;
  }

// y-suunta
  staattinen kaksinkertainen getAxisY (kaksinkertainen h) {
    paluu (h * korkeus) / _DESIGN_HEIGHT;
  }

  // diagonaalinen suuntaarvo suunnittelukoko s.
  staattinen kaksinkertainen getAxisBoth (tupla) {
    paluu s *
        sqrt ((leveys * leveys + korkeus * korkeus) /
            (_DESIGN_WIDTH * _DESIGN_WIDTH + _DESIGN_HEIGHT * _DESIGN_HEIGHT));
  }
}

Tämän avulla voit muuttaa suunnittelun koon logiikkakokoosi. Toinen vain käytä sitä.Voit aloittaa koon laitteen koon mukaan, mikä tarkoittaa, että piirrät muodon yhtä paljon kuin näyttö, jos et määritä toista kokoa.

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

3. Määritä CustomPainter

Tämä on kaikkein tuontiluokka määrittelemään oma muoto, kaikki muodon looginen piirtäminen on kirjoitettu tähän.

Ensinnäkin luo luokka laajentaa CustomPainter ja luoda maali. Jos koko ei ole pieni kuin 1,0, määritä se loogiseksi kokoksi.

luokan OpenPainter laajentaa CustomPainteria {

@ohittaa
tyhjä maali (kankaalle suunniteltu kangas, koon koko) {
if (koko.leveys> 1.0 && koko.korkeus> 1.0) {
  print ( "> 1.9");
  SizeUtil.size = koko;
}
var maali = maali ()
  ..style = PaintingStyle.fill
  ..väri = SININENNORMALI
  ..isAntiAlias = totta;

}
 @ohittaa
  bool shouldRepaint (CustomPainter oldDelegate) => false;
}

Piirrä sitten Flutter-logo. Mutta ensin meidän pitäisi käyttää ”canvas.drawPath” piirtääksesi neliön.

tyhjä _drawFourShape (piirtoalustan kangas,
    {Offset left_top,
    Offset right_top,
    Offset right_bottom,
    Offset left_bottom,
    Koon koko,
    maali}) {
  left_top = _convertLogicSize (vasen yläosa, koko);
  right_top = _convertLogicSize (oikea_pää, koko);
  right_bottom = _convertLogicSize (oikea alaosa, koko);
  vasen alaosa = _convertLogicSize (vasen alaosa, koko);
  var path1 = Polku ()
    ..moveTo (left_top.dx, left_top.dy)
    ..lineTo (right_top.dx, right_top.dy)
    ..lineTo (oikea_bottom.dx, oikea_bottom.dy)
    ..lineTo (left_bottom.dx, left_bottom.dy);
  canvas.drawPath (polku1, maali);
}

Offset _convertLogicSize (Offset off, koon koko) {
  return Offset (SizeUtil.getAxisX (off.dx), SizeUtil.getAxisY (off.dy));
}

Viimeiseksi piirrämme ympyrät funktion 'maali (kangas, koko)' funktiona.

var circleCenter = Offset (SizeUtil.getAxisX (294), SizeUtil.getAxisY (175));
maali.väri = SININENNORMALI;
canvas.drawCircle (ympyräkeskus, SizeUtil.getAxisBoth (174), maali);
maali.väri = VIHREÄ_NORMALI;
canvas.drawCircle (ympyräkeskus, SizeUtil.getAxisBoth (124), maali);
maali.väri = värit.valkoinen;
canvas.drawCircle (ympyräkeskus, SizeUtil.getAxisBoth (80), maali);

Lopuksi meidän pitäisi pelastaa kangas.

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

4. Käytä OpenPainteria

Määrittelemme OpenPainterin nyt, joten miten voimme käyttää OpenPainteria. Suurin tuontiluokka on CustomPaint. sinun pitäisi käyttää sitä vanhemmanwidgettinä.

CustomPaint (
  maalari: OpenPainter (),
)

Sitten voimme käyttää CustomPaint-sovellusta yleisenä widgetinä osoittaaksemme muotoamme. Kotisivullamme voimme käyttää tätä näin.

Rakennustelineiden (
  appBar: AppBar (
    otsikko: Teksti ("Ensimmäinen kangas"),
  ),
  runko: kontti (
      lapsi: Center (
    lapsi: kontti (
      leveys: 280,
      korkeus: 320,0,
      lapsi: CustomPaint (
        maalari: OpenPainter (),
      ),
    ),
  )),
)

Se näyttää näin.

looginen koko leveys: 280, korkeus: 320,0,

Jos muutamme säilön kokoa, kuten sanomme yli 200 * 400 logiikkakoolle ，, se on hiukan erilainen.

Säiliö (
// leveys: 280,
// korkeus: 320,0,
          leveys: 200,
          korkeus: 400,
          lapsi: CustomPaint (
            maalari: OpenPainter (),
          ),
        )

looginen koko leveys: 200, korkeus: 400,0,

Jos emme määritä kokoa, maali "maalaus (kangas, koko)" -toiminnossa on nolla, sovitamme laitteen koon, tarkistetaan, onko se oikea vai ei, tällä kertaa meidän pitäisi peruuttaa Centerin vanhemmat widgetit. , niin voimme käydä siellä.

Rakennustelineiden (
// appBar: AppBar (
// otsikko: teksti ("ensimmäinen kangas"),
//),
      runko: kontti (
        lapsi: kontti (
// leveys: 280,
// korkeus: 320,0,
          lapsi: CustomPaint (
            maalari: OpenPainter (),
          ),
        ),
      ),
    );

Se on hienoa, että meillä on täydellinen Flutter Open -logo. Tämän on luonut Flutter Open Source -yhteisö. Tankkeja tukea varten.

Koko projekti on täällä: https://github.com/FlutterOpen/flutter-canvas. Jos haluat tai autat vähän, anna minulle tähti GitHubissa.

_______________end________________

Facebook-sivu: https://www.facebook.com/flutteropen

Facebook-ryhmä: https://www.facebook.com/groups/948618338674126/

internautasporlapaz.org