الرسم المتجهي او ما يعرف بالفكتور ( Vector )

الرسم المتجهي على اندرويد vector graphics on android

فى هذا المقال سيتم التعرف على ماهيه الرسم المتجهى والفرق بينه وبين الصور النقطيه وسنحاول فهمه وفهم الاوامر الموجوده فى "PathData" وكيفية كِتَابَة أَلِأَوامر فية وطريقة استخدامه بشكل مبسط مع بعض الامثلة لتوضيح الفكرة ولكن لمن لا يعرف كيف تكون اسطر ملفات الفاكتور وكيفيه تعريف الرسومات المتجهه  فى اندرويد استوديو داخل ملفات ال "xml"

هذا شكل من الاشكال

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600" >
    <group
    android:name="rotationGroup"
    android:pivotX="300.0"
    android:pivotY="300.0"
    android:rotation="45.0" >
    <path
    android:name="v"
    android:fillColor="#000000"
    android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
    </vector>

  

ربما تكون هذه الاكواد مفهومه لمن يعمل مع مسارات الرسم "paths" ويستطيع ان يتخيل الشكل النهائى بمجرد النظر للاكواد، ولكن مازالت تحتاج للتفسير للكتير منا وللعلم فان اغلب او كل اشكال الايقونات المستخدمه فى اندرويد استوديو للتطبيق او اشكال القوائم داخل التطبيقات هى بنظام الفاكتور "Vector" 

ما هو الرسم المتجهي "Vector Drawable"

هو عبارة عن ملف من نوع "xml" يحتوى على مجموعة من الاتجاهات "Vectors" متمثله فى مجموعة من الاكواد سنقوم بشرحها لاحقا.

وهو يختلف عن الصور المعروفة للكثير منا مثل ملفات (Bmp, jpeg, gif, png) والتى تسمى ملفات الصور النقطية او ال " pixel pictures " فان ملفات هذا النوع من الصور يتاثر فى حال التكبير او التصغير على عكس ملفات الصور المتجهه لا تفقد جودتها لو قمنا بتغيير حجم ذلك النوع بالتكبير او التصغير

وبالتالى فان عمل اكثر من صوره من نوع "Vector" باحجام مختلفه امر غير ضرورى مما يوفر الكثير من الوقت والجهد والمهم حجم التطبيق

اليه عمل الصور من نوع " فاكتور "

الرسم المتجهى يكون عباره عن مسارات ونقاط ومنحنيات على طريقة الرسم البيانى والتى يمكن ايضا تلوينها وتغيير الوانها بالكود وفى حال تكبيرها فلن تفقد الجوده ولكن يجدر الملاحظه ان الرسم المتجهى يحتوى على اكواد ومسارات مثل الخط والمنحنى والاقواس لذلك عند وقت العرض فانها تستهلك الذاكره ولذلك فهى ملائمه فقط للاشكال البسيطه المسطحه. على عكس الصور البكسل

صوره توضيحيه

اليه عمل الصور من نوع بكسل"pixel Image"

تقوم الصور من النوع بكسل بعمل ما يشبه مصفوفة من المربعات الصغيره وكل مربع يحتوى على بيانات لون بحيث لو تم تجميع كل تلك المربعات بجوار بعضها البعض والنظر اليها بشكل كامل يكون لدينا صوره وفى حاله التكبير والتصغير لهذه الصوره فان البرنامج المستخدم لعرض الصوره يقوم بعمل حسابات للالون وعمل مصفوفه جديده لحساب البكسلات فى الصوره ووضع معلومات جديده للون كل بكسل فيها 

صوره توضيحيه

لماذا نهتم لفهم الاوامر الخاصه ب"Vector"؟

فى اندرويد استوديو سابقا قبل الرسم المتجهي كنا نحتاج لعمل الايقونات والصور بمقاسات مختلفه فكل صوره او ايقونه يتم عملها باحجام مختلفه لتتناسب مع مختلف الشاشات وبالتالى ستزيد من حجم التطبيق ومساحته على الجهاز وايضا استهلاك الباقه وقت تنزيل التطبيق من المتجر لكبر حجمه.

ولكن الرسومات المتجهه يمكن استخدامها فى اى مكان فى تطبيقك بدلا من الصور من نوع بكسل مثل الايقونات او الاشكال الديكوريه والزخرفية ويمكن تغيير حجمها لتناسب جميع الشاشات ذات المقاسات المختلفه دون ان تزيد من حجم التطبيق

