Swift Academy · Ders

Core Graphics ile Özel Çizim

draw(_:) içinde yollar ve şekiller çizin.

4. ders / 413 adım

Core Graphics ile Özel Çizim, CoddyKit'te ücretsiz bir Swift Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Swift Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Swift Academy kursu toplamda 4 dersten oluşur.

Özel İçerik Ne Zaman Çizilir

Katmanlar ve görseller bir şekli ifade etmeye yetmediğinde (grafikler, imzalar ve özel denetimler gibi), şekli Core Graphics (Quartz 2D) ile kendiniz çizersiniz.

draw(_:) İşlevini Geçersiz Kılma

UIView sınıfından türeyiniz ve draw(_:) işlevini geçersiz kılınız. UIKit, bu işlevi yapılandırılmış bir bağlamla çağırır; çizim komutlarını burada verirsiniz.

import UIKit
final class ChartView: UIView {
    override func draw(_ rect: CGRect) {
        // drawing commands go here
    }
}

Grafik Bağlamı

draw(_:) içinde geçerli CGContext nesnesini alınız. Bu, durum tutan bir tuvaldir: renkleri ve çizgi genişliklerini ayarladıktan sonra kontur çizer veya alanı doldurursunuz.

override func draw(_ rect: CGRect) {
    guard let ctx = UIGraphicsGetCurrentContext() else { return }
    ctx.setFillColor(UIColor.systemTeal.cgColor)
    ctx.fill(rect)
}

Yollar Oluşturma

Bir CGPath (veya UIBezierPath), çizgileri, eğrileri ve şekilleri tanımlar. Bir başlangıç noktasına gidip ardından çizgiler ve eğriler ekleyiniz.

let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 100, y: 50))
path.addLine(to: CGPoint(x: 0, y: 100))
path.close()

Kontur Çizme ve Doldurma

Konturlar bir yolun dış çizgisini oluşturur; dolgular ise içini renklendirir. Rengi ve genişliği ayarladıktan sonra stroke() veya fill() çağrısını yapınız.

UIColor.systemRed.setStroke()
let line = UIBezierPath()
line.lineWidth = 3
line.move(to: CGPoint(x: 10, y: 10))
line.addLine(to: CGPoint(x: 90, y: 90))
line.stroke()

Eğriler

Kontrol noktalarını belirterek ikinci dereceden (addQuadCurve) veya üçüncü dereceden (addCurve) Bezier parçalarıyla yumuşak eğriler ekleyiniz.

let p = UIBezierPath()
p.move(to: CGPoint(x: 0, y: 100))
p.addCurve(to: CGPoint(x: 200, y: 100),
           controlPoint1: CGPoint(x: 50, y: 0),
           controlPoint2: CGPoint(x: 150, y: 200))

Bağlam Durumu: Kaydetme ve Geri Yükleme

Bağlam durum tutar. Değişikliklerin sonraki çizimlere sızmasını önlemek için dönüşümleri ve kırpmayı saveGState()/restoreGState() arasına alınız.

ctx.saveGState()
ctx.translateBy(x: 50, y: 50)
ctx.rotate(by: .pi / 4)
// draw rotated content
ctx.restoreGState()

Renk Geçişleri ve Gölgeler

Core Graphics, renk geçişlerini (CGGradient ile drawLinearGradient) ve gölgeleri (setShadow(offset:blur:color:)) doğrudan bağlama çizer.

ctx.setShadow(offset: CGSize(width: 0, height: 2),
              blur: 4,
              color: UIColor.black.cgColor)

Kırpma

Bir yol ekleyip clip() çağrısını yaparak sonraki çizimleri o bölgeyle sınırlayınız; bu, yuvarlatılmış görseller veya maskelenmiş dolgular için kullanışlıdır.

let clipPath = UIBezierPath(ovalIn: rect)
clipPath.addClip()
// drawing now constrained to the oval

Performans ve setNeedsDisplay

draw(_:), CPU üzerinde çalışır ve görece maliyetlidir. Yeniden çizimleri yalnızca gerektiğinde setNeedsDisplay() aracılığıyla tetikleyiniz ve çizim kodunu yalın tutunuz.

func updateData() {
    self.data = newData
    setNeedsDisplay() // schedule one redraw
}

Ekran Dışı Oluşturma

Yeniden kullanılabilir bit eşlemler için her karede yeniden çizmek yerine UIGraphicsImageRenderer ile bir görselin içine oluşturunuz.

let renderer = UIGraphicsImageRenderer(size: CGSize(width: 100, height: 100))
let image = renderer.image { ctx in
    UIColor.systemBlue.setFill()
    ctx.fill(CGRect(x: 0, y: 0, width: 100, height: 100))
}

Hızlı Kontrol: Core Graphics

Özel çizimle ilgili anlayışınızı sınayınız.

İnteraktif derste cevapla

Özet: Core Graphics ile Özel Çizim

draw(_:) işlevini geçersiz kılıp CGContext nesnesine komutlar veriniz: çizgiler ve Bezier eğrileriyle yollar oluşturup ardından kontur çizin veya alanı doldurunuz. Dönüşümleri ve kırpmayı saveGState()/restoreGState() ile yalıtınız; renk geçişlerini, gölgeleri ve kırpmaları doğrudan ekleyiniz.

Çizim CPU çalışmasıdır; yalnızca setNeedsDisplay() aracılığıyla gerektiğinde yeniden çizin ve yeniden kullanılabilir bit eşlemleri UIGraphicsImageRenderer ile önbelleğe alınız.

Başlamak ücretsiz

Yapay zeka eğitmeniyle Swift öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 122
Dersler: 409

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Core Graphics ile Özel Çizim” dersi ücretsiz mi?

Evet — “Core Graphics ile Özel Çizim” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Swift Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Swift Academy kursu toplamda 4 dersten oluşur.

“Core Graphics ile Özel Çizim” dersinde ne öğreneceğim?

draw(_:) içinde yollar ve şekiller çizin. Swift Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Swift Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Swift Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Core Graphics ile Özel Çizim” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Swift Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Swift Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Swift Academy Sayfasına Dön