Audekla apmācība 01 | Kā audekls tiek izmantots plankumā?

0. Ko mēs izveidosim?

Šodien es jums pastāstīšu, kā audekls jāizmanto mūsu pašu formas noformēšanai , šī ir soli pa solim apmācība, iesim! Pirmkārt, ļaujiet man parādīt, ko mēs radīsim!

Flutter Open logotips

Jā, jums taisnība, mēs izveidosim šo Flutter Open logotipu.

1. Attēla koordināta vai izmērs

Pirms darba uzsākšanas mums jāzina logotipa noformējuma pikseļi, piemēram, kā ir riņķa līnijas izmērs vai taisnstūra novietojums utt., Tāpēc mums vajadzētu zināt, ka zemāk esošajā attēlā būs redzama logotipa vai formas, jums vajadzētu ņemt vērā, ka nulles punkts ir ekrāna kreisajā pusē un attēls ir 584 * 648 pikseļi.

Apļu piezīmes ar centra koordinātu un rādiusu.pagrieziet augšup plandīšanās logotipu ar punkta koordinātu

Ja vēlaties pats uzzīmēt kādu formu, tas jādara pats ar PS vai citiem attēlu pārveidošanas rīkiem.

Tāpat neaizmirstiet krāsas.

const BLUE_NORMAL = krāsa (0xff54c5f8);
const GREEN_NORMAL = krāsa (0xff6bde54);
const BLUE_DARK2 = krāsa (0xff01579b);
const BLUE_DARK1 = krāsa (0xff29b6f6);

2. Projektēšanas izmērs VS ierīces loģiskais izmērs

Projektējot formu, mēs vienkārši izmantojam pikseļu, kas mums patīk, taču ir tik daudz ierīču ar atšķirīgu ekrāna izmēru, un arī loģikas lielums ir atšķirīgs, dažreiz mēs vienkārši ievietojam pielāgoto formu traukā, lai izmēru varētu uzzīmēt kā tāpat kā vecāku logrīks. Piemēram, šī logotipa izmērs ir 548 * 648 kā dizains, bet šī logotipa loģiskais lielums ir 200 * 400, tad tas parādīsies šādi:

Ko mēs ar to varam darīt, redzēsim zemāk redzamo kodu

Pirmkārt, mums jādefinē util klase

importa 'iepakojums: plandīšanās / material.dart';
importēt 'šautriņas: matemātika';
klase SizeUtil {
  statiskā const _DESIGN_WIDTH = 580;
  statiskā const _DESIGN_HEIGHT = 648;

  // loģikas lielums ierīcē
  statisks Izmērs _logicSize;

  // ierīces pikseļu radio.

  statiskā iegūt platumu {
    atgriešanās _logicSize.width;
  }

  statisks iegūt augstumu {
    atgriezties _logicSize.height;
  }

  statiskā kopas lielums (lielums) {
    _logicSize = lielums;
  }

  // @ param w ir dizains w;
  statiskā dubultā getAxisX (dubultā w) {
    atgriešanās (w * platums) / _DESIGN_WIDTH;
  }

// y virziens
  statiskā dubultā getAxisY (dubultā h) {
    atgriešanās (h * augstums) / _DESIGN_HEIGHT;
  }

  // diagonālā virziena vērtība ar konstrukcijas izmēru s.
  statiskā dubultā getAxisBoth (dubultā s) {
    atgriezt s *
        sqrt ((platums * platums + augstums * augstums) /
            (_DESIGN_WIDTH * _DESIGN_WIDTH + _DESIGN_HEIGHT * _DESIGN_HEIGHT));
  }
}

Tas ļaus mainīt dizaina izmēru uz jūsu loģikas lielumu. Otrais tikai izmantojiet to. Varat iniciēt izmēru ar ierīces izmēru, tas nozīmē, ka jūs uzzīmējat formu tikpat daudz kā ekrānam, ja nepiešķirat citu izmēru.

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

3. Definējiet CustomPainter

Šī ir visiecienītākā klase, lai definētu mūsu pašu formu, šeit ir rakstīts viss loģiskais formas zīmējums.

Pirmkārt, izveidojiet klasi, kas paplašina CustomPainter, un izveidojiet krāsu. Ja izmērs nav mazs par 1,0, piešķiriet to kā loģisko lielumu.

