Theory
જ્યારે રેખાઓને પહોળાઈ હોય
અત્યાર સુધી રેખા એક pixel પહોળી હતી. પણ ખરા graphics માં જાડી રેખાઓ વપરાય છે, જેમ કે કિનારીઓ, strokes અને ભાર દેખાડવા માટેની રેખાઓ. અને એક વાર રેખાને પહોળાઈ મળે એટલે નવા પ્રશ્નો ઊભા થાય છે: એના છેડા કેવા દેખાવા જોઈએ, અને ખૂણે બે જાડા ટુકડા કઈ રીતે જોડાવા જોઈએ?
રેખા વાળા unit નો આ છેલ્લો પાઠ line styles આવરી લે છે: જાડી રેખાઓ કઈ રીતે દોરાય છે, અને એમને સુઘડ રીતે પૂરી કરતાં caps તથા joints કયાં છે. આ વિગતો મહત્ત્વની છે: એમના વગર જાડી રેખાઓના છેડા ફાટેલા દેખાય છે અને ખૂણા બેડોળ તથા ખાલી જગ્યાવાળા લાગે છે. Drawing algorithms ઉપરનો આ ઓપ છે.
Theory
જાડી રેખા દોરવી
જાડી રેખાની પહોળાઈ એક pixel કરતાં વધારે હોય છે. એને દોરવાની થોડી રીતો છે: રેખાની દિશાને લંબ દિશામાં વધારાના pixels ગોઠવવા, થોડી અડોઅડ સમાંતર રેખાઓ દોરવી, અથવા જાડી રેખાને એ માર્ગ પર દોડતા ભરેલા લંબચોરસ (એટલે કે polygon) તરીકે ગણવી.
પદ્ધતિ ગમે તે હોય, પરિણામ એ આવે છે કે રેખા ફક્ત pixels ની હાર નહીં પણ ક્ષેત્રફળવાળી વસ્તુ બની જાય છે. અને caps તથા joints ની જરૂર બરાબર એમાંથી જ ઊભી થાય છે: પહોળાઈવાળી આકૃતિના છેડા જગ્યા રોકે છે અને એના ખૂણે બે પહોળાઈઓ મળે છે, અને એ બંનેને ઇરાદાપૂર્વક ઘાટ આપવો પડે છે, નહીં તો દેખાવ બગડે છે.
At a glance
| શૈલી | પ્રકાર | દેખાવ |
|---|---|---|
| Butt cap | છેડો | સપાટ, બરાબર અંતિમ બિંદુ પર જ કપાયેલો |
| Round cap | છેડો | અંતિમ બિંદુની આગળ નીકળતું અર્ધવર્તુળ |
| Square (projecting) cap | છેડો | સપાટ, પણ અંતિમ બિંદુથી અડધી પહોળાઈ જેટલો આગળ લંબાયેલો |
| Miter joint | ખૂણો | બહારની કિનારીઓ લંબાવીને અણીદાર બિંદુ સુધી લઈ જવાય |
| Round joint | ખૂણો | ગોળ વળાંકવાળો ખૂણો |
| Bevel joint | ખૂણો | ખૂણા આરપાર સપાટ કાપ |
Theory
Caps અને joints
Line caps નક્કી કરે છે કે જાડી રેખા કઈ રીતે પૂરી થાય. Butt cap સપાટ હોય છે અને બરાબર અંતિમ બિંદુ પર જ અટકે છે. Round cap છેડાની જરાક આગળ અર્ધવર્તુળ ઉમેરે છે (એટલે કે નરમ, ગોળ સમાપન). Square (projecting) cap સપાટ હોય છે, પણ અંતિમ બિંદુથી રેખાની અડધી પહોળાઈ જેટલો આગળ લંબાય છે.
Line joints નક્કી કરે છે કે ખૂણે બે જાડા ટુકડા કઈ રીતે મળે. Miter joint બહારની કિનારીઓને લંબાવે છે જ્યાં સુધી એ અણીદાર બિંદુ પર ન મળે (જેમ ચિત્રની ફ્રેમનો ખૂણો હોય). Round joint ગોળ વળાંકવાળો ખૂણો આપે છે. Bevel joint ખૂણા આરપાર સપાટ કાપ મૂકે છે. Caps અને joints પસંદ કરવાં એ જ જાડી રેખાઓ તથા આકૃતિઓને ફાટેલી નહીં પણ સ્વચ્છ અને ઇરાદાપૂર્વકની દેખાડવાની રીત છે.
Quiz
જ્યાં બે જાડા રેખાખંડ ખૂણે મળે છે, ત્યાં કયું joint એમની બહારની કિનારીઓ લંબાવીને અણીદાર બિંદુ સુધી લઈ જાય છે?
- Round joint, કારણ કે એ અણીદાર હોય છે
- Miter joint, જે બહારની કિનારીઓ લંબાવે છે જ્યાં સુધી એ અણીદાર બિંદુ પર ન મળે
- Bevel joint, કારણ કે એ તીક્ષ્ણ હોય છે
- Butt cap, કારણ કે એ રેખાને પૂરી કરે છે
Show the answer
Miter joint, જે બહારની કિનારીઓ લંબાવે છે જ્યાં સુધી એ અણીદાર બિંદુ પર ન મળે
Miter joint બે જાડા ટુકડાની બહારની કિનારીઓને લંબાવે છે જ્યાં સુધી એ અણીદાર બિંદુ પર ન મળે, અને એ રીતે ચોખ્ખો, અણીદાર ખૂણો આપે છે (જેમ ચિત્રની ફ્રેમમાં હોય). વિકલ્પ A ખોટો છે: round joint તો ગોળ વળાંકવાળો ખૂણો આપે છે, અણીદાર નહીં. વિકલ્પ C ખોટો છે: bevel joint ખૂણા આરપાર સપાટ કાપ મૂકે છે, જે અણીદાર બિંદુથી સાવ ઊલટું છે. વિકલ્પ D વર્ગ જ ગૂંચવે છે: butt cap એ રેખા કઈ રીતે પૂરી થાય એની વાત છે, ખૂણે બે ટુકડા કઈ રીતે જોડાય એની નહીં. યાદ રાખો: caps રેખાના છેડા પૂરા કરે છે (butt, round, square), અને joints ખૂણા સંભાળે છે (miter એટલે અણીદાર બિંદુ, round એટલે વળાંક, bevel એટલે સપાટ કાપ).
Think first
પાતળી રેખાઓને caps અને joints ની જરૂર નથી પડતી, તો જાડી રેખાઓને કેમ પડે છે?
એક pixel વાળી રેખા તો બસ પૂરી થાય છે અને વળી જાય છે. તો પહોળાઈ ઉમેરવાથી caps તથા joints ની જરૂર કેમ ઊભી થાય છે? વિચારીને પછી tap કરો.
Show the answer
કારણ કે રેખાને પહોળાઈ આપવાથી એ છૂટા pixels ની હારમાંથી ક્ષેત્રફળવાળી આકૃતિ બની જાય છે, અને આકૃતિઓના છેડા તથા ખૂણા જગ્યા રોકે છે એટલે એમનો ઘાટ નક્કી કરવો પડે છે; જ્યારે એક pixel વાળી રેખામાં ઉકેલવા જેવી કોઈ પહોળાઈ જ હોતી નથી.
પહેલાં છેડાનો વિચાર કરો. પાતળી રેખા એક pixel પર પૂરી થાય છે, એટલે નક્કી કરવા જેવું કશું જ નથી. પણ જાડી રેખા હકીકતમાં એક લાંબા લંબચોરસ જેવી છે; એનો છેડો પહોળાઈવાળી આખી કિનારી છે, અને એ કિનારીનો ઘાટ તમારે નક્કી કરવો પડે છે: બરાબર અંતિમ બિંદુ પર સપાટ કાપવો (butt), એને ગોળ કરવો (round), કે અંતિમ બિંદુથી થોડો આગળ લંબાવવો (square). જુદી જુદી પસંદગીઓ જુદી દેખાય છે અને જુદી રચનાઓને બંધ બેસે છે, એટલે છેડાની શૈલી, એટલે કે cap, ખરેખરનો નિર્ણય બની જાય છે.
હવે ખૂણા. બે પાતળી રેખાઓ મળે ત્યારે એક pixel બીજા સાથે જોડાઈ જાય છે, બસ. પણ જ્યારે બે જાડા ટુકડા ખૂણો બનાવીને મળે, ત્યારે એમની પહોળાઈઓ આપોઆપ બંધ બેસી જતી નથી: વળાંકની બહારની બાજુએ એવી જગ્યા રહી જાય છે કે જ્યાં બે લંબચોરસની બહારની કિનારીઓ કુદરતી રીતે મળતી નથી, ત્યાં ખાલી જગ્યા કે વધારાનો ફેલાવો બને છે, અને એ ખૂણો કઈ રીતે ભરવો એ તમારે નક્કી કરવું પડે છે: કિનારીઓ લંબાવીને અણીદાર બિંદુ સુધી લઈ જવી (miter), એને ગોળ કરવો (round), કે સપાટ કાપી નાખવો (bevel). નક્કી કરેલા joint વગર ખૂણો તૂટેલો, પોલો કે કાંટા જેવો દેખાય.
એટલે caps અને joints શણગારના વધારાના ટુકડા નથી; રેખાને ક્ષેત્રફળ હોવાનું એ અનિવાર્ય પરિણામ છે: પહોળાઈવાળી કોઈ પણ આકૃતિના છેડા અને ખૂણા હોય છે, અને એમને ઘાટ આપવો જ પડે છે. એટલે જ graphics systems (અને drawing tools, અને CSS) બધાં cap તથા join ના વિકલ્પો આપે છે. પહોળાઈ ક્ષેત્રફળ બનાવે છે, અને ક્ષેત્રફળ એવા છેડા તથા ખૂણા બનાવે છે જેમને શૈલી આપવી પડે.
Summary
Key takeaways
- જાડી રેખાની પહોળાઈ એક pixel કરતાં વધારે હોય છે, અને એ લંબ દિશામાં pixels ગોઠવીને, સમાંતર રેખાઓ દોરીને, કે માર્ગ પર ભરેલા લંબચોરસ તરીકે દોરાય છે.
- પહોળાઈ હોવાથી રેખાને ક્ષેત્રફળ મળે છે, અને એટલે એના છેડા તથા ખૂણાને શૈલી આપવાની જરૂર ઊભી થાય છે.
- Line caps જાડી રેખાના છેડા પૂરા કરે છે: butt (અંતિમ બિંદુ પર સપાટ), round (એની આગળ અર્ધવર્તુળ), square કે projecting (સપાટ, પણ અડધી પહોળાઈ જેટલો આગળ લંબાયેલો).
- Line joints એ ખૂણા સંભાળે છે જ્યાં બે જાડા ટુકડા મળે છે: miter (બહારની કિનારીઓ અણીદાર બિંદુ સુધી), round (ગોળ વળાંક), bevel (સપાટ કાપ).
- Line style નો અર્થ ભાત પણ થઈ શકે છે: સળંગ, ડૅશવાળી કે ટપકાંવાળી.
- Caps અને joints જાડી રેખાઓ તથા આકૃતિઓને ફાટેલી કે પોલી નહીં પણ સ્વચ્છ દેખાડે છે.
- યાદ રાખવાની કડી: પહોળાઈ ક્ષેત્રફળ બનાવે છે; caps છેડા પૂરા કરે છે (butt/round/square) અને joints ખૂણા પૂરા કરે છે (miter/round/bevel).