Tutorial de lienzo 01 | ¿Cómo usar el lienzo en el aleteo?

0. ¿Qué crearemos?

Hoy, te diré cómo usar el lienzo para dibujar nuestra propia forma, este es un tutorial paso a paso, ¡vamos! Primero, ¡déjame mostrarte lo que crearemos!

Logo de Flutter Open

Sí, tienes razón, crearemos este logotipo de Flutter Open.

1. Coordenadas o tamaño de la imagen

Antes de comenzar a trabajar, debemos conocer el diseño del logotipo, por ejemplo, ¿qué tal el tamaño del círculo, o la posición del rectángulo, etc.? Por lo tanto, debemos saber que la imagen a continuación le indicará la coordenada o el tamaño de forma, debe notar que el punto cero está en la parte superior izquierda de la pantalla y la imagen es de 584 * 648 píxeles.

Las notas de círculos con coordenadas centrales y radio.el logotipo de aleteo giratorio hacia arriba con coordenadas de punto

Si desea dibujar alguna forma usted mismo, debe hacerlo usted mismo con PS u otras herramientas de modificación de imagen.

Además, no te olvides de los colores.

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

2. Tamaño de diseño VS Tamaño lógico del dispositivo

Cuando diseñamos la forma, solo usamos el píxel que nos gusta, pero hay tantos dispositivos con diferentes tamaños de pantalla y el tamaño de la lógica también es diferente, a veces simplemente colocamos nuestra forma personalizada en el contenedor, para que podamos dibujar el tamaño como tanto como el widget principal. Por ejemplo, el tamaño de este logotipo es 548 * 648 como el diseño, pero el tamaño lógico para mostrar este logotipo es 200 * 400, entonces se mostraría de la siguiente manera:

Qué podemos hacer con esto, veamos el código a continuación

Primero, debemos definir una clase util

import 'paquete: flutter / material.dart';
importar 'dart: math';
clase SizeUtil {
  const estático _DESIGN_WIDTH = 580;
  const estático _DESIGN_HEIGHT = 648;

  // tamaño lógico en dispositivo
  Tamaño estático _logicSize;

  // dispositivo de radio de píxeles.

  ancho de obtención estático {
    return _logicSize.width;
  }

  altura estática de obtención {
    return _logicSize.height;
  }

  tamaño del conjunto estático (tamaño) {
    _logicSize = tamaño;
  }

  // @ param w es el diseño w;
  getAxisX doble estático (doble w) {
    return (w * ancho) / _DESIGN_WIDTH;
  }

// la dirección y
  estática doble getAxisY (doble h) {
    return (h * height) / _DESIGN_HEIGHT;
  }

  // valor de dirección diagonal con tamaño de diseño s.
  static double getAxisBoth (double s) {
    devoluciones *
        sqrt ((ancho * ancho + alto * alto) /
            (_DESIGN_WIDTH * _DESIGN_WIDTH + _DESIGN_HEIGHT * _DESIGN_HEIGHT));
  }
}

Esto le permitirá cambiar el tamaño del diseño a su tamaño lógico. El segundo solo úsalo. Puedes iniciar el tamaño con el tamaño del dispositivo, eso significa que dibujas la forma tanto como la pantalla si no asignas otro tamaño.

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

3. Definir CustomPainter

Esta es la clase más importante para definir nuestra propia forma, aquí se escribe toda la lógica para dibujar la forma.

Primero, crear una clase extiende CustomPainter y crea una pintura. Si el tamaño no es menor que 1.0, asígnelo como el tamaño lógico.

La clase OpenPainter extiende CustomPainter {
@anular
pintura vacía (lienzo de lona, ​​tamaño) {
if (size.width> 1.0 && size.height> 1.0) {
  imprimir ("> 1.9");
  SizeUtil.size = tamaño;
}
var paint = Paint ()
  ..style = PaintingStyle.fill
  ..color = BLUE_NORMAL
  ..isAntiAlias ​​= verdadero;
}
 @anular
  bool shouldRepaint (CustomPainter oldDelegate) => false;
}

Luego, dibuja el logotipo de Flutter. Pero primero, deberíamos usar ‘canvas.drawPath’ para dibujar un cuadrilátero.

void _drawFourShape (lienzo de lona,
    {Offset left_top,
    Offset right_top,
    Offset right_bottom,
    Offset left_bottom,
    Tamaño tamaño,
    pintar}) {
  left_top = _convertLogicSize (left_top, size);
  right_top = _convertLogicSize (right_top, size);
  right_bottom = _convertLogicSize (right_bottom, tamaño);
  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 (ruta1, pintura);
}
Offset _convertLogicSize (Offset off, Size size) {
  return Offset (SizeUtil.getAxisX (off.dx), SizeUtil.getAxisY (off.dy));
}

Por último, dibujaremos los círculos en función de "pintura (lienzo, tamaño)".

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

Finalmente, debemos guardar el lienzo.

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

4. Use el OpenPainter

Definimos el OpenPainter ahora, entonces, ¿cómo podemos usar el OpenPainter? La clase más importante es CustomPaint. deberías usarlo como un widget padre.

CustomPaint (
  pintor: OpenPainter (),
)

Entonces podemos usar CustomPaint como un widget común para mostrar nuestra forma. En nuestra página de inicio, podemos usar esto así.

Andamio(
  appBar: AppBar (
    título: Texto ("Primer lienzo"),
  ),
  cuerpo: Contenedor (
      niño: Centro (
    hijo: Contenedor (
      ancho: 280,
      altura: 320.0,
      hijo: CustomPaint (
        pintor: OpenPainter (),
      ),
    ),
  )),
)

Se mostrará así.

con tamaño lógico de ancho: 280, altura: 320.0,

Si cambiamos el tamaño del contenedor como decimos por encima de 200 * 400 para un tamaño lógico, será un poco diferente.

Envase(
// ancho: 280,
// altura: 320.0,
          ancho: 200,
          altura: 400,
          hijo: CustomPaint (
            pintor: OpenPainter (),
          ),
        )
con tamaño lógico de ancho: 200, altura: 400.0,

Si no establecemos el tamaño, el tamaño en la función 'pintar (lienzo, tamaño)' será cero, ajustaremos el tamaño del dispositivo, verifiquemos si es correcto o no, esta vez deberíamos cancelar el widget principal de Centro , entonces podemos visitarlo.

Andamio(
// appBar: AppBar (
// título: Texto ("Primer lienzo"),
//),
      cuerpo: Contenedor (
        hijo: Contenedor (
// ancho: 280,
// altura: 320.0,
          hijo: CustomPaint (
            pintor: OpenPainter (),
          ),
        ),
      ),
    );
con el tamaño lógico del tamaño del dispositivo

Eso es bueno, hemos completado el logotipo de Flutter Open. Esto es creado por la comunidad de código abierto Flutter. Tanques para su apoyo.

Todo el proyecto está aquí: https://github.com/FlutterOpen/flutter-canvas. Si te gusta o te ayuda un poco, por favor dame una estrella en el GitHub.

_______________fin________________

Página de Facebook: https://www.facebook.com/flutteropen

Grupo de Facebook: https://www.facebook.com/groups/948618338674126/