Printable Page

ክፍል 3፥ መሠረታዊ ቅርጾች

በSVG ረገድ፥ መሠረታዊ ተብለው የሚጠቀሱ ቅርጾች አሉ። እንደ አውታር የሚያገለግሉት ነጥቦቻቸው ከታወቁ፥ ለSVG ቅርጾቹን መንደፍ ቀላል ነው። ለምሳሌ የክብ ሥዕል መሣል ከፈለግን መወሰን ያለብን ነጥቦች ሁለት ናቸው። እነሱም የክቡ መኻከል (እምብርት) እና የሬድየሱ ርዝመት ናቸው። የቀረውን SVG በራሱ ይወስናል።

እነዚህ መሠረታዊ ቅርጾች በውል የታወቁና በየዕለቱ ከኛ ጋር የሚኖሩ ናቸው። ኳስ የምንጫወትበት ሜዳ ምኡዝን ነው፤ ፀሐይ ክብ ናት፤ የዓይናችን ብሌን ክብ ወይም ኢልፕስ ነው፤ ምሶሶዎች ቀጥተኛ መስመር ናቸው፤ እናም ሌሎችም።

3.1 መስመር

በካርትዣን ቦታ ላይ ካንድ ነጥብ ተነስቶ በቀጥታ ሌላ ነጥብ ላይ የሚያርፍ፤ የማይነጣጠል ረጅም ሠረዝ «መስመር» ተብሎ ይጠራል። የመነሻ ነጥቡ በ(x1,y1) ሲሰየም የመድረሻ ነጥቡ ደግሞ በ(x2,y2) ይሰየማል። ተወሳኝ የመስመር ባሕሪያት እነዚህ ናቸው።

1. የመነሻ ነጥብ፦ (x1,y1)፤
2. የመድረሻ ነጥብ፦ (x2,y2)፤

መስመሮች በተፈጥሯቸው ተነጠይ ስለሆኑ በቀለም የሚሞላ ሰውነት የላቸውም። ስለሆነም «fill» የሚለው ባህሪ ከነሱ ላይ አይሠራም። የመስመር ሥዕላዊ-ቃል ይኸን ይመስላል። የተለያየ ከፋችና ዘጊ ቃል አያስፈልገውም።

   <line x1="50" y1="100" x2="400" y2="100" stroke="red"/>

				

ተግባራዊ ምሳሌ እነሆ፦ svg_line.svg

3.2 ክብ (አውድ)

የክብ ሥዕል መኻከሉና የሬድየስ ርቀቱ ከታወቀ፥ ዙሪያውን ወይም አውዱን መሣል ቀላል ነው። በአውዱ የተከለለው ቦታ ሰውነት ወይም አካባቢ ተብሎ ይጠራል። ሰውነቱን ባዶውን መተው፥ በቀለም መሙላት ወይም በሌሎች ረቂቅ መልኮች መሸፈን ይቻላል። የመኻከሉ ነጥብ በ(cx,cy) ሲለይ፥ ሬድየሱ ደግሞ በr ይወሰናል።

   <circle cx="150" cy="150" r="100" stroke="black" fill="none"/>

				

ይህ ሥዕላዊ-ቃል፥ ሰውነቱ ባዶ ነግር ግን ጠርዙ በጥቁር ቀለም የተቀረጸ ክብ ይሠራል። ከመኻከሉ ነጥብ እስከ ጠርዙ በየትኛውም አቅጣጫ ያለው ርቀት 100 ፒክስል ነው።

ተግባራዊ ምሳሌ እነሆ፦ svg_circle.svg

3.3 ምኡዝን (Rectangle)

አራት ጠርዝ ያለው፥ ባራት ቀጥተኛ ማእዘን የተዋቀረ ቅርጽ «ምኡዝን» (rectangle) ይባላል። በቁም ትይዩ የሆኑት ሁለቱ ጠርዞች ወርድ፥ በጎን ወይም በገራና ቀኝ ትይዩ የሆኑት ጠርዞች ከፍታ ተብለው ይጠራሉ። በምኡዝን የተከለለው ቦታ ሰውነት ተብሎ ይጠራል። የግድ መታወቅ ያለባቸው ባሕሪያት እነዚህ ናቸው።

