Android میں Path — یہ کیا ہے، تعمیر کے طریقے اور کیسے بنائیں

Android میں Path کیا ہے؟

Path android.graphics پیکیج کا ایک کلاس ہے جو راستے کے حصوں کی ترتیب کی نمائندگی کرتا ہے: سیدھی لکیریں، مربعی اور مکعب Bezier منحنی۔ ہر حصہ moveTo/lineTo/quadTo/cubicTo طریقوں میں سے کسی ایک کو کال کرکے شامل کیا جاتا ہے۔

Path Canvas اور Paint کے ساتھ مل کر کام کرتا ہے۔ Canvas.drawPath(path, paint) ایک تیار شدہ Path لیتا ہے اور اسے موجودہ برش کی ترتیبات کے ساتھ کھینچتا ہے۔ یہ مستطیلوں اور دائروں سے آگے صوابدیدی شکلیں کھینچنے کا بنیادی طریقہ ہے۔

ہر 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)     // ابتدا نقطہ A
    lineTo(300f, 100f)     // A -> B
    lineTo(200f, 250f)     // B -> C
    close()                    // C -> A (بند کریں)
}

Bezier منحنی: quadTo اور cubicTo

quadTo ایک کنٹرول پوائنٹ کے ساتھ ایک مربعی Bezier منحنی شامل کرتا ہے۔ ایک مربعی منحنی تین پوائنٹس سے متعین ہوتا ہے: آغاز (موجودہ پوزیشن)، کنٹرول اور اختتام۔

cubicTo — مکعب Bezier منحنی

cubicTo دو کنٹرول پوائنٹس کے ساتھ ایک مکعب Bezier منحنی شامل کرتا ہے، جو پیچیدہ کنٹور بنانے میں زیادہ لچک فراہم کرتا ہے۔

سہولت کے لیے، نسبتی ورژن rQuadTo اور rCubicTo موجود ہیں، جو موجودہ پوزیشن سے آفسیٹ قبول کرتے ہیں۔

تیار شدہ شکلیں: دائرے، مستطیل اور قوس

addCircle Path میں ایک نیا کنٹور کے طور پر دائرہ شامل کرتا ہے۔ پیرامیٹرز: مرکز کے کوآرڈینیٹ، رداس اور سمت (CW — گھڑی کی سمت، CCW — گھڑی کے مخالف سمت)۔

addRect اور addOval

addRect اوپری بائیں اور نچلے دائیں کونوں کے کوآرڈینیٹ سے متعین کردہ مستطیل شامل کرتا ہے۔ addOval دیے گئے مستطیل میں inscribed بیضوی شکل شامل کرتا ہے۔ 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 طریقہ دو Path اور ایک کارروائی لیتا ہے، اگر نتیجہ خالی نہ ہو تو true لوٹاتا ہے۔ حسابی پیچیدگی O(n*m) ہے، جہاں n اور m ہر Path میں حصوں کی تعداد ہے۔

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 حصوں کو دکھائے گا۔