Εκπαιδευτικό υλικό για καμβά 01 | Πώς να χρησιμοποιήσετε τον καμβά στο πτερυγισμό;

0. Τι θα δημιουργήσουμε;

Σήμερα, θα σας πω πώς να χρησιμοποιήσετε τον καμβά για να σχεδιάσετε το δικό μας σχήμα, αυτό είναι ένα βήμα προς βήμα φροντιστήριο, ας πάμε! Πρώτον, επιτρέψτε μου να σας δείξω τι θα δημιουργήσουμε!

Το λογότυπο του Flutter Open

Ναι, έχετε δίκιο, θα δημιουργήσουμε αυτό το λογότυπο του Flutter Open.

1. Συντεταγμένη ή Μέγεθος εικόνας

Πριν αρχίσουμε να εργαζόμαστε, θα πρέπει να γνωρίζουμε το pix σχεδιασμού του λογότυπου, όπως για παράδειγμα το μέγεθος του κύκλου ή τη θέση του ορθογωνίου κ.ο.κ., ώστε να γνωρίζουμε ότι η παρακάτω εικόνα θα πρέπει να σας καθορίσει τη συντεταγμένη ή το μέγεθος του ή σχήμα, θα πρέπει να παρατηρήσετε ότι το μηδέν σημείο είναι left_top στην οθόνη και ότι η εικόνα είναι 584 * 648 pixel.

Οι νότες των κύκλων με κεντρική συντεταγμένη και ακτίνα.περιστρέψτε το λογότυπο προς τα πάνω με την συντεταγμένη σημείου

Εάν θέλετε να σχεδιάσετε κάποια μορφή από τον εαυτό σας, θα πρέπει να το κάνετε μόνοι σας με PS ή άλλα εργαλεία τροποποίησης εικόνας.

Επίσης, μην ξεχνάτε τα χρώματα.

const BLUE_NORMAL = Χρώμα (0xff54c5f8);
const GREEN_NORMAL = Χρώμα (0xff6bde54);
const BLUE_DARK2 = Χρώμα (0xff01579b);
const BLUE_DARK1 = Χρώμα (0xff29b6f6);

2. Μέγεθος σχεδιασμού VS Συσκευή Λογικό μέγεθος

Όταν σχεδιάζουμε το σχήμα, χρησιμοποιούμε μόνο το εικονοστοιχείο που μας αρέσει, αλλά υπάρχουν τόσες πολλές συσκευές με διαφορετικό μέγεθος οθόνης και το λογικό μέγεθος είναι επίσης διαφορετικό, μερικές φορές απλά βάζουμε το προσαρμοσμένο σχήμα μας στο δοχείο, ώστε να μπορέσουμε να σχεδιάσουμε το μέγεθος όπως το γονικό widget. Για παράδειγμα, το μέγεθος αυτού του λογότυπου είναι 548 * 648 ως σχεδίαση, αλλά το λογικό μέγεθος για να δείξει αυτό το λογότυπο είναι 200 ​​* 400, τότε θα εμφανιστεί όπως παρακάτω:

Τι μπορούμε να κάνουμε με αυτό, ας δούμε τον παρακάτω κώδικα

Πρώτον, θα πρέπει να ορίσουμε μια ωφέλιμη κλάση

συσκευασία εισαγωγής: flutter / material.dart ';
Εισαγωγή 'βέλος: μαθηματικά'.
class SizeUtil {
  static const _DESIGN_WIDTH = 580;
  static const _DESIGN_HEIGHT = 648;

  // λογικό μέγεθος στη συσκευή
  static Μέγεθος _logicSize;

  // ραδιόφωνο pixel συσκευής.

  static get width {
    επιστροφή _logicSize.width;
  }}

  static get height {
    επιστροφή _logicSize.height;
  }}

  static set size (μέγεθος) {
    _logicSize = μέγεθος;
  }}

  // @ param w είναι ο σχεδιασμός w?
  στατικό διπλό getAxisX (διπλό w) {
    επιστροφή (w * πλάτος) / _DESIGN_WIDTH;
  }}

// η κατεύθυνση y
  στατικό διπλό getAxisY (διπλό h) {
    επιστροφή (h * ύψος) / _DESIGN_HEIGHT;
  }}

  // διαγώνια τιμή κατεύθυνσης με μέγεθος σχεδιασμού s.
  static double getAxisBoth (διπλό s) {
    επιστροφή s *
        sqrt ((πλάτος * πλάτος + ύψος * ύψος) /
            (_DESIGN_WIDTH * _DESIGN_WIDTH + _DESIGN_HEIGHT * _DESIGN_HEIGHT)).
  }}
}}

Αυτό θα σας επιτρέψει να αλλάξετε το μέγεθος του σχεδίου στο λογικό σας μέγεθος. Το δεύτερο απλά το χρησιμοποιείτε.μπορείτε να init το μέγεθος με το μέγεθος της συσκευής, αυτό σημαίνει ότι σχεδιάζετε το σχήμα όσο και η οθόνη εάν δεν αντιστοιχίσετε άλλο μέγεθος.

SizeUtil.size = MediaQuery.of (περιβάλλον) .size;

3. Καθορίστε το CustomPainter

Αυτή είναι η μεγαλύτερη κατηγορία εισαγωγής για να καθορίσουμε το δικό μας σχήμα, όλα τα λογικά για να σχεδιάσουμε σχήμα γράφεται εδώ.

Πρώτον, δημιουργήστε μια τάξη επεκτείνει το CustomPainter και δημιουργήστε ένα χρώμα. Εάν το μέγεθος δεν είναι μικρότερο από 1.0 τότε, αντιστοιχίστε το ως λογικό μέγεθος.