klases OpenPainter paplašina CustomPainter {
@ override
tukšas krāsas (audekla audekls, izmērs) {
if (lielums. platums> 1.0 un & izmērs.augstums> 1.0) {
  drukāt ("> 1,9");
  SizeUtil.size = lielums;
}
var paint = Paint ()
  ..style = PaintingStyle.fill
  ..krāsa = BLUE_NORMAL
  ..isAntiAlias ​​= patiess;
}
 @ override
  bool shouldRepaint (CustomPainter oldDelegate) => nepatiess;
}

Pēc tam uzzīmējiet Flutter logotipu. Bet vispirms mums vajadzētu izmantot “canvas.drawPath”, lai uzzīmētu četrstūri.

void _drawFourShape (Audekla audekls,
    {Offset left_top,
    Nobīde labajā pusē,
    Nobīde labajā apakšā,
    Nobīde pa kreisi_ apakšā,
    Izmēra lielums,
    krāsas}) {
  left_top = _convertLogicSize (left_top, size);
  right_top = _convertLogicSize (labais_top, izmērs);
  right_bottom = _convertLogicSize (labais_bottom, izmērs);
  left_bottom = _convertLogicSize (kreisais_bottom, izmērs);
  var path1 = ceļš ()
    ..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 (ceļš1, krāsa);
}
Ofsets _convertLogicSize (Ofsets izslēgts, Izmēra lielums) {
  return Offset (SizeUtil.getAxisX (off.dx), SizeUtil.getAxisY (off.dy));
}

Visbeidzot, mēs zīmēsim apļus funkcijā “krāsa (audekls, izmērs)”.

var circleCenter = Ofsets (SizeUtil.getAxisX (294), SizeUtil.getAxisY (175));
paint.color = BLUE_NORMAL;
canvas.drawCircle (aplisCenter, SizeUtil.getAxisBoth (174), krāsa);
paint.color = GREEN_NORMAL;
canvas.drawCircle (aplisCenter, SizeUtil.getAxisBoth (124), krāsa);
krāsa.krāsas = krāsas.balta;
canvas.drawCircle (aplisCenter, SizeUtil.getAxisBoth (80), krāsa);

Visbeidzot, mums vajadzētu saglabāt audekls.

audekls.saglabāt ();
audekls.restore ();

4. Izmantojiet OpenPainter

Mēs tagad definējam OpenPainter, tāpēc kā mēs varam izmantot OpenPainter. Visvairāk importētā klase ir CustomPaint. jums tas jāizmanto kā vecāku logrīks.

CustomPaint (
  gleznotājs: OpenPainter (),
)

Tad mēs varam izmantot CustomPaint kā parastu logrīku, lai parādītu savu formu. Mūsu mājas lapā mēs to varam izmantot šādi.

Sastatnes (
  appBar: AppBar (
    nosaukums: teksts ("Pirmais audekls"),
  ),
  korpuss: konteiners (
      bērns: centrs (
    bērns: konteiners (
      platums: 280,
      augstums: 320,0,
      bērns: CustomPaint (
        gleznotājs: OpenPainter (),
      ),
    ),
  )),
)

Tas parādīsies šādi.

ar loģisku izmēru platums: 280, augstums: 320,0,

Ja mainīsim konteinera lielumu, kā mēs sakām, ja loģikas lielums ir lielāks par 200 * 400, tas būs nedaudz atšķirīgs.

Konteiners (
// platums: 280,
// augstums: 320,0,
          platums: 200,
          augstums: 400,
          bērns: CustomPaint (
            gleznotājs: OpenPainter (),
          ),
        )
ar loģisku izmēru platums: 200, augstums: 400,0,

Ja mēs nenosakām lielumu, funkcijā 'krāsa (audekls, izmērs)' lielums būs nulle, mēs piemērosim ierīces izmēru, pārbaudīsim, vai tā ir pareiza vai nē, šoreiz mums vajadzētu atcelt centra vecāku logrīku , tad mēs to varam apmeklēt.

Sastatnes (
// appBar: AppBar (
// nosaukums: teksts ("Pirmais audekls"),
//),
      korpuss: konteiners (
        bērns: konteiners (
// platums: 280,
// augstums: 320,0,
          bērns: CustomPaint (
            gleznotājs: OpenPainter (),
          ),
        ),
      ),
    );
ar ierīces lieluma loģisko lielumu

Tas ir jauki, ka mums ir pilns Flutter Open logotips. To ir izveidojusi Flutter atvērtā koda kopiena. Tvertnes jūsu atbalstam.

Viss projekts ir šeit: https://github.com/FlutterOpen/flutter-canvas. Ja jums patīk vai mazliet palīdzat, lūdzu, dodiet man zvaigzni GitHub.

_______________end________________

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

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