Toile tutoriel 01 | Comment utiliser la toile dans le flutter?

0. Qu'est-ce qu'on va créer?

Aujourd’hui, je vais vous expliquer comment utiliser la toile pour dessiner notre propre forme. C’est un didacticiel détaillé, allons-y! Tout d'abord, laissez-moi vous montrer ce que nous allons créer!

Logo de Flutter Open

Oui, vous avez raison, nous allons créer ce logo de Flutter Open.

1. Coordonnée ou taille de l'image

Avant de commencer à travailler, nous devons connaître le pix de conception du logo, comme par exemple la taille du cercle ou la position du rectangle, etc. forme, vous remarquerez que le point zéro est left_top à l’écran et que l’image est de 584 * 648 pixels.

Les notes de cercles avec la coordonnée centrale et le rayon.logo pivotant vers le haut avec coordonnées de point

Si vous souhaitez dessiner une forme par vous-même, vous devez le faire vous-même avec PS ou d'autres outils de modification d'image.

De plus, n'oubliez pas les couleurs.

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

2. Taille de conception VS taille logique du dispositif

Lorsque nous concevons la forme, nous utilisons simplement le pixel que nous aimons, mais il y a tellement de périphériques avec une taille d'écran différente et la taille logique sont également différentes. Parfois, nous plaçons simplement notre forme personnalisée dans le conteneur afin autant que le widget parent. Par exemple, la taille de ce logo est de 548 * 648 comme dessin, mais la taille logique pour afficher ce logo est de 200 * 400.

Que pouvons-nous faire avec cela, voyons le code ci-dessous

Tout d'abord, nous devrions définir une classe util

importer 'package: flutter / material.dart';
importer 'dart: math';
classe SizeUtil {
  static const _DESIGN_WIDTH = 580;
  static const _DESIGN_HEIGHT = 648;

  // taille de la logique dans le périphérique
  Taille statique _logicSize;

  // appareil pixel radio.

  static get width {
    return _logicSize.width;
  }

  statique get hauteur {
    return _logicSize.height;
  }

  taille de l'ensemble statique (taille) {
    _logicSize = taille;
  }

  // @ param w est le design w;
  double getAxisX statique (double w) {
    return (w * width) / _DESIGN_WIDTH;
  }

// la direction y
  double getAxisY statique (double h) {
    return (h * height) / _DESIGN_HEIGHT;
  }

  // valeur de direction diagonale avec la taille de dessin s.
  statique double getAxisBoth (double s) {
    résultats *
        sqrt ((largeur * largeur + hauteur * hauteur) /
            (_DESIGN_WIDTH * _DESIGN_WIDTH + _DESIGN_HEIGHT * _DESIGN_HEIGHT));
  }
}

Cela vous permettra de modifier la taille de la conception en fonction de votre taille logique. La seconde suffit: vous pouvez définir la taille avec la taille du périphérique, ce qui signifie que vous dessinez la forme autant que l’écran si vous n’affectez pas une autre taille.

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

3. Définir CustomPainter

C’est la classe la plus importante pour définir notre propre forme; toutes les instructions logiques pour dessiner une forme sont écrites ici.

Tout d'abord, créer une classe étend CustomPainter et créer une peinture. Si la taille n'est pas inférieure à 1,0, affectez-la à la taille logique.

classe OpenPainter étend CustomPainter {
@passer outre
peinture vide (toile, taille taille) {
if (size.width> 1.0 && size.height> 1.0) {
  print ("> 1.9");
  SizeUtil.size = taille;
}
var paint = Paint ()
  ..style = PaintingStyle.fill
  ..color = BLUE_NORMAL
  ..isAntiAlias ​​= true;
}
 @passer outre
  bool shouldRepaint (CustomPainter oldDelegate) => false;
}

Ensuite, dessinez le logo Flutter. Mais d’abord, nous devrions utiliser le “canvas.drawPath” pour dessiner un quadrilatère.

void _drawFourShape (Toile toile,
    {Offset left_top,
    Décalage right_top,
    Décalage right_bottom,
    Décalage left_bottom,
    Taille taille,
    peindre}) {
  left_top = _convertLogicSize (left_top, taille);
  right_top = _convertLogicSize (right_top, taille);
  right_bottom = _convertLogicSize (right_bottom, size);
  left_bottom = _convertLogicSize (left_bottom, size);
  var path1 = Path ()
    ..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 (path1, paint);
}
Décalage _convertLogicSize (décalage désactivé, taille de la taille) {
  return Offset (SizeUtil.getAxisX (off.dx), SizeUtil.getAxisY (off.dy));
}

Enfin, nous allons dessiner les cercles dans la fonction de ‘paint (canvas, size)’.

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

Enfin, nous devrions sauver la toile.

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

4. Utilisez l'OpenPainter

Nous définissons maintenant OpenPainter, alors comment pouvons-nous utiliser OpenPainter.La classe la plus importée est CustomPaint. vous devriez l'utiliser comme un widget parent.

CustomPaint (
  peintre: OpenPainter (),
)

Ensuite, nous pouvons utiliser CustomPaint comme un widget commun pour afficher notre forme. Dans notre page d'accueil, nous pouvons utiliser ceci comme ceci.

Échafaud(
  appBar: AppBar (
    titre: Texte ("Première toile"),
  ),
  corps: Conteneur (
      enfant: Centre (
    child: Conteneur (
      largeur: 280,
      hauteur: 320.0,
      enfant: CustomPaint (
        peintre: OpenPainter (),
      ),
    ),
  )),
)

Cela va montrer comme ça.

avec une taille logique de largeur: 280, hauteur: 320.0,

Si nous changeons la taille du conteneur comme nous le disons au-dessus de 200 * 400 pour une taille logique ,, ce sera un peu différent.

Récipient(
// largeur: 280,
// hauteur: 320.0,
          largeur: 200
          hauteur: 400
          enfant: CustomPaint (
            peintre: OpenPainter (),
          ),
        )
avec une taille logique de largeur: 200, hauteur: 400.0,

Si nous ne définissons pas la taille, la taille dans la fonction 'paint (canvas, size)' sera zéro, nous ajusterons la taille du périphérique, vérifions si c'est correct ou non, cette fois nous devrions annuler le widget parent de Centre , alors nous pouvons le visiter.

Échafaud(
// appBar: AppBar (
// title: Text ("First Canvas"),
//),
      corps: Conteneur (
        child: Conteneur (
// largeur: 280,
// hauteur: 320.0,
          enfant: CustomPaint (
            peintre: OpenPainter (),
          ),
        ),
      ),
    )
avec la taille logique de la taille de l'appareil

C’est bien, nous avons terminé le logo de Flutter Open. Ceci est créé par la communauté Open Source Flutter. Réservoirs pour votre soutien.

L'ensemble du projet est ici: https://github.com/FlutterOpen/flutter-canvas. Si vous aimez ou aidez un peu, donnez-moi s'il vous plaît une étoile dans le GitHub.

_______________fin________________

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

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