Android'de Path — nedir, oluşturma yöntemleri ve nasıl çizilir

Android'de Path Nedir?

Path, android.graphics paketinden bir sınıftır ve düz çizgiler, ikinci ve üçüncü derece Bezier eğrilerinden oluşan bir yol segmentleri dizisini temsil eder. Her segment, moveTo/lineTo/quadTo/cubicTo yöntemlerinden biri çağrılarak eklenir.

Path, Canvas ve Paint ile yakın bir şekilde çalışır. Canvas.drawPath(path, paint) hazır bir Path alır ve onu mevcut fırça ayarlarıyla çizer. Bu, dikdörtgenler ve dairelerin ötesinde isteğe bağlı şekiller çizmenin birincil yoludur.

Her Path, bir nokta ve segment türleri dizisinden oluşur. Noktalar, X ekseninin sağa ve Y ekseninin aşağıya gittiği Canvas koordinat sisteminde tanımlanır. Varsayılan olarak, orijin View'ın sol üst köşesidir, ancak Canvas.translate ile kaydırılabilir.

Çizgi Oluşturma: moveTo ve lineTo

moveTo yöntemi, çizgi çizmeden kalemi belirtilen noktaya taşır. Bir sonraki segment için başlangıç konumunu ayarlar. moveTo olmadan Path, (0,0) noktasından başlar.

lineTo — Düz Çizgi

lineTo, mevcut kalem konumundan belirtilen noktaya kadar düz bir segment ekler. lineTo çağrıldıktan sonra, mevcut konum segmentin bitiş noktasına taşınır.

rLineTo ve rMoveTo, yöntemlerin göreceli sürümleridir. Mutlak koordinatlar yerine mevcut konumdan dx ve dy ofsetlerini kabul ederler.

val path = Path().apply {
    moveTo(100f, 100f)     // başlangıç noktası A
    lineTo(300f, 100f)     // A -> B
    lineTo(200f, 250f)     // B -> C
    close()                    // C -> A (kapat)
}

Bezier Eğrileri: quadTo ve cubicTo

quadTo, bir kontrol noktasıyla ikinci derece bir Bezier eğrisi ekler. İkinci derece bir eğri üç nokta tarafından tanımlanır: başlangıç (mevcut konum), kontrol ve bitiş.

cubicTo — Üçüncü Derece Bezier Eğrisi

cubicTo, iki kontrol noktasıyla üçüncü derece bir Bezier eğrisi ekler ve karmaşık konturlar oluştururken daha fazla esneklik sağlar.

Kolaylık için, mevcut konumdan ofsetleri kabul eden göreceli sürümler rQuadTo ve rCubicTo bulunur.

Hazır Şekiller: Daireler, Dikdörtgenler ve Yaylar

addCircle, Path'e yeni bir kontur olarak bir daire ekler. Parametreler: merkez koordinatları, yarıçap ve yön (CW — saat yönünde, CCW — saat yönünün tersine).

addRect ve addOval

addRect, sol üst ve sağ alt köşelerin koordinatlarıyla tanımlanan bir dikdörtgen ekler. addOval, verilen dikdörtgenin içine çizilmiş bir oval ekler. addRoundRect, yuvarlak köşeli bir dikdörtgen ekler.

arcTo, bir daire veya elips yayı ekler. Parametreler: sınırlayıcı dikdörtgen, derece cinsinden başlangıç açısı, yay açısı ve forceMoveTo bayrağı.

val path = Path().apply {
    addCircle(200f, 200f, 100f, Path.Direction.CW)
    addRect(50f, 50f, 150f, 150f, Path.Direction.CCW)
    addRoundRect(RectF(300f, 100f, 400f, 200f), 15f, 15f, Path.Direction.CW)
}

Konturlarla Boolean İşlemleri (Path Op)

Path.Op, iki kontur üzerinde boolean işlemleri için bir mekanizmadır ve API 19'dan itibaren kullanılabilir. Desteklenen işlemler: UNION, INTERSECT, DIFFERENCE ve XOR.

Tasarımda Path Op Uygulaması

UNION iki konturu birleştirir. INTERSECT yalnızca her iki kontura ait alanı korur. DIFFERENCE ikinci konturu birinciden çıkarır. XOR yalnızca bir kontura ait alanları korur.

op yöntemi iki Path ve bir işlem alır, sonuç boş değilse true döndürür. Hesaplama karmaşıklığı O(n*m)'dir, burada n ve m her Path'deki segment sayısıdır.

val circle = Path().apply { addCircle(0f, 0f, 100f, Path.Direction.CW) }
val square = Path().apply { addRect(RectF(-50f, -50f, 50f, 50f), Path.Direction.CW) }
val result = Path()
result.op(circle, square, Path.Op.DIFFERENCE) // kare delikli daire

Karmaşık Şekil Oluşturma Örneği

Path kullanarak özel bir kalp simgesi oluşturalım. Şekil, cubicTo kullanılarak iki yay ve iki düz segmentten oluşturulur.

class HeartShape {

    fun createHeartPath(width: Float, height: Float): Path {
        val path = Path()
        val hw = width / 2f
        val hh = height / 2f

        path.moveTo(hw, hh + hh * 0.3f)
        path.cubicTo(hw, hh + hh * 0.6f, hw + hw * 0.5f, hh + hh * 0.5f, hw + hw * 0.5f, hh)
        path.cubicTo(hw + hw * 0.5f, hh * 0.5f, hw + hw * 0.2f, 0f, hw, hh * 0.2f)
        path.cubicTo(hw - hw * 0.2f, 0f, hw - hw * 0.5f, hh * 0.5f, hw - hw * 0.5f, hh)
        path.cubicTo(hw - hw * 0.5f, hh + hh * 0.5f, hw, hh + hh * 0.6f, hw, hh + hh * 0.3f)
        path.close()
        return path
    }
}

Üçüncü derece eğriler cubicTo, kalbin her yarısının şekli üzerinde hassas kontrol sağlar. İlk eğri sol yarıyı, ikincisi sağ yarıyı oluşturur. Alttaki düz segmentler eğrileri kalbin tepesine bağlar.

Şekli test etmek için geçici olarak Paint.Style.STROKE ile işlemeyi etkinleştirebilirsiniz — bu, tüm kontrol noktalarını ve Path segmentlerini gösterecektir.