Android में Path — यह क्या है, निर्माण विधियाँ और कैसे बनाएं

Android में Path क्या है?

Path android.graphics पैकेज का एक वर्ग है जो पथ खंडों के अनुक्रम का प्रतिनिधित्व करता है: सीधी रेखाएं, द्विघात और घन बेज़ियर वक्र। प्रत्येक खंड 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)     // start point A
    lineTo(300f, 100f)     // A -> B
    lineTo(200f, 250f)     // B -> C
    close()                    // C -> A (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 विधि दो 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) // circle with square hole

जटिल आकार बनाने का उदाहरण

आइए 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 खंड दिखाएगा।