1. የምኡዝኑ ግራ-አናት ጠርዝ፦ (x,y)፤
2. የምኡዝኑ ወርድ (ስፋት)፦ width፤
3. የምኡዝኑ ከፍታ (ቍመት)፦ height።

ለሥዕላዊ ገለጻ ይኸን ይመልከቱ፦ svg_rectangle_overview.svg

ምኡዝን ለመሳል ሦስት ነጥቦች መወሰን አለባቸው፦ በስተግራ ከላይ ያለው ጥግ፥ የወርዱ ስፋትና የከፍታው ርዝመት።

   <rect x="100" y="100" width="200" height="100" 
          stroke="black" stroke-width="2" fill="none"/>

				

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

3.4 ኢልፕስ (Ellipse)

ኢልፕስ የክብ ዘር ነው። ሁለት አራት ማእዘን ሠርተው የሚያልፉ አክሰሶች እምብርቱ ላይ አሉት። የኢልፕሱን ሰፊ ጐን መሥራች «አብይ አክሰስ»፥ የኢልፕሱን ጠባብ ጐን መሥራች «ንኡስ አክሰስ» ብለን እንጠራዋለን። በተለምዶ፥ አብዩ-አክሰስ በ2a፥ ንኡሱ-አክሰስ በ2b ይወከላሉ። ለማስታወስ ያህል፥ ሁለቱ ከጫፍ እስከ ጫፍ ያላቸው ርቀት አንድ ዓይነት ከሆነ ኢልፕሱ ክብ ይሆናል። የሚከተለው ሥዕላዊ ገለጻ በጠቅታ እነሆ።

ኢልፕስን ለመሳል ሦስት ባህሪዎች መታወቅ አለባቸው፦

1. የመኻከሉ ሥፍራ (እምብርቱ)፦ (cx,cy)፤
2. በx አክሰስ ከእምብርቱ እስከ ጠርዙ ያለው ርቀት፦ rx፤
3. በy አክሰስ ከእምብርቱ እስከ ጠርዙ ያለው ርቀት: ry።

የኢልፕስ ሥዕላዊ-ቃል ይኸን ይመስላል።

   <ellipse cx="600" cy="200" rx="81" ry="49" 
        stroke="blue" fill="gold"/>

				

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

3.5 ፖሊላይን (Polyline)

ፓሊላይን (polyline) የሚባሉት የተቀጣጠሉ መስመሮች ናቸው። «ፖሊ» ማለት «ብዙ» ነው። በመሆኑም ፖሊላይን ሲሉ «ብዙ መስመር» ለማለት ነው። የፖሊላይን የመጀመሪያና የመጨረሻ ጫፎች አይገናኙም። ሥዕላዊ-ቃሉ ይኸን ይመስላል።

   <polyline stroke="red" fill="none" stroke-width="2"
       points="50,50 50,100 100,100 100,150 150,150 150,200"/>

				

እዚህ ላይ፥ አትኩረን ማየት ያለብን «points» የሚለውን ባህሪ ነው። ሁለቱ ሁለቱ ተደባይ ቍጥሮች እያንዳንዱ መስመር ከየት ጀምሮ የት ድረስ መሣል እንዳለበት ይወስናሉ። እነዚህ ቍጥሮች አንባቢው እንደሚያውቀው በካርትዣን ቦታ ላይ የx እና የy አክሰስ ነጥቦች ናቸው። የመስመሩ ሥዕል (50,50) ተነስቶ (150,200) ላይ ያልቃል።

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

3.6 ፖሊገን (Polygon)

ፖሊገን ሲሉ የተቀጣጠሉ ቀጥተኛ መስመሮች ግን የመጀመሪያና የመጨረሻ ጫፎቻቸው የተጋጠሙ ለማለት ነው። ያልተቀጠለ ወይም ያልገጠመ መስመር አይፈቀድም። የሥዕላዊ-ቃሉ አጻጻፍና አሠራር ከፖሊላይን ጋር በጣም ይመሳሰላል። እናም እነሆ፥

   <polygon stroke="red" fill="none" stroke-width="2" 
       points="25,200 150,200 150,150 300,225 
               150,300 150,250 25,250"/>

				

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