Theory
जब Lines में Width होती है
अब तक एक line एक pixel wide रही है। पर असली graphics thick lines इस्तेमाल करता है, borders, strokes, emphasis, और एक बार एक line में width आ जाए, नए questions appear होते हैं: इसके ends कैसे दिखने चाहिए, और दो thick segments corner पर कैसे join होने चाहिए?
Line unit का यह closing lesson line styles cover करता है: thick lines कैसे draw की जाती हैं, और वे caps और joints जो इन्हें neatly finish करते हैं। ये details matter करते हैं: इनके बिना, thick lines के ragged ends और ugly, gapped corners होते हैं। ये drawing algorithms के ऊपर polish हैं।
Theory
एक Thick Line Draw करना
एक thick line की width एक pixel से ज़्यादा होती है। एक draw करने के कुछ तरीके हैं: line की direction के perpendicular extra pixels stack कीजिए, कई adjacent parallel lines draw कीजिए, या thick line को path के along चलने वाला एक filled rectangle (एक polygon) treat कीजिए।
कोई भी method हो, result एक single pixel trail की बजाय area वाली एक line है। और यही exactly वह है जो caps और joints की ज़रूरत create करता है: width वाले एक shape के ends होते हैं जो space occupy करते हैं और corners होते हैं जहाँ दो widths मिलती हैं, दोनों को deliberately style करना पड़ता है, नहीं तो ये wrong दिखते हैं।
At a glance
| Style | Type | Appearance |
|---|---|---|
| Butt cap | End | Flat, endpoint पर exactly cut off |
| Round cap | End | Endpoint से आगे बढ़ता एक semicircle |
| Square (projecting) cap | End | Flat, endpoint से आगे half width तक extended |
| Miter joint | Corner | Outer edges एक sharp point तक extended |
| Round joint | Corner | एक rounded corner |
| Bevel joint | Corner | Corner के across एक flat cut |
Theory
Caps और Joints
Line caps decide करते हैं एक thick line कैसे end होती है। एक butt cap flat है और endpoint पर exactly रुकता है। एक round cap end से बस आगे एक semicircle add करता है (एक soft, rounded finish)। एक square (projecting) cap flat है पर endpoint से आगे line की width का half extend होता है।
Line joints (joins) decide करते हैं दो thick segments एक corner पर कैसे मिलते हैं। एक miter joint outer edges को तब तक extend करता है जब तक वे एक sharp point पर न मिलें (एक picture frame corner की तरह)। एक round joint एक rounded corner देता है। एक bevel joint corner के across एक flat cut बनाता है। Caps और joints choose करना ही है जिससे आप thick lines और shapes को clean और intentional दिखा सकते हैं, ragged नहीं।
Quiz
जहाँ दो thick line segments एक corner पर मिलते हैं, कौन सा joint इनके outer edges को एक sharp point तक extend करता है?
- एक round joint, क्योंकि यह pointed है
- एक miter joint, जो outer edges को तब तक extend करता है जब तक वे एक sharp point पर न मिलें
- एक bevel joint, क्योंकि यह sharp है
- एक butt cap, क्योंकि यह line को end करता है
Show the answer
एक miter joint, जो outer edges को तब तक extend करता है जब तक वे एक sharp point पर न मिलें
एक miter joint दो thick segments के outer edges को तब तक extend करता है जब तक वे एक sharp point पर न मिलें, एक crisp, pointed corner देते हुए (एक picture frame की तरह)। Option A wrong है: एक ROUND joint एक rounded, pointed नहीं, corner देता है। Option C wrong है: एक BEVEL joint corner के across एक flat cut बनाता है, sharp point का opposite। Option D categories confuse करता है: एक butt CAP इसके बारे में है कि एक line कैसे ENDS होती है, corner पर दो segments कैसे JOIN होते हैं इसके बारे में नहीं। याद रखिए: caps line ends finish करते हैं (butt, round, square), joints corners handle करते हैं (miter = sharp point, round = curved, bevel = flat cut)।
Think first
Thick Lines को Caps और Joints क्यों चाहिए जब Thin Lines को नहीं चाहिए?
एक one-pixel line बस end होती है और turn होती है। Width add करना caps और joints की ज़रूरत क्यों create करता है? फिर tap कीजिए।
Show the answer
क्योंकि एक line को WIDTH देना इसे single pixels के trail से AREA वाले एक SHAPE में बदल देता है, और shapes के ends और corners होते हैं जो space occupy करते हैं और जिन्हें define करना पड़ता है, जबकि एक one-pixel line में resolve करने के लिए ऐसी कोई width नहीं है। पहले ends के बारे में सोचिए। एक thin line एक single pixel पर end होती है, decide करने के लिए कुछ भी नहीं है। पर एक thick line, effect में, एक long rectangle है; इसका end width वाला एक पूरा EDGE है, और आपको उस edge का shape decide करना पड़ता है: endpoint पर exactly flat cut कीजिए (butt), इसे round off कीजिए (round), या endpoint से थोड़ा आगे extend कीजिए (square)। अलग choices अलग दिखती हैं और अलग designs को suit करती हैं, तो end style, cap, एक real decision बन जाता है। अब corners। जब दो thin lines मिलती हैं, एक pixel बस next से connect हो जाता है। पर जब दो THICK segments एक angle पर मिलते हैं, इनकी widths automatically together fit नहीं होतीं: bend के outside पर एक gap या overshoot होता है जहाँ दोनों rectangles के outer edges naturally नहीं मिलते, और आपको decide करना पड़ता है उस corner को कैसे fill करें, edges को एक sharp point तक extend कीजिए (miter), इसे round कीजिए (round), या इसे flat slice कीजिए (bevel)। एक defined joint के बिना, corner broken, gapped, या spiky दिखेगा। तो caps और joints decorative extras नहीं हैं; ये एक line के area होने का necessary consequence हैं: width वाले किसी भी shape के ends और corners होते हैं जिन्हें एक form देना पड़ता है। यही वजह है graphics systems (और drawing tools, और CSS) सब cap और join options provide करते हैं। Width area create करती है, और area ऐसे ends और corners create करती है जिन्हें style करना पड़ता है।
Summary
Key takeaways
- एक thick line की width एक pixel से ज़्यादा होती है, perpendicular pixels stack करके, parallel lines से, या path के along एक filled rectangle से drawn।
- Width होना line को area देता है, जो इसके ends और corners को style करने की ज़रूरत create करता है।
- Line caps एक thick line के ends finish करते हैं: butt (endpoint पर flat), round (इससे आगे semicircle), square/projecting (flat, इससे आगे half-width extended)।
- Line joints उन corners को handle करते हैं जहाँ दो thick segments मिलते हैं: miter (outer edges एक sharp point तक), round (rounded), bevel (flat cut)।
- Line style का मतलब pattern भी हो सकता है: solid, dashed, या dotted।
- Caps और joints thick lines और shapes को ragged या gapped की बजाय clean दिखाते हैं।
- Memory hook: width area बनाती है; caps ends finish करते हैं (butt/round/square), joints corners finish करते हैं (miter/round/bevel)।