| |||||||
| المدوّنات | البحث | مشاركات اليوم | اجعل كافة المشاركات مقروءة |
 |
| | LinkBack | أدوات الموضوع |
| |||||
| الدرس الثالث في السيلفر لايت ( أساسيات الرسم ) آسف لتأخري في طرح الدرس ولكن وقتي ضيق جدا هذه الأيام بسبب كثرة العمل . كما أشرت لاحقا بأنني سأتكلم قليلا عن الزامل وكيفية كتابة وسومها يدويا ، ومع أن البليند يغني عن كل هذا ولكن يجب أن نعرف بعض الأدوات في الزامل إذا كنت عزيزي القارئ قد تعاملت سابقا مع WPF فهذا شيء رائع وسيريحك ولن تنظر لهذا الدرس الا نظرة لتراجع بعض الأمور لا أكثر ولكن عليك أن تعلم أن الزامل هنا لا تدعم كافة الصيغ لانني اشرت سابقا بان السيلفرلايت لن يصل لكفاءة برامج سطح المكتب وسم البداية وسم البداية كما تعلمون للأكس ان أل وسم ضروري وأول وسم في الزامل هنا هو الكونفاس كود: <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> ... </Canvas> لنجرب أن نكتب شيئا ما هنا مثلا أول جملة كود: <TextBlock>أول جملة</TextBlock> وسم النص وسم اعتيادي حيث به خصائص مثل لون الخط ، حجمه ، نوعه ..... في ال XHTML كنا نكتب <br / > للسطر الجديد ما البديل هنا ؟؟ نفس الصيغة ولكن غير البريك الى <LineBreak /> وعندها تكون قد نزلت سطر جديد _____________________________________________________________________ _____________________________________________________________________ لننظر الآن للاشكال التي امامنا ونأتي لأبسط شكل ألا وهو الخط المستقيم لنحاول مثلا أن نرسم سطر جديد كود: <Line X1="100" Y1="20" X2="150" Y2="150" /> الاحداثي السيني والصادي لنقطة البداية وكذلك الاحداثيات لنقطة النهاية امر بسيط ماذا لو اردنا ان نغير خصائص الخط ؟؟ هناك خاصيتين الأولى Stroke وهي مسؤولة عن لون الخط والثانية StrokeThickness طبعا من اسمها سمك الخط الاولى تأخذ اسماء الوان والثانية تأخذ قيم عددية أمر بسيط ماذا لو أردنا ان نرسم شكل بخطين كالزاية مثلا ما عليك سوى رسم خطين نقطة احداثيات بداية الخط الثاني تكون نفس احداثيات نهاية الخط الأول لنرى الآن المثلث المثلث شكل هندسي يتكون من 3 ظاضلاع يمكن تعبئته بلون او تدريج أو كما تشاء لنجرب أن نرسم مثلم ونلونه كود: <Polygon Points="100,20 350,200 50,200" Stroke="Black" StrokeThickness="8" Fill="#FF00BBFF" />  لو اردت أن ترسم مثلث عن طريق الزامل فأقترح إذا كنت لم تدرس رياضيات خاصة بالجامعة أن تراجع الهندسة التحليلة للمرحلة الثانوية فهي ستفيدك ( لا اعلم اذا ما زالت تدرس بالمنهج الان ) لاحظ اننا اضفنا خاصية جديدة وهي Fill وهي مسؤولة عن اللون الداخلي لنزود ضلع للمثلث وسنجد اننا حصلنا على شكل رباعي ( مربع ، مستطيل ، معين ، شبه منحرف ، شكل غير منتظم ) <Rectangle> نجد أن نقط البداية موجودة نفسها الاحداثي السيني والصادي ولكن نجد خاصية الطول والعرض لاكمال باقي الأبعاد وهذا شيء منطقي بدل من تحديد طول كل خط كود: <Rectangle Width="231" Height="222" Fill="#FFFF3800" Stroke="Black" StrokeThickness="8" Canvas.Left="65" Canvas.Top="110"/>  نجد هنا ايضا خاصيتين قمت باضافتها وهما Canvas.Left="65" Canvas.Top="110 وهما بنفس الاحداثي السيني والصدي وتعني البعد عن حد الكونفاس اليمين واليسار وهي نقطة البداية لنفترض أنك رسمت شكلا ولم تحدد له الحداثيات البداية فمن المنطقي أن تكون الإحداثيات هي الزوج المرتب (0 ، 0 ) وهي الزاوية العليا اليسار ولننظر الآن للشكل الجميل ألا وهو الدائرة ما هي الدائرة هي مجموعة من النقاط المتتالية تبعد عن نقطة بعد متساوي طبعا لم أقصد هذا الأمر لأننا لا ندرس رياضيات أريد أن أقول بأنها شكل بيضاوي تساوى فيه الطول والعرض لذلك عند رسمها سنرسم شكل بيضاوي الطول والعرض متساويين كود: <Ellipse Width="122" Height="122" Fill="#FF7700FF" Stroke="Black" StrokeThickness="8" Canvas.Left="195" Canvas.Top="272"/>  نأتي للشكل الآخير والذي يعطيك كامل الحرية في الرسم وأنصحك باستخدام البليند برسمه لكي لا تضيع الوقت <Path> واسمحوا لي بأن أعرفكم إلى ألوان علمي : العلم الفلسطيني تفضلو هذه الخرابيش والصقوها ستحصلون على شكل مماثل كالشكل التالي كود: <Path Data="M 20,10 L 40,70" Stroke="White" StrokeThickness="15" Canvas.Left="83.592" Canvas.Top="33.335" /> <Path Data="M 20,20 L 50,70" Stroke="Red" StrokeThickness="5" Canvas.Left="97.878" Canvas.Top="56.165" /> <Path Data="M 50,50 A 50,50 90 0 1 100,50" Stroke="Black" StrokeThickness="5" /> <Path Data="M 125,75 Q 200,100 175,125" Stroke="Green" StrokeThickness="5" Width="110.75" Stretch="Fill" Canvas.Left="46.763" Height="130.707" Canvas.Top="8" /> <Path Data="M 195,95 L 205,105 M 205,95 L 195,105" Stroke="Black" StrokeThickness="2" /> <Path Data="M 120,170 L 130,180 M 130,170 L 120,180" Stroke="Black" StrokeThickness="2" /> <Path Data="M 15,120 L 25,130 M 25,120 L 15,130" Stroke="Black" StrokeThickness="2" />  لنفترض أننا رسمنا 4 أشكال فوق بعض ونريد أن نحدد من فيهم الذي سيعرض فوق الأول إذا كنت مبرمج فيجوال فيسك ستتذكر الخاصية Zorder ونجد نفسها هنا ZIndex كود: <Ellipse Canvas.ZIndex="2" Width="79" Height="86" Fill="#FFCC1919" Stroke="Black" StrokeThickness="2" Canvas.Left="27" Canvas.Top="40"/> <Rectangle Canvas.ZIndex="1" Width="113" Height="85" Fill="#FF196BCC" Stroke="Black" StrokeThickness="2" Canvas.Left="65" Canvas.Top="67"/>  جرب غير القيم كود: <Ellipse Canvas.ZIndex="0" Width="79" Height="86" Fill="#FFCC1919" Stroke="Black" StrokeThickness="2" Canvas.Left="27" Canvas.Top="40"/> <Rectangle Canvas.ZIndex="1" Width="113" Height="85" Fill="#FF196BCC" Stroke="Black" StrokeThickness="2" Canvas.Left="65" Canvas.Top="67"/> ستحصل على التالي  وسم الصورة وسم الصورة مثل كافة الوسم في الخصائص ولكن أضف عليه مصدر الصورة <Image Source="kh.jpg" /> التحولات التحولات أمر أساسي في الرسم وهي تستخدم في حالة مثلا إذا أردنا أن ندو الشكل الموجود امامنا أو نكبره ..... في البداية إذا أردنا أن نضع تحول يجب أن نضيف الوسم الأساسي للتحول قم نضيف بعدها الطريقة التي نريدها مثلا أنا رسمت مربع وأريد أن أحوله كود: <Rectangle Width="135" Height="135" Fill="#FF196BCC" Stroke="Black" StrokeThickness="2" Canvas.Left="62" Canvas.Top="41" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="-49.648"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> لاحظ معي وسم المربع وضعت بداخله الوسم المسؤول عن التحول <Rectangle.RenderTransform> ثم وضعت التحول بداخل الوسم <Rectangle.RenderTransform> ولنرى التحولات الممكنة RotateTransform : تدير الشكل بناء على زواية معينة وترا ان الدوران الموجب يكون مع عقارب الساعة والزاية تبدأ العد من الحد السفلي للشكل ScaleTransform : يستخدم لتكبير أو تصغير الشكل وترى افتراضي ان البعد السي والصادي 1 وهو التكبير الافتراضي جرب مثلا أن تضع 2 في السيني و 2 في الصادي ستجد أن الشكل قد تضاعق في الحجم SkewTransform : يستخدم لإنحراف الشكل ( لم أرى الا كلمة انبعاج لتناسب المفهوم ) وساعطيكم مثال جرب أن تغير الارقام وضع هذه الأرقام <SkewTransform AngleX="4" AngleY="10"/>  بعد الانحراف  TranslateTransform : تحريك الشكل من مكان لمكان ومنطقيا التحريك يبدأ من نقطة البداية ، ل1لك بامكانك تغيير المحور السيني والصادي للبداية جميل جدا بتمكاني أن اضغط على زر ( لاخقا إن شاء الله ) وسيقوم هذا الزر بتحريك الشكل الذي أمامي وتصغيره وحرفه وأيضا يدوره أمر بسيط يوجد أيضا تحويل يسمى MatrixTransform وهو تحويل رياضي بامكانه أن يشمل على كافة هذه التحولات أتمنى أن يكون الدرس قد أعجبكم أخوكم خليل
__________________ Response.Write ( م. خليل سليم مطور مواقع ASP.NET للتواصل : khalilme@hotmail.com ) | |||||
|
| |||||
|
أخي الثلج لم ارى اية اسئلة
__________________ Response.Write ( م. خليل سليم مطور مواقع ASP.NET للتواصل : khalilme@hotmail.com ) | |||||
|
|
| أدوات الموضوع | |
| |
المواضيع المتشابهه | ||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| درس .. بيئة تطوير ال Silver Light (الدرس الأول ) | برمودا | ASP و ASP.NET | 11 | 20-04-2008 05:52 AM |
| درس .. أساسيات حول صفحة ال Silver Light (الدرس الثاني ) | برمودا | ASP و ASP.NET | 4 | 19-03-2008 04:27 AM |
| ألحق !!! 109 درس فوتوشوب بالصوت والصورة وباللغة العربية | shady4hack | قسم التصميم والرسومات والمونتاج | 3 | 15-03-2008 04:52 PM |
| شرح نادر جداً بالصوت والصورة وباللغة العربية لبرنامج الفوتوشوب .! | kandeno | قسم التصميم والرسومات والمونتاج | 1 | 12-05-2006 01:10 PM |
| 100 درس فيديو فى الفوتوشوب | الطير | قسم التصميم والرسومات والمونتاج | 11 | 07-04-2006 10:34 AM |
