Lærredsvejledning 01 | Hvordan bruges lærredet i flagret?

0. Hvad vi vil oprette?

I dag vil jeg fortælle dig, hvordan du bruger lærredet til at tegne vores egen form , dette er trin for trin-tutorial, lad os gå! Først, lad mig vise dig, hvad vi vil skabe!

Logo for Flutter Open

Ja, du har ret, vi opretter dette logo af Flutter Open.

1. Koordinat eller størrelse på billedet

Inden vi begynder at arbejde, skal vi kende logoets design-pix, såsom hvad med cirkelstørrelsen eller rektanglets placering og så videre, så vi skal vide, nedenstående billede skal du koordinat eller størrelse af eller form, skal du bemærke, at nulpunktet er venstre_top på skærmen, og billedet er 584 * 648 pixel.

Noterne til cirkler med centerkoordinat og radius.det roterende flutterlogo med punktkoordinat

Hvis du selv ønsker at tegne noget form, skal du gøre dette selv med PS eller andre billedmodificeringsværktøjer.

Glem heller ikke farverne.

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

2. Designstørrelse VS Enheds logisk størrelse

Når vi designer formen, bruger vi bare den pixel, vi kan lide, men der er så mange enheder med forskellig skærmstørrelse, og logikstørrelsen er også anderledes, nogle gange lægger vi bare vores tilpassede form i beholderen, så vi kan tegne størrelsen som meget som overordnet widget. For eksempel er størrelsen på dette logo 548 * 648 som design, men den logiske størrelse for at vise dette logo er 200 * 400, så vises det som nedenfor:

Hvad vi kan gøre med dette, lad os se koden nedenfor

Først skal vi definere en util-klasse

import 'pakke: flutter / material.dart';
import 'dart: matematik';
klasse StørrelseUtil {
  statisk const _DESIGN_WIDTH = 580;
  statisk const _DESIGN_HEIGHT = 648;

  // logikstørrelse i enheden
  statisk størrelse _logicSize;

  // enhedens pixelradio.

  statisk få bredde {
    return _logicSize.width;
  }

  statisk få højde {
    return _logicSize.height;
  }

  statisk sæt størrelse (størrelse) {
    _logicSize = størrelse;
  }

  // @ param w er designet w;
  statisk dobbelt getAxisX (dobbelt w) {
    retur (w * bredde) / _DESIGN_WIDTH;
  }

// y-retningen
  statisk dobbelt getAxisY (dobbelt h) {
    retur (h * højde) / _DESIGN_HEIGHT;
  }

  // diagonal retningsværdi med designstørrelse s.
  statisk dobbelt getAxisBoth (dobbelt s) {
    vender tilbage *
        sqrt ((bredde * bredde + højde * højde) /
            (_DESIGN_WIDTH * _DESIGN_WIDTH + _DESIGN_HEIGHT * _DESIGN_HEIGHT));
  }
}

Dette giver dig mulighed for at ændre designstørrelsen til din logikstørrelse. Den anden bruger det bare. Du kan starte størrelsen med enhedens størrelse, det betyder, at du tegner formen lige så meget som skærmen, hvis du ikke tildeler en anden størrelse.

SizeUtil.size = MediaQuery.of (kontekst). Størrelse;

3. Definer CustomPainter

Dette er den mest importklasse, der definerer vores egen form, alt det logiske at tegne form er skrevet her.

Opret først en klasse udvider CustomPainter og opret en maling. Hvis størrelsen ikke er lille end 1,0, skal du tildele den som den logiske størrelse.

klasse OpenPainter udvider CustomPainter {
@override
tomt maling (lærred lærred, størrelse størrelse) {
if (størrelse. bredde> 1,0 && størrelse.højde> 1,0) {
  print ( "> 1,9");
  SizeUtil.size = størrelse;
}
var maling = maling ()
  ..style = PaintingStyle.fill
  ..farve = BLUE_NORMAL
  ..isAntiAlias ​​= sandt;
}
 @override
  bool shouldRepaint (CustomPainter oldDelegate) => falsk;
}