class OpenPainter επεκτείνει το CustomPainter {
@καταπατώ
κενό χρώμα (καμβάς καμβά, μέγεθος μεγέθους) {
αν (size.width> 1.0 && size.height> 1.0) {
  εκτύπωση ("> 1,9");
  SizeUtil.size = μέγεθος;
}}
var χρώμα = Paint ()
  ..style = PaintingStyle.fill
  ..color = BLUE_NORMAL
  ..isAntiAlias ​​= true;
}}
 @καταπατώ
  bool θα πρέπει να επαναφέρει (CustomPainter oldDelegate) => false;
}}

Στη συνέχεια, σχεδιάστε το λογότυπο Flutter. Αλλά πρώτα, θα πρέπει να χρησιμοποιήσουμε το «canvas.drawPath» για να σχεδιάσουμε ένα τετράπλευρο.

void _drawFourShape (καμβάς καμβά,
    {Offset left_top,
    Offset right_top,
    Μετατόπιση right_bottom,
    Μετατόπιση left_bottom,
    Μέγεθος μεγέθους,
    χρώμα}) {
  left_top = _convertLogicSize (left_top, μέγεθος).
  right_top = _convertLogicSize (right_top, μέγεθος);
  right_bottom = _convertLogicSize (right_bottom, μέγεθος);
  left_bottom = _convertLogicSize (left_bottom, μέγεθος).
  var path1 = Διαδρομή ()
    ..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 (διαδρομή 1, χρώμα);
}}
Απόσπασμα _convertLogicSize (Απενεργοποίηση off, Μέγεθος μεγέθους) {
  επιστροφή αντιστάθμισης (SizeUtil.getAxisX (off.dx), SizeUtil.getAxisY (off.dy));
}}

Τέλος, θα σχεδιάσουμε τους κύκλους στη λειτουργία «χρώματος (καμβά, μέγεθος)».

var circleCenter = Μετατόπιση (SizeUtil.getAxisX (294), SizeUtil.getAxisY (175));
paint.color = BLUE_NORMAL;
canvas.drawCircle (circleCenter, μέγεθοςUtil.getAxisBoth (174), χρώμα).
paint.color = GREEN_NORMAL;
canvas.drawCircle (circleCenter, μέγεθοςUtil.getAxisBoth (124), χρώμα);
paint.color = Χρώματα λευκά;
canvas.drawCircle (circleCenter, ΜέγεθοςUtil.getAxisBoth (80), χρώμα)?

Τέλος, πρέπει να σώσουμε τον καμβά.

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

4. Χρησιμοποιήστε το OpenPainter

Ορίζουμε τώρα το OpenPainter, έτσι πώς μπορούμε να χρησιμοποιήσουμε το OpenPainter. Η πιο σημαντική κατηγορία εισαγωγής είναι το CustomPaint. θα πρέπει να το χρησιμοποιήσετε ως γονικό widget.

CustomPaint (
  ζωγράφος: OpenPainter (),
)

Στη συνέχεια, μπορούμε να χρησιμοποιήσουμε το CustomPaint ως κοινό γραφικό στοιχείο για να δείξουμε το σχήμα μας. Στην αρχική μας σελίδα, μπορούμε να χρησιμοποιήσουμε αυτό τον τρόπο.

Ικρίωμα(
  appBar: AppBar (
    τίτλος: Κείμενο ("Πρώτος καμβάς"),
  ),
  σώμα: Δοχείο (
      παιδί: Κέντρο (
    παιδί: Δοχείο (
      πλάτος: 280,
      ύψος: 320,0,
      παιδιού: CustomPaint (
        ζωγράφος: OpenPainter (),
      ),
    ),
  )),
)

Θα δείξει έτσι.

με λογικό μέγεθος πλάτους: 280, ύψος: 320,0,

Εάν αλλάξουμε το μέγεθος του εμπορευματοκιβωτίου όπως λέμε παραπάνω από 200 * 400 για λογικό μέγεθος, θα είναι λίγο διαφορετικό.

Δοχείο(
// πλάτος: 280,
// ύψος: 320,0,
          πλάτος: 200,
          ύψος: 400,
          παιδιού: CustomPaint (
            ζωγράφος: OpenPainter (),
          ),
        )
με λογικό μέγεθος πλάτους: 200, ύψος: 400,0,

Εάν δεν ρυθμίσουμε το μέγεθος, το μέγεθος στη λειτουργία "χρώμα (καμβά, μέγεθος)" θα είναι μηδέν, θα χωρέσει το μέγεθος της συσκευής, ας ελέγξουμε αν είναι σωστό ή όχι, αυτή τη φορά θα πρέπει να ακυρώσουμε το γονικό widget του Center , τότε μπορούμε να την επισκεφτούμε.

Ικρίωμα(
// appBar: AppBar (
// title: Text ("Πρώτο καμβά"),
//),
      σώμα: Δοχείο (
        παιδί: Δοχείο (
// πλάτος: 280,
// ύψος: 320,0,
          παιδιού: CustomPaint (
            ζωγράφος: OpenPainter (),
          ),
        ),
      ),
    ) ·
με το λογικό μέγεθος του μεγέθους της συσκευής

Αυτό είναι ωραίο, έχουμε συμπληρώσει το λογότυπο του Flutter Open. Αυτό δημιουργείται από την κοινότητα Flutter Open source. Δεξαμενές για την υποστήριξή σας.

Το όλο έργο βρίσκεται εδώ: https://github.com/FlutterOpen/flutter-canvas. Αν σας αρέσει ή σας βοηθά λίγο, παρακαλώ δώστε μου ένα αστέρι στο GitHub.

_______________τέλος________________

Σελίδα Facebook: https://www.facebook.com/flutteropen

Ομάδα Facebook: https://www.facebook.com/groups/948618338674126/