Flutter
Path
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.
Örnek çözümü göster
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);
}
Kendini test et
-
Aşağıdakilerden hangisi doğrudur?
- moveTo noktaya bir çizgi çizer
- close başlangıç noktasına çizgi çizer ve şekli kapatır
- close Path'i başlatır
- lineTo kalemle çizmeden noktaya taşır
Cevabı göster
close başlangıç noktasına çizgi çizer ve şekli kapatır — close, Path'in başlangıç noktasına geri çizgi çeker ve şekli kapatır; moveTo çizmeden taşır, lineTo çizerek gider.
-
drawPath'a Paint ver
canvas.drawPath(path, ____);
Cevabı göster
canvas.drawPath(path, paint);
-
Path eşleşmeleri
- Path
- Çoklu çizgi şekli
- moveTo
- Kalemi çizmeden taşır
- lineTo
- Çizgi çizer
- close
- Şekli kapatır
Sıradaki ders: Özet - CustomPainter
