Canvas ve Paint

Canvas ve Paint ile çizgi, daire ve dikdörtgen çizmeyi öğrenirsin.

Canvas ve Paint

Canvas, üzerine çizim yaptığın yüzeydir; Paint ise fırçadır ve renk, kalınlık gibi özellikleri taşır. Bir daire çizmek için canvas.drawCircle'a merkez nokta, yarıçap ve bir Paint verirsin.

final paint = Paint()
  ..color = Colors.red
  ..style = PaintingStyle.fill;
canvas.drawCircle(Offset(50, 50), 40, paint);

Paint stilleri

Paint'in style özelliği PaintingStyle.fill ile içi boyar, PaintingStyle.stroke ile yalnızca kenarı çizer. strokeWidth kenar kalınlığını belirler. Aynı canvas üzerinde birden fazla Paint kullanabilirsin.

final kenar = Paint()
  ..style = PaintingStyle.stroke
  ..strokeWidth = 3;
canvas.drawRect(rect, kenar);

Uygulama Kırmızı dolu daire çiz

CirclePainter sınıfında paint metodu yaz. Kırmızı dolu bir daire çiz (merkez 50,50, yarıçap 30). main içinde painter örneğini alıp tipini yazdır.

Örnek çözümü göster

import 'package:flutter/material.dart';

class CirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;
    canvas.drawCircle(const Offset(50, 50), 30, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

void main() {
  final painter = CirclePainter();
  print(painter.runtimeType);
}

Kendini test et

Aşağıdakilerden hangisi geçerli bir drawCircle çağrısıdır?
- canvas.drawCircle(Colors.red, 40, paint)
- canvas.drawCircle(40, Offset(50, 50), paint)
- canvas.drawCircle(Offset(50, 50), 40, paint)
- canvas.drawCircle(paint, Offset(50, 50), 40)
Cevabı göster

canvas.drawCircle(Offset(50, 50), 40, paint) — drawCircle'ın imzası drawCircle(Offset c, double radius, Paint paint) şeklindedir; önce merkez, sonra yarıçap, en son Paint verilir.

drawCircle'a Paint ver

canvas.drawCircle(Offset(50, 50), 40, ____);

Cevabı göster

canvas.drawCircle(Offset(50, 50), 40, paint);

Canvas ve Paint eşleşmeleri

Canvas

Çizim yüzeyi
Paint

Fırça özellikleri
drawCircle

Daire çizer
PaintingStyle.fill

İçi dolu boya

Sıradaki ders: Path

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler