الدرس الثالث في السيلفر لايت ( أساسيات الرسم )

[خليل سليم]

السلام عليكم

آسف لتأخري في طرح الدرس ولكن وقتي ضيق جدا هذه الأيام بسبب كثرة العمل .

كما أشرت لاحقا بأنني سأتكلم قليلا عن الزامل وكيفية كتابة وسومها يدويا ، ومع أن البليند يغني عن كل هذا ولكن يجب أن نعرف بعض الأدوات في الزامل

إذا كنت عزيزي القارئ قد تعاملت سابقا مع 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" />

طبعا الخط له 4 نقاط

الاحداثي السيني والصادي لنقطة البداية
وكذلك الاحداثيات لنقطة النهاية

امر بسيط

ماذا لو اردنا ان نغير خصائص الخط ؟؟
هناك خاصيتين الأولى
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 وهو تحويل رياضي بامكانه أن يشمل على كافة هذه التحولات

أتمنى أن يكون الدرس قد أعجبكم

أخوكم خليل

[ahmeds_link]

جهد مشكور أستاذ خليل

[الثلج]

درس رائع تشكر عليه ونتمنى منك الاكمال والاجابه على الأسئلة المتعلقه حل الموضوع هذا وما قبله

[خليل سليم]

أخي الثلج لم ارى اية اسئلة