Canvas Tutorial 01 | Kətan çırpınmaqda necə istifadə olunur

0. Nə edəcəyik?

Bu gün sizə öz şəklimizi çəkmək üçün kətandan necə istifadə edəcəyimi izah edəcəyəm. Bu addım-addım təlimdir. Budur gedirik! Əvvəlcə gələcəyimizi göstərək!

Çırpınan loqosu

Bəli, haqlısınız, bu Flutter Open logosunu hazırlayacağıq.

1. Görünüşün koordinatı və ya ölçüsü

İşə başlamazdan əvvəl dairənin ölçüsü və ya düzbucaqlının mövqeyi və s. Kimi loqotipin dizayn piksellərini bilməliyik. Beləliklə, aşağıdakı şəklin və ya formanın koordinatını və ya ölçüsünü göstərdiyini bilməliyik, sıfır nöqtəsinin ekranda sol_top və şəklin 584 * 648 piksel olduğunu görməlisiniz.

Mərkəzi koordinatlı və radiuslu dairələrin qeydləri.Nöqtə koordinatlı yuxarıya dönən dalğalanma loqosu

Özünüz bir forma çəkmək istəyirsinizsə, PS və ya digər görüntü dəyişdirmə vasitələrindən istifadə edərək özünüz etməlisiniz.

Rəngləri də unutma.

const BLUE_NORMAL = Rəng (0xff54c5f8); const GREEN_NORMAL = Rəng (0xff6bde54); const BLUE_DARK2 = Rəng (0xff01579b); const BLUE_DARK1 = Rəng (0xff29b6f6);

2. Dizayn ölçüsü VS cihaz məntiqi ölçüsü

Forma dizayn edərkən yalnız bəyəndiyimiz piksellərdən istifadə edirik, lakin fərqli ekran ölçülərinə sahib olan bu qədər cihaz var və məntiqi ölçüsü də fərqlidir. Bəzən xüsusi şəklimizi yalnız qaba qoyuruq ki, ana vidjetə bənzər bir ölçü çəkə bilərik. Məsələn, bu logonun ölçüsü bir qaralama şəklində 548 * 648, lakin bu loqotipi göstərmək üçün məntiqi ölçü 200 * 400-dür, belə görünür:

Bununla nə edə bilərik, aşağıdakı kodu nəzərdən keçirək

Əvvəlcə bir util sinifini təyin etməliyik

idxal 'paket: flutter / material.dart'; idxal 'dart: math'; Class SizeUtil {statik const _DESIGN_WIDTH = 580; statik konst _DESIGN_HEIGHT = 648; // cihazdakı məntiq ölçüsü statik ölçü _logicSize; // Cihaz Pixel Radio. statik əldə genişliyi {return _logicSize.width; } statik boy almaq {return _logicSize.height; } statik dəst ölçüsü (ölçüsü) {_logicSize = ölçüsü; } // @ param w dizayn w; statik ikiqat getAxisX (ikiqat w) {return (w * width) / _DESIGN_WIDTH; } // y istiqaməti statik ikiqat getAxisY (cüt h) {qayıt (h * hündürlük) / _DESIGN_HEIGHT; } // dizayn ölçüsü s üçün diaqonal istiqamət dəyəri. statik ikiqat getAxisBoth (double s) {return * sqrt ((width * width + height * height) / (_DESIGN_WIDTH * _DESIGN_WIDTH + _DESIGN_HEIGHT * _DESIGN_HEIGHT)); }}

Bu, dizayn ölçüsünü məntiq ölçüsünə dəyişdirməyə imkan verir. Bir saniyə kimi istifadə edin. Cihaz ölçüsü ilə ölçüyə başlaya bilərsiniz, yəni fərqli bir ölçü təyin etmədiyiniz təqdirdə şəkli ekrana qədər çəkəcəksiniz.

SizeUtil.size = MediaQuery.of (kontekst) .siz;

3. CustomPainter-ı müəyyənləşdirin

Bu, öz şəklimizi təyin etmək üçün ən vacib sinifdir. Məntiqi şəkildə çəkiləcək bütün forma burada yazılmışdır.

Əvvəlcə CustomPainter-i genişləndirən və rəng yaradan bir sinif yaradın. Ölçü 1.0-dən az deyilsə, onu məntiqi bir ölçü olaraq təyin edin.

OpenPainter sinfi CustomPainter-ı genişləndirir {
@ override boş rəng (kətan kətan, ölçü ölçüsü) {if (size.width> 1.0 && size.height> 1.0) {print ("> 1.9"); SizeUtil.size = ölçü; } var boya = Paint () ..style = PaintingStyle.fill ..color = BLUE_NORMAL ..isAntiAlias ​​= true;
} @override bool shouldRepaint (CustomPainter oldDelegate) => false; }

Sonra Flutter logosunu çəkin. Ancaq əvvəlcə bir kvadrat çəkmək üçün 'canvas.drawPath' istifadə etməliyik.

void _drawFourShape (Canvas kətan, {ofset sol_top, ofset right_top, ofset right alt, ofset left_bottom, size size, color}) {left_top = _convertLogicSize (left_top, size); right_top = _convertLogicSize (sağ_top, ölçü); right_bottom = _convertLogicSize (sağ_bottom, ölçü); left_bottom = _convertLogicSize (sol_bottom, ölçü); var path1 = Yol () ..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, sol_bottom.dy); canvas.drawPath (yol1, boya); }
Ofset _convertLogicSize (ofset, ölçünün ölçüsü) {return Offset (SizeUtil.getAxisX (off.dx), SizeUtil.getAxisY (off.dy)); }

