Path
- Flutter kursu
- İleri seviye
- Ders 54/69
- 4 dk
Path ile çoklu çizgi ve karmaşık şekil yapmayı öğrenirsin.
Path nedir?
Path, birden fazla çizgi ve eğriyi tek bir şekilde birleştirmenin yoludur. moveTo ile başlangıç noktasına gider, lineTo ile o noktadan yeni bir noktaya çizgi çizer. Sonunda canvas.drawPath ile Path'i bir Paint ile çizersin.
final path = Path();
path.moveTo(10, 10);
path.lineTo(90, 10);
path.lineTo(50, 90);
path.close();
canvas.drawPath(path, paint);Path ile çokgenler
Path ile üçgen, yıldız gibi çokgenleri kolayca çizebilirsin. moveTo ile başla, arka arkaya lineTo ile köşeleri ekle, close ile kapat. Path'i doldurmak için Paint'in style'ını PaintingStyle.fill yap.
final paint = Paint()
..color = Colors.green
..style = PaintingStyle.fill;
final ucgen = Path()
..moveTo(50, 10)
..lineTo(90, 90)
..lineTo(10, 90)
..close();
canvas.drawPath(ucgen, paint);Uygulama Path ile üçgen çiz
TrianglePainter sınıfında paint metodu yaz. Path kullanarak (10,90), (90,90), (50,10) köşelerinden mavi dolu üçgen çiz. main içinde painter örneğini alıp tipini yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// TrianglePainter sınıfını tanımla
void main() {
// TrianglePainter örneğini al ve tipini yazdır
}Örnek çözüm
import 'package:flutter/material.dart';
class TrianglePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.blue
..style = PaintingStyle.fill;
final path = Path();
path.moveTo(10, 90);
path.lineTo(90, 90);
path.lineTo(50, 10);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
void main() {
final painter = TrianglePainter();
print(painter.runtimeType);
}Beklenen çıktı
TrianglePainter
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşağıdakilerden hangisi doğrudur?
- moveTo noktaya bir çizgi çizer
- close başlangıç noktasına çizgi çizer ve şekli kapatır Doğru cevap
- close Path'i başlatır
- lineTo kalemle çizmeden noktaya taşır
Açıklama: close, Path'in başlangıç noktasına geri çizgi çeker ve şekli kapatır; moveTo çizmeden taşır, lineTo çizerek gider.
2 drawPath'a Paint ver
canvas.drawPath(path, ____);canvas.drawPath(path, paint);Açıklama: drawPath ikinci parametre olarak Paint nesnesi bekler; Color doğrudan verilemez.
3 Path eşleşmeleri
| Kavram | Anlamı |
|---|---|
Path |
Çoklu çizgi şekli |
moveTo |
Kalemi çizmeden taşır |
lineTo |
Çizgi çizer |
close |
Şekli kapatır |