Vodič za platno 01 | Kako uporabljati platno v plapolanju?

0. Kaj bomo ustvarili?

Danes vam bom povedal, kako lahko s platnom narišemo svojo obliko , to je korak za korakom vadnica, gremo naprej! Najprej naj vam pokažem, kaj bomo ustvarili!

Logotip Flutter Open

Ja, prav imate, ustvarili bomo ta logotip Flutter Open.

1. Koordinata ali velikost slike

Preden začnemo z delom, bi morali vedeti oblikovalsko piko logotipa, na primer, kakšna je velikost kroga ali položaj pravokotnika in tako naprej, tako da bi morali vedeti, spodaj na sliki bo vaša koordinata ali velikost oz. Oblika, morate opaziti, da je na zaslonu ničelna točka levo-zgoraj, slika pa 584 * 648 slikovnih pik.

Opombe krogov s sredinsko koordinato in polmerom.zasukajoč se logotip leteče navzgor s koordinato točke

Če želite sami narisati neko obliko, to storite sami s PS ali drugimi orodji za spreminjanje slik.

Ne pozabite tudi na barve.

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

2. Oblikovna velikost VS naprave Logična velikost

Ko oblikujemo obliko, uporabimo samo slikovno piko, ki pa nam je všeč, vendar je toliko naprav z različnimi velikostmi zaslona in logična velikost je tudi drugačna, včasih preprosto postavimo svojo prilagojeno obliko v posodo, da lahko narišemo velikost kot toliko kot staršev pripomoček. Na primer, velikost tega logotipa je 548 * 648 kot zasnova, vendar je logična velikost tega logotipa 200 * 400, potem bi bil prikazan kot spodaj:

Kaj lahko storimo s tem, si oglejmo spodnjo kodo

Najprej bi morali določiti razred util

import 'paket: flutter / material.dart';
uvoz 'dart: matematika';
razred SizeUtil {
  statični const _DESIGN_WIDTH = 580;
  statični const _DESIGN_HEIGHT = 648;

  // velikost logike v napravi
  statična velikost _logicSize;

  // radio pik na napravi.

  statična širina pridobivanja {
    return _logicSize.width;
  }

  statična višina
    return _logicSize.height;
  }

  statična nastavljena velikost (velikost) {
    _logicSize = velikost;
  }

  // @ param w je zasnova w;
  statični dvojni getAxisX (dvojni w) {
    vrnitev (š * širina) / _DESIGN_WIDTH;
  }

// smer y
  statični dvojni getAxisY (dvojni h) {
    vrnitev (h * višina) / _DESIGN_HEIGHT;
  }

  // vrednost diagonalne smeri z velikostjo zasnove s.
  statični dvojni getAxisBoth (dvojni s) {
    vrne s *
        sqrt ((širina * širina + višina * višina) /
            (_DESIGN_WIDTH * _DESIGN_WIDTH + _DESIGN_HEIGHT * _DESIGN_HEIGHT));
  }
}

Tako boste lahko spremenili velikost zasnove na svojo logično velikost. Drugi samo uporabite. Velikost lahko vstavite z velikostjo naprave, kar pomeni, da oblikujete obliko toliko kot zaslon, če ne določite druge velikosti.

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

3. Določite CustomPainter

To je najbolj uvozni razred za definiranje lastne oblike, tukaj je zapisano vse logično za risanje oblike.

Najprej ustvarite razred podaljša CustomPainter in ustvarite barvo. Če velikost ni manjša od 1,0, jo dodelite kot logično velikost.

razred OpenPainter razširi CustomPainter {
@override
prazne barve (platno, platno, velikost) {
če (size.width> 1.0 && size.height> 1.0) {
  tisk ("> 1,9");
  SizeUtil.size = velikost;
}
var lak = barva ()
  ..style = PaintingStyle.fill
  ..barva = BLUE_NORMAL
  ..isAntiAlias ​​= res;
}
 @override
  bool najRepaint (CustomPainter oldDelegate) => false;
}

Nato narišite logotip Flutter. Najprej bi morali uporabiti 'canvas.drawPath', da narišemo štirikotnik.

void _drawFourShape (platno s platnom,
    {Pobota levo zgoraj,
    Poravnaj desno_top,
    Poravnava desno_bono,
    Poravnava levo_bottom,
    Velikost velikosti,
    barve}) {
  left_top = _convertLogicSize (left_top, velikost);
  right_top = _convertLogicSize (desno_top, velikost);
  right_bottom = _convertLogicSize (desno_bottom, velikost);
  left_bottom = _convertLogicSize (left_bottom, velikost);
  var path1 = Pot ()
    ..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 (pot1, barva);
}
Offset _convertLogicSize (Offset off, velikost velikosti) {
  vrnitev odmik (SizeUtil.getAxisX (off.dx), SizeUtil.getAxisY (off.dy));
}

Nazadnje bomo narisali kroge v funkciji "barve (platno, velikost)".

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

Končno bi morali shraniti platno.

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

4. Uporabite OpenPainter

Zdaj definiramo OpenPainter, kako lahko uporabimo OpenPainter. Najbolj uvozni razred je CustomPaint. bi ga morali uporabiti kot nadrejeni pripomoček.

CustomPaint (
  slikar: OpenPainter (),
)

Potem lahko uporabimo CustomPaint kot običajen pripomoček, da pokažemo svojo obliko. Na svoji domači strani lahko to uporabimo takole.

Odri (
  appBar: AppBar (
    naslov: Besedilo ("Prvo platno"),
  ),
  telo: posoda (
      otrok: Center (
    otrok: posoda (
      širina: 280,
      višina: 320,0,
      otrok: CustomPaint (
        slikar: OpenPainter (),
      ),
    ),
  )),
)

Pokazalo se bo tako.

z logično velikostjo širine: 280, višina: 320,0,

Če spremenimo velikost posode, kot rečemo nad 200 * 400, za logično velikost , bo nekoliko drugače.

Posoda (
// širina: 280,
// višina: 320,0,
          širina: 200,
          višina: 400,
          otrok: CustomPaint (
            slikar: OpenPainter (),
          ),
        )
z logično velikostjo širine: 200, višina: 400,0,

Če ne nastavimo velikosti, bo velikost v funkciji 'barve (platno, velikost)' enaka nič, ustrezali bomo velikosti naprave, preverimo, ali je pravilno ali ne, tokrat bi morali preklicati nadrejeni widget centra , potem ga lahko obiščemo.

Odri (
// appBar: AppBar (
// naslov: Besedilo ("Prvo platno"),
//),
      telo: posoda (
        otrok: posoda (
// širina: 280,
// višina: 320,0,
          otrok: CustomPaint (
            slikar: OpenPainter (),
          ),
        ),
      ),
    );
z logično velikostjo velikosti naprave

Lepo, popoln je logotip Flutter Open. To ustvari Flutter Open source skupnost. Cisterne za vašo podporo.

Celoten projekt je tukaj: https://github.com/FlutterOpen/flutter-canvas. Če vam je všeč ali vam malce pomaga, mi prosim dajte zvezdico v GitHubu.

_______________end________________

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

Facebook skupina: https://www.facebook.com/groups/948618338674126/