Sonda dairələri "Rəng (kətan, ölçü)" funksiyasında çəkirik.

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

Axı kətanı xilas etməliyik.

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

4. OpenPainter istifadə edin

İndi OpenPainter-i təyin edirik, buna görə OpenPainter-dən necə istifadə edə bilərik. Ən vacib idxal sinfi CustomPaint-dir. Siz ana widget kimi istifadə etməlisiniz.

CustomPaint (rəssam: OpenPainter (),)

Sonra forma göstərmək üçün CustomPaint-dən ümumi bir widget kimi istifadə edə bilərik. Bunu ana səhifəmizdə istifadə edə bilərik.

İskele (AppBar: AppBar (Başlıq: Mətn ("İlk Canvas")), Bədən: Konteyner (Uşaq: Mərkəz (Uşaq: Konteyner (Genişlik: 280, Boy: 320.0, Uşaq: CustomPaint (rəssam: OpenPainter ()) ),),)),)

Bu şəkildə göstərəcəkdir.

məntiqi eni ölçüsü ilə: 280, hündürlüyü: 320.0,

Mantıksal bir ölçü üçün 200 * 400-dən çox dediyimiz kimi qabın ölçüsünü dəyişdirsək, bir az fərqli olacaq.

Konteyner (// eni: 280, // hündürlüyü: 320.0, eni: 200, hündürlüyü: 400, növ: CustomPaint (rəssam: OpenPainter (),),)
məntiqi eni ölçüsü ilə: 200, hündürlüyü: 400.0,

Ölçüsü göstərməsək, "Boya (kətan, ölçü)" funksiyasındakı ölçü sıfır olacaq. Cihaz ölçüsünü tənzimləyəcəyik. Doğru olub olmadığını yoxlayaq. Bu dəfə Mərkəzin ana widgetını söndürməliyik ki, onu ziyarət edə bilək.

İskele (// appBar: AppBar (// başlıq: Mətn ("İlk kətan"), //), Bədən: Konteyner (Növ: Konteyner (// En: 280, // Boy: 320.0, Növ: CustomPaint ( Rəssam: OpenPainter (),),),),);
cihaz ölçüsünün məntiqi ölçüsü ilə

Gözəldir, Flutter Open logosunu tamamladıq. Bu Flutter Açıq Mənbə Birliyi tərəfindən yaradılmışdır. Dəstək üçün tanklar.

Layihənin hamısı burada: https://github.com/FlutterOpen/flutter-canvas. İstəyirsinizsə və ya biraz kömək etsəniz, xahiş edirəm mənə GitHub'da bir ulduz verin.

_______________Son________________

Facebook səhifəsi: https://www.facebook.com/flutteropen

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