يجدر الملاحظه انه فى حالة الاشكال طويله المسارات والمعقده قد تؤثر على اداء البرنامج وسرعتة وايضا لو كنت بصدد محاوله تحريك شكل صوره متجهى فستحتاج لتعديل الشكل من اجل التحايل على اندريد استوديو لصنع الحركه بالشكل المطلوب لذلك يجب على الشكلين الذى تنوى التحريك بينهما ان يكونا فيهما نفس عدد الاوامر ونوعيتهما

ومن اجل الاستفاده من المزيا الموجوده فى الرسم المتجهى سنحاول تعلم الاوامر المستخدمه فى الرسم وايضا ستنعلم كيف يتأثر الشكل المراد تغييره او تحريكه بنوع الاوامر المكتوبه فى سطر " path " سيتضح ذلك مع الامثله في فيما بعد

فهم الاوامر الموجوده فى pathdata

بشكل شخصى كنت اجد فى بدايه الامر ان تعلم المنحنيات صعب على الرغم ان الخطوط سهله جدا الا ان معظم الاشكال التى ستحتاج ان ترسمها لابد فى نهايه الامر ان تواجه الحاجه الملحه لرسم منحنيات.،

 كنت اجدها معقده بعض الشيء فى التعامل معها لاول مره ولكن فقط ستحتاج بعض الوقت لفهمها بشكل كامل بحيث تستطيع رسم الشكل الذى تريده وبالطبع كل شيء مع الممارسه سيكون اسهل وكل ما ستحتاج اليه الصبر وتطبيق مجموعه من رسوم المنحنيات بشكل مكثف لفهم الامر

ملاحظه : ان كنت لم تتابع الجزء الاول من الرسم المتجهي او ما يعرف بالفكتور(Vector) فلابد ان تتابع الجزء الاول قبل ان تكمل هذا الموضوع لانه مكمل له

الاساسيات "The basics"

يحتوى سطر مسار الرسم على حرف واحد مصحوبا برقم او اكثر يمكن الفصل بينهما بكوما (,) ولكن ليست بالامر الهام او الضرورى

مثال على ذلك السطور التاليه

      M100,100 L300,100 L200,300 z
      //or
      M 100 100 L 300 100 L 200 300 z
      //or 
      M1100,100L300,100L200,300z
    

الحروف من الممكن ان تكون حروف كبيره "Uppercase - capital" او تكون حروف صغيره "lowercase - small" حيث ان حاله الحروف الكبيره تعنى Absolute اى مطْلق وحاله الحروف الصغيره تعنى relative اى نسبي

للتوضيح اكثر : 

 انه فى حاله الكتابه بالحروف الكبيره سيفهم البرنامج انك تريد التحرك بشكل عام الى النقطه التى تحددها فى الامر ولكن اذا تم الكتابه بالحروف الصغيره فان البرنامج سيفهم انك تريد ان تتحرك عدد معين من النقاط من موقع القلم الحالى او نقطه الرسم الحاليه

المسارات "path"

يمكن اعتبارها انها المكون الاساسى للرسم المتجهي Vector ولفهمها او تقريب فكره عملها يمكنك تشبيهها بالرسم بالقلم الرصاص فانك ستحرك القلم الى نقطه معينه ثم ستضع القلم على الورقه ومن ثم سترسم خط او منحنى الى نقطه اخرى على الورقه وتعيد تحريك القلم من النقطه الحاليه الى النقطه التاليه بخطوط ومنحنيات حتى تصل الى الشكل المطلوب

وهذا بالظبط ما يفعله الرسم المتجهى عن طريق الاوامر الموجوده فى المسار وللتوضيح هيا بنا ناخذ نظره على الاوامر الموجوده فى المسارات بشكل سريع قبل التعرض للامثله

الاوامر "Commands"

M or m (x,y)

معناه تحرك الى النقطه فى التقاطع بين اكس و واى "x,y"

حيث ان "x" تمثل الاتجاه الافقى و "y" تمثل الاتجاه الرأسى ويبدء اندرويد العدد من الاعلى الى الاسفل ومن اليسار الى اليمين وهذا يعنى ان النقطه صفر، وصفر سنكون هى اعلى نقطه فى اليسار

وامر التحريك الى نقطا ما يكون دائما متبوع برقمين "x,y" ولكن يمكن ان يكون متبوعا بسلسله من الاكواد الاخرى للخطوط والمنحنيات

