Yüksek Başarımlı Çizim için TimelineView ve Canvas

TimelineView Genel Bakışı

TimelineView(.animation) { timeline in
  Text(timeline.date.formatted(date: .omitted, time: .standard))
}

TimelineSchedule Türleri

TimelineView(.periodic(from: .now, by: 1.0)) { context in
  ClockFace(date: context.date)
}

Canvas Genel Bakışı

Canvas { ctx, size in
  ctx.fill(
    Path(ellipseIn: CGRect(origin: .zero, size: size)),
    with: .color(.blue)
  )
}

Canvas'ta Şekiller Çizme

Canvas { ctx, size in
  var path = Path()
  path.move(to: .zero)
  path.addLine(to: CGPoint(x: size.width, y: size.height))
  ctx.stroke(path, with: .color(.red), lineWidth: 2)
}

TimelineView ve Canvas'ı Birleştirme

TimelineView(.animation) { timeline in
  Canvas { ctx, size in
    let t = timeline.date.timeIntervalSinceReferenceDate
    let x = size.width * (0.5 + 0.4 * cos(t))
    let y = size.height * (0.5 + 0.4 * sin(t))
    ctx.fill(Path(ellipseIn: CGRect(x: x-10, y: y-10, width: 20, height: 20)), with: .color(.orange))
  }
}

Sembolleri Çözümleme

Canvas { ctx, size in
  let symbol = ctx.resolveSymbol(id: "star")!
  ctx.draw(symbol, at: CGPoint(x: 50, y: 50))
} symbols: {
  Image(systemName: "star.fill").tag("star")
}

Canvas'ta Metin ve Biçimlendirilmiş Dizeler

Canvas { ctx, size in
  ctx.draw(
    Text("Score: 100").font(.title).foregroundStyle(.white),
    at: CGPoint(x: size.width/2, y: 30)
  )
}

Dönüşümler ve Kırpma

Canvas { ctx, size in
  ctx.translateBy(x: size.width/2, y: size.height/2)
  ctx.rotate(by: .degrees(45))
  ctx.fill(Path(CGRect(x: -50, y: -50, width: 100, height: 100)), with: .color(.purple))
}

SwiftUI Görünümlerine Kıyasla Performans

// Benchmark: 500 moving dots
// Canvas: ~120fps on iPhone
// SwiftUI views: ~30fps due to view tree overhead

Canvas'ta Erişilebilirlik

Canvas { ctx, size in
  // draw chart bars
}
.accessibilityChildren {
  ForEach(bars) { Text("\($0.label): \($0.value)") }
}

TimelineView Yenileme Sıklığı

TimelineView(.animation) { ctx in
  if ctx.cadence == .live {
    HighDetailAnimation(date: ctx.date)
  } else {
    LowDetailAnimation(date: ctx.date)
  }
}

Kısa Kontrol

Ders Özeti