Tutorial kanvas 01 | Bagaimana untuk menggunakan kanvas dalam pergerakan?

0. Apa yang akan kita buat?

Hari ini, saya akan memberitahu anda cara menggunakan kanvas untuk menarik bentuk kita sendiri, ini langkah demi langkah tutorial, mari kita pergi! Pertama, marilah saya tunjukkan kepada anda apa yang akan kami buat!

Logo Terbuka Flutter

Ya, anda betul, kami akan membuat logo Flutter Open ini.

1. Menyelaras atau Saiz gambar

Sebelum kita mula bekerja, kita harus tahu logo reka bentuk logo, seperti bagaimana dengan saiz bulatan, atau kedudukan segiempat tepat dan sebagainya, jadi kita harus tahu, gambar di bawah ini harus anda koordinat atau saiz atau bentuk, anda harus perhatikan bahawa titik sifar kiri_top dalam skrin dan gambarnya adalah 584 * 648 piksel.

Nota kalangan dengan koordinat pusat dan jejari.memainkan logo flutter ke atas dengan koordinat titik

Sekiranya anda ingin membuat bentuk dengan sendiri, anda harus melakukan ini dengan diri sendiri dengan PS atau gambar lain mengubah suai alat.

Juga, jangan lupa warna-warna.

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

2. Saiz Reka Bentuk Peranti VS Saiz Logik

Apabila kami bentuk bentuk, kami hanya menggunakan piksel yang kami suka, tetapi terdapat banyak peranti dengan saiz skrin yang berbeza dan ukuran logik juga berbeza, kadangkala kami hanya meletakkan bentuk tersuai kami di dalam bekas, jadi kami boleh menarik saiznya seperti widget induk. Sebagai contoh, saiz logo ini adalah 548 * 648 sebagai reka bentuk, tetapi saiz logik untuk menunjukkan logo ini ialah 200 * 400, maka akan ditunjukkan seperti di bawah:

Apa yang boleh kita lakukan dengan ini, mari kita lihat kod di bawah

Pertama, kita harus menentukan kelas util

pakej import ': flutter / material.dart';
import 'dart: math';
class SizeUtil {
  const stat _DESIGN_WIDTH = 580;
  const stat _DESIGN_HEIGHT = 648;

  // saiz logik dalam peranti
  Saiz statik _logicSize;

  // radio piksel peranti.

  statik mendapatkan lebar {
    kembali _logicSize.width;
  }

  statik mendapatkan ketinggian {
    kembali _logicSize.height;
  }

  saiz set statik (saiz) {
    _logicSize = size;
  }

  // @ param w ialah reka bentuk w;
  statik double getAxisX (double w) {
    kembali (w * lebar) / _DESIGN_WIDTH;
  }

// arah y
  statik double getAxisY (double h) {
    pulangan (h * ketinggian) / _DESIGN_HEIGHT;
  }

  // nilai arah pepenjataan dengan saiz reka bentuk s.
  statik double getAxisBoth (double s) {
    kembali s *
        sqrt ((lebar * lebar + tinggi ketinggian) /
            (_DESIGN_WIDTH * _DESIGN_WIDTH + _DESIGN_HEIGHT * _DESIGN_HEIGHT));
  }
}

Ini akan membolehkan anda menukar saiz reka bentuk kepada saiz logik anda. Yang kedua hanya menggunakannya. Anda boleh memanaskan saiz dengan saiz peranti, itu bermakna anda melukis bentuk seperti skrin jika anda tidak menetapkan saiz yang lain.

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

3. Tentukan CustomPainter

Ini adalah kelas yang paling import untuk menentukan bentuk kita sendiri, semua bentuk logik untuk melukis ditulis di sini.

Pertama, buat kelas memperluaskan CustomPainter dan buat cat. Sekiranya saiznya tidak lebih kecil dari 1.0 kemudian, serahkannya sebagai saiz logik.

OpenPainter kelas meluaskan CustomPainter {
@override
tidak sah cat (Kanvas kanvas, Saiz saiz) {
jika (size.width> 1.0 && size.height> 1.0) {
  cetakan ("> 1.9");
  SizeUtil.size = size;
}
var paint = Paint ()
  ..style = PaintingStyle.fill
  ..color = BLUE_NORMAL
  ..isAntiAlias ​​= benar;
}
 @override
  bool harusRepaint (CustomPainter oldDelegate) => false;
}

Kemudian, lukis logo Flutter. Tetapi pertama, kita harus menggunakan 'kanvas.drawPath' untuk menarik empat segi.

tidak sah _drawFourShape (Kanvas kanvas,
    {Offset left_top,
    Offset right_top,
    Offset right_bottom,
    Mengimbangi left_bottom,
    Saiz saiz,
    cat}) {
  left_top = _convertLogicSize (left_top, size);
  right_top = _convertLogicSize (right_top, size);
  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);
  kanvas.drawPath (path1, cat);
}
Offset _convertLogicSize (Offset off, Saiz saiz) {
  kembali Offset (SizeUtil.getAxisX (off.dx), SizeUtil.getAxisY (off.dy));
}

Akhir sekali, kami akan menarik bulatan dalam fungsi 'cat (kanvas, saiz)'.

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

Akhirnya, kita perlu menyelamatkan kanvas.

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

4. Gunakan OpenPainter

Kami mendefinisikan OpenPainter sekarang, jadi bagaimana kita boleh menggunakan OpenPainter.The kelas yang paling import ialah CustomPaint. anda harus menggunakannya sebagai widget induk.

CustomPaint (
  pelukis: OpenPainter (),
)

Kemudian kami boleh menggunakan CustomPaint sebagai widget biasa untuk menunjukkan bentuk kami. Di halaman rumah kami, kami boleh menggunakannya seperti ini.

Perancah (
  appBar: AppBar (
    tajuk: Teks ("Kanvas Pertama"),
  ),
  badan: kontena (
      kanak: Pusat (
    kanak: Container (
      lebar: 280,
      ketinggian: 320.0,
      kanak: CustomPaint (
        pelukis: OpenPainter (),
      ),
    ),
  )),
)

Ia akan menunjukkan seperti ini.

dengan saiz logik lebar: 280, ketinggian: 320.0,

Jika kita menukar saiz bekas seperti yang kita katakan di atas 200 * 400 untuk saiz logik, ia akan menjadi sedikit berbeza.

Kontena (
// width: 280,
/ ketinggian: 320.0,
          lebar: 200,
          ketinggian: 400,
          kanak: CustomPaint (
            pelukis: OpenPainter (),
          ),
        )
dengan saiz logis yang lebar: 200, ketinggian: 400.0,

Jika kita tidak menetapkan saiz, saiz dalam fungsi 'cat (kanvas, saiz)' akan menjadi sifar, kita akan muat saiz peranti, mari kita periksa sama ada betul atau tidak, kali ini kita harus membatalkan widget induk Pusat , maka kita boleh melawatnya.

Perancah (
// appBar: AppBar (
// tajuk: Teks ("Kanvas Pertama"),
//),
      badan: kontena (
        kanak: Container (
// width: 280,
/ ketinggian: 320.0,
          kanak: CustomPaint (
            pelukis: OpenPainter (),
          ),
        ),
      ),
    );
dengan saiz logik saiz peranti

Itu bagus, kami telah melengkapkan logo Flutter Open. Ini dibuat oleh komuniti sumber Terbuka Flutter. Tangki untuk sokongan anda.

Seluruh projek di sini ialah: https://github.com/FlutterOpen/flutter-canvas. Jika anda suka atau sedikit membantu anda, sila beri saya bintang di GitHub.

_______________end________________

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

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