Z or z

يستخدم هذا الامر لرسم خط من النقطه الحاليه اىل اول نقطه فى الشكل ولا ياخذ اى ارقام ، ويستخدم لاغلاق المسار من اخر نقطه وصلنا اليها الى بدايه المسار

L or l (x,y)

يستخدم هذا الامر لرسم خط من النقطه الحاليه الى الموقع الجديد ممثلا فى "x,y" بعد حرف الامر ويمكن ان يتْبع هذا الامر مجموعه من الاحداثيات وهذا يعنى ان تستطيع رسم شكل مضلع يحتوى على العديد من الخطوط كما فى المثال التالى

      M 5 5 L20 5 20 20 5 20  5 5 z
    

H or h (x)

ويستخدم هذا الامر لرسم خط افقي الى النقطه "x" ويمكن ان يكون متبوعا باكثر من رقم واحد وفى هذه الحاله سيرسم الامر عدد من الخطوط الى الاحداثى "x" الجديد  ولن يتغير الاحداثي "y"

V or v (y)

وهو مشابه للامر السابق فى الاداء مع اختلاف الاتجاء والمركز بمعنى يستخدم لرسم خط راسى الى النقطه "y" ويمكن ان يكون متبوعا باكثر من رقم واحد وفى هذه الحاله سيرسم الامر عدد من الخطوط الى الاحداثى "y" الجديد ولن يتغير الاحداثى "x" بزياده الارقام

C or c (x1 y1, x2 y2, x y )

يستخدم الامر لرسم منحنى الى النقطه "x , y" مستخدما "x1 , y1" للتحكم فى بدايه المنحنى وايضا "x2 , y2" للتحكم فى نهايه المنحنى وفى نهايه الامر سيكون ال "x , y" هما نهاية المنحنى وبدايه الامر التالى ان وجد.،

ملاحظه : ان شعرت ان الامر بدء بالتعقيد والصعوبه بعض الشيء فلا تقلق ستتضح الامور حين بدء التطبيق العملى وستجد ان الامر يسير فقد راجع القراءه مره واثنان وثلاثه لتفهم الفكره بقدر المستطاع لحين التطبيق العملى

S or s (x2 y2, x y )

مثل الامر السابق ولكن نقطه التحم الاولى فى هذا المنحني يفترض ان تكون انعكاس لنقطه التحكم الثانيه فى الامر السابق المتعلق برسم منحنيات وفى حاله عدم وجود منحنى سابق لهذا الامر فانه ستيم اعتبار نقطه الرسم الحاليه هى نقطه التحكم الاولى لهذا المنحنى

Q or q (x1 y1, x y)

يستخدم هذا الامر ايضا لرسم منحنى قوسي يكون بدايه القوس فى نقطه الرسم الحاليه ونهايته فى "x , y" وتكون نقطه التحكم فى المنحني واحده فقط وهي "x1 , y1"

T or t (x , y)

هو مماثل للامر السابق ولكن نقطه التحكم كما فى الامر "x" يفترض ان تكون انعكاس لنقطه التحكم فى المنحنى السابق وفى حاله لم توجد نقطه تحكم سيتم اعتبارها نقطه الرسم الحاليه

A or a (rx ry x-axis-rotation large-arc-flag sweep-flag x y)

يستخدم الامر لرسم شكل بيضاوي من نقطه الرسم الحاليه حتى النقطه "x , y" فى نهايه الامر يتم تحديد اتجاه الشكل بنقطتين وهما 

rx ry x-axis-rotation

وتُحدد الاخيره درجه دوران الشكل بالكامل ويتم حساب مركز الشكل البيضاوى اوتوماتيكيا

ملاحظة : ان الشكل الناتج من هذا الامر هو شكل قوس وليس شكل بيضاوى كامل

ولعمل شكل بيضاوي او شكل دائرى كامل يتم تكرار الامر مع تغيير اتجاه القوس ليكون فى الاتجاه المعاكس بحيث يكون كل قوس هو نصف الشكل البيضاوي  او الدائرى المراد رسمه كما سنوضحه فى الجزء العملى للامثله

والى هنا يكون قد اتممنا الجزء النظرى من الشرح بشكل كبير وفى الجزء القادم سيتم عمل مجموعه من الامثله لايضاح الامور بشكل اكبر

المصادر

• stackoverflow
• medium
• journaldev

تعديل المقال