Tegn derefter Flutter-logoet. Men først skal vi bruge 'canvas.drawPath' til at tegne et firkantet.

void _drawFourShape (lærred lærred,
    {Offset left_top,
    Offset højre-top,
    Offset højre_bottom,
    Offset left_bottom,
    Størrelse størrelse,
    maling}) {
  left_top = _convertLogicSize (left_top, størrelse);
  right_top = _convertLogicSize (højre_top, størrelse);
  right_bottom = _convertLogicSize (right_bottom, størrelse);
  left_bottom = _convertLogicSize (left_bottom, størrelse);
  var path1 = Sti ()
    ..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 (sti1, maling);
}
Offset _convertLogicSize (Offset off, Størrelsesstørrelse) {
  return Offset (SizeUtil.getAxisX (off.dx), SizeUtil.getAxisY (off.dy));
}

Til sidst tegner vi cirklerne i funktionen 'maling (lærred, størrelse)'.

var cirkelcenter = Offset (SizeUtil.getAxisX (294), SizeUtil.getAxisY (175));
paint.color = BLUE_NORMAL;
canvas.drawCircle (cirkelcenter, SizeUtil.getAxisBoth (174), maling);
paint.color = GREEN_NORMAL;
canvas.drawCircle (cirkelcenter, SizeUtil.getAxisBoth (124), maling);
paint.color = farver.hvide;
canvas.drawCircle (cirkelcenter, SizeUtil.getAxisBoth (80), maling);

Endelig skal vi gemme lærredet.

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

4. Brug OpenPainter

Vi definerer OpenPainter nu, så hvordan kan vi bruge OpenPainter.Den mest importklasse er CustomPaint. du skal bruge det som en overordnet widget.

CustomPaint (
  maler: OpenPainter (),
)

Derefter kan vi bruge CustomPaint som en fælles widget til at vise vores form. På vores hjemmeside kan vi bruge det sådan.

Stillads(
  appBar: AppBar (
    titel: Tekst ("Første lærred"),
  ),
  karosseri: beholder (
      barn: Center (
    barn: beholder (
      bredde: 280,
      højde: 320,0,
      barn: CustomPaint (
        maler: OpenPainter (),
      ),
    ),
  )),
)

Det vil se sådan ud.

med logisk størrelse på bredden: 280, højde: 320,0,

Hvis vi ændrer størrelsen på containeren, som vi siger over 200 * 400 for en logisk størrelse ,, vil den være lidt anderledes.

Beholder(
// bredde: 280,
// højde: 320,0
          bredde: 200,
          højde: 400,
          barn: CustomPaint (
            maler: OpenPainter (),
          ),
        )
med logisk størrelse på bredden: 200, højde: 400,0,

Hvis vi ikke indstiller størrelsen, vil størrelsen i funktionen 'maling (lærred, størrelse)' være nul, vi passer til enhedens størrelse, lad os kontrollere, om det er rigtigt eller ej, denne gang skal vi annullere den overordnede widget til Center , så kan vi besøge det.

Stillads(
// appBar: AppBar (
// titel: Tekst ("Første lærred"),
//),
      karosseri: beholder (
        barn: beholder (
// bredde: 280,
// højde: 320,0
          barn: CustomPaint (
            maler: OpenPainter (),
          ),
        ),
      ),
    );
med den logiske størrelse på enhedens størrelse

Det er rart, vi har færdiggjort logoet for Flutter Open. Dette er oprettet af Flutter Open source-community. Tank til din støtte.

Hele projektet er her: https://github.com/FlutterOpen/flutter-canvas. Hvis du kan lide eller hjælpe dig lidt, skal du give mig en stjerne i GitHub.

_______________ende________________

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

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