Printable Page

ክፍል 4፥ ፓዝ (Path)

መሠረታዊ ቅርጾች ሊሰጡን የሚችሉት የሥዕል ዓይነቶች በጣም ውስን ናቸው። አንዱን ካንዱ በማዛነቅ ልንፈጥር የምንችለው ሥዕል አያሌ ቢሆኑም ቅሉ ሥራችን እየተራቀቀ ሲመጣ ችግሮች መተናቀቅ ይጀምራሉ።

ፓዝ (path) ሲሉ፥ እያንዳንዱ የሥዕል ቅርጽ ያለፍ ዘንድ የተነደፈ ዱካ (ጐዳና) ለማለት ነው። የፓዝ ቃል <path&gr; የራሱ የሆነ ቅርጽ ነዳፊዎች አሉት። እነሱም መስመር፥ ኢልፕስ፥ እና ጥምዝ (curve) ናቸው። ዝርዝሩን ወደ ፊት እንመለከታለን።

የፓዝ አብዩ ጥቅም ጥልፍልፍና አስቸጋሪ ቅርጾችን ለመሣል ያለው ብቃት ነው። ለምሳሌ ያንድን አገር ትክክለኛ ካርታ በመሠረታዊ ቅርጾች ብቻ መገንባት በፍጹም አይቻልም። ለእንደዚህ ዓይነት ችግሮች ፓዝ ተገቢ መፍትሔ ነው።

የፓዝ ቃል መጠሪያ ስሙ «ዴታ» (data) የሆነ ክፍል አለው። የዚህ ክፍል ኃላፊነት ቅርጽ ነደፋ ነው። ላሠራር ያመች ዘንድ «data» መጻፍ ያለበት ባጭር መንገድ እንደ «d» ነው። የፓዝ ቃል አጻጻፍ በምሳሌ መልክ እንዲህ ይመስላል።

   <path d="M150,400 L300,400" 
            style="stroke: gray; stroke-width: 2"/>

				

በፓዝ ሥር ለ«d» መሰየም ያለባቸው ቅርጽ ነዳፊ ቃላት በውል የታወቁ ናቸው። ለየቅል ወይም በጋራ መጠቀም ይፈቀዳል። አብዛኛዎቹ ከምሳሌ ጋር ቀጥለው ቀርቧል። እዚህ ተቀርፈው የቀረቡት የSVG ቃላት የተወሰዱት ከዚህ ምሳሌ ነው።

ተግባራዊ ምሳሌ፦ svg_path.svg

1. moveto (M | m)፦ ያንድን ቅርጽ መነሻ ነጥብ ይሠጣል። አጠቃቀሙ ይኸን ይመስላል።

   <path d="M150,400 L300,400" style="stroke: gray; stroke-width: 2"/>

   የ«M150,400» ትርጕም የሥዕሉ መነሻ ነጥብ በx-አክሰስ 150፥ በy-አክሰስ 400 ነጥብ ይሁን ነው።

2. lineto (L | l)፦ አስቀድሞ ከተሰጠ መነሻ ነጥብ ተንስቶ ለሱ እስከ ተሰጠው ነጥብ ድረስ ቀጥተኛ መስመር ይሠራል። መነሻ ነጥቡ በቅድሚያ መወሰን አለበት።

<path d="M150,400 L300,400" style="stroke: gray; stroke-width: 2"/>

ማብራሪያ፦

1. M150,400 ወደ moveto 150,400 ይተረጐማል።
2. ቀራጺውን (150,400) ነጥብ ላይ ያስተካክላል፤
3. L300,400 ወደ lineto 300,400 ይተረጐማል።
4. ከመነሻ ነጠብ ተነስቶ እስከ (300,400) ድረስ በግሬይ ቀለም መስመር ይታነጻል።

3. አግዳሚ lineto (H | h)፦ አስቀድሞ ከተሰጠ ነጥብ ተነስቶ በጋድም ቀጥተኛ መስመር ይሠራል። ከላይ ያየነውን ምሳሌ በዚህ መንገድ ብንጽፈው ይኸን ይመስላል።

   <path d="M150,400 H300" style="stroke: gray; stroke-width: 2"/>

   ማብራሪያ፦

   1. ቀራጺውን (150,400) ላይ ያስተካክላል።
   2. አክሰስ ሳይቀይር በጋድም እስከ (H300) ወይም (300,400) ድረስ መስመሩን ይሠራል። ስለዚህ H300 ለ(L300,400) አቋራጭ-ቃል ነው።
4. በዐምድ lineto (V | v)፦ አስቀድሞ ከተሰጠ ነጥብ ተነስቶ በዐምድ ረገድ ቀጥተኛ መስመር ይሠራል። አሠራሩ አስቀድሞ ካየነው ጋር ስለሚመሳሰል እዚህ ላይ ጊዜያችንን አናጠፋም።

5. curveto (C | c)፦ ይህ ቅርጽ ቤዝየር ኲብክ (Bézier Cubic) ተብሎ ይጠራል። ስሙ የመጣው ቅረጹን ካወጣው ከፈረንሲያዊው Pierre Bézier ነው። በወቅቱ ለሬኖልት የመኪና ፋብሪካ ይሠራ ነበር። ይህ ሠዓሊ ቃል አራት ነጥቦች ይጠይቃል። ሁለቱ መነሻና መድረሻ ሲሆኑ፥ ሁለቱ የቅርጹን ጠመዛዛነት መቈጣጠሪያ ነጥቦች ናቸው። ሥይላዊ-ቃሉ እነሆ።

   <path d="M200,250 C300,150 400,350 500,250" style="stroke: red; stroke-width: 1; fill: none"/>

   1. መነሻ ነጥቡ (200,250) ሲሆን መድረሻ ደግሞ (500,250) ነው።
   2. ተቈጣጣሪ ነጥቦች (300,150) እና (400,350) ናቸው።

   ይኸን ሁኔታ በተግባራዊ መንገድ የሚቀጥለው ምሳሌ በግልጽ ያሳያል።

   ተግባራዊ ምሳሌ፦ svg_bezier_curve_overview.svg

   ቀረጺው ከመናሻ ነጥብ ተነስቶ የመጀመሪያውን ተቈጣጣሪ ነጥብ በመደገፍ ቀረጻውን ይጀምርና ወደ መድረሻው ሲያመራ ሁለተኛውን ተቈጣጣሪ ነጥብ ይጠቀማል። እንዲህ እያለ ይቀጥላል። እንደምናየው፥ ሁለቱ ተቈጣጣሪ ነጥቦች የቅርጹን ጠምዛዛነት ይቈጣጠራሉ። ሥዕሉ ባካል ደረጃ እነሱን አይነካም፤ ነገር ግን የመጠምዘዣዎችን ነጥቦች ለማግኘት ይጠቀማቸዋል። በመሆኑም ተቈጣጣሪ ነጥቦችን ትክክለኛ ሥፍራ ላይ መምረጥ የተፈለገውን ውጤት እንድናገኝ ያደርገናል።

   አያሌ ቤዝየር ቅርጾችን በመቀጣጠል ወይም ከሌሎች ቅርጾች ጋር በማዛነቅ ልዩ ልዩ ሥዕሎችን መገንባት እንችላለን።

   ተግባራዊ ምሳሌ፦ svg_bezier_curve.svg

6. closepath (Z | z)፦ የፓዙን (ዱካውን) መነሻና መድረሻ ነጥቦችን ያገጣጥማል።

   <path d="M150,350 H300 L225,200 Z" style="fill: gray"/>