Path في Android — ما هو، طرق البناء والرسم

ما هو Path في Android؟

Path هي فئة من حزمة android.graphics تمثل تسلسلًا من مقاطع المسار: خطوط مستقيمة ومنحنيات بيزير تربيعية وتكعيبية. يُضاف كل مقطع عن طريق استدعاء أحد الطرق moveTo/lineTo/quadTo/cubicTo.

يعمل Path بشكل وثيق مع Canvas وPaint. يأخذ Canvas.drawPath(path, paint) مسارًا جاهزًا ويرسمه بإعدادات الفرشاة الحالية. هذه هي الطريقة الأساسية لرسم أشكال عشوائية تتجاوز المستطيلات والدوائر.

يتكون كل Path من تسلسل من النقاط وأنواع المقاطع. تُحدد النقاط في نظام إحداثيات Canvas، حيث يتجه المحور X إلى اليمين والمحور Y إلى الأسفل. افتراضيًا، يكون الأصل هو الزاوية العلوية اليسرى من View، ولكن يمكن إزاحته عبر Canvas.translate.

بناء الخطوط: moveTo وlineTo

طريقة moveTo تنقل القلم إلى النقطة المحددة دون رسم خط. تحدد الموضع الأولي للمقطع التالي. بدون moveTo، يبدأ Path من النقطة (0,0).

lineTo — خط مستقيم

lineTo يُضيف مقطعًا مستقيمًا من موضع القلم الحالي إلى النقطة المحددة. بعد استدعاء lineTo، ينتقل الموضع الحالي إلى نقطة نهاية المقطع.

rLineTo وrMoveTo هما نسختان نسبيتان من الطرق. تقبلان إزاحات dx وdy من الموضع الحالي بدلاً من الإحداثيات المطلقة.

val path = Path().apply {
    moveTo(100f, 100f)     // نقطة البداية أ
    lineTo(300f, 100f)     // أ -> ب
    lineTo(200f, 250f)     // ب -> ج
    close()                    // ج -> أ (إغلاق)
}

منحنيات بيزير: quadTo وcubicTo

quadTo يُضيف منحنى بيزير تربيعيًا بنقطة تحكم واحدة. يُحدد المنحنى التربيعي بثلاث نقاط: البداية (الموضع الحالي) والتحكم والنهاية.

cubicTo — منحنى بيزير تكعيبي

cubicTo يُضيف منحنى بيزير تكعيبيًا بنقطتي تحكم، مما يوفر مرونة أكبر عند تشكيل الخطوط المعقدة.

لتسهيل الاستخدام، توجد إصدارات نسبية rQuadTo وrCubicTo تقبل إزاحات من الموضع الحالي.

الأشكال الجاهزة: الدوائر والمستطيلات والأقواس

addCircle يُضيف دائرة إلى Path كخط جديد. المعلمات: إحداثيات المركز ونصف القطر والاتجاه (CW — باتجاه عقارب الساعة، CCW — عكس عقارب الساعة).

addRect وaddOval

addRect يُضيف مستطيلًا محددًا بإحداثيات الزاويتين العلوية اليسرى والسفلية اليمنى. addOval يُضيف شكلًا بيضاويًا محفورًا في المستطيل المحدد. addRoundRect يُضيف مستطيلًا بزوايا مدورة.

arcTo يُضيف قوس دائرة أو قطع ناقص. المعلمات: المستطيل المحيط، الزاوية الابتدائية بالدرجات، زاوية القوس، والعلم forceMoveTo.

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)
}

العمليات المنطقية مع الخطوط (Path Op)

Path.Op هي آلية للعمليات المنطقية على خطين، متاحة منذ API 19. العمليات المدعومة: UNION وINTERSECT وDIFFERENCE وXOR.

تطبيق Path Op في التصميم

UNION يدمج خطين في خط واحد. INTERSECT يحتفظ فقط بالمنطقة المشتركة بين الخطين. DIFFERENCE يطرح الخط الثاني من الأول. XOR يحتفظ بالمناطق التي تنتمي إلى خط واحد فقط.

طريقة op تأخذ مسارين وعملية، وتعيد true إذا لم تكن النتيجة فارغة. التعقيد الحسابي هو O(n*m)، حيث n وm هما عدد المقاطع في كل مسار.

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) // دائرة بفتحة مربعة

مثال لبناء شكل معقد

لننشئ أيقونة قلب مخصصة باستخدام Path. يُبنى الشكل من قوسين وقطعتين مستقيمتين باستخدام cubicTo.

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
    }
}

المنحنيات التكعيبية cubicTo تسمح بالتحكم الدقيق في شكل كل نصف من القلب. يشكل المنحنى الأول النصف الأيسر، والثاني — النصف الأيمن. تربط القطع المستقيمة في الأسفل المنحنيات بقمة القلب.

لاختبار الشكل، يمكنك تمكين العرض مؤقتًا باستخدام Paint.Style.STROKE — سيظهر هذا جميع نقاط التحكم ومقاطع Path.