• السابق التالي









  • مايو
    11
    انشاء برنامج الرسام بتقنية الرسم Create Your Painter GDI+ .Net
    2010
    كتـب بـواسطة : مهند بندق , التصنيف : دروس في البرمجة , عدد المشاهدات (3200)

    بسم الله الرحمن الرحيم

    تحية طيبة لكل زوار هذه المدونة .. بالطبع أغلب المبرمجين تحت Dot Net Framework يعرف ما هي اساسيات تقنية الرسم GDI+ التي تحمل بها العديد من المكتبات الرائعة لتحولك من مبرمج إلى فنان في الرسم ولكن ليس أي رسم هذا رسم عن طريق الكود , وليس للمستخدم أي فكرة عما تعانيه من كتابة كود لرسمك أداة جديدة من أدوات Windows Forms حتى تعرض بالشكل المطلوب ويتمتع هو برفاهية ما يعكسه برنامجك من مظهر ..

    في لحظة خطرت ببالي فكرة بسيطة وهي جعل المستخدم يرسم عن طريق برنامجك , يعني برنامج شبيه بذلك المرفق مع الويندوز ((برنامج الرسام)) ..

    سأقوم بسرد الطريقة باختصار :

    من ضمن أدوات Windows Control توجد أداة اسمها Panel وهي الأفضل للرسم عليها , قمت باستعمالها وجس الحدث Mouse Move و Mouse Down و Mouse Up لاستقبل أوامر المستخدم وبعدها أقوم برسم الخط الذي رسمه المستخدم بحركة الماوس أثناء نقره على زر الماوس الايسر .. اضافة الى التحكم في اللون وعرض الخط..

    ويتم ذلك بشكل اكثر وضوح بتخزين جميع النقاط التي قام المستخدم بالمرور عليها في مصفوفة من نوع Point أو PointF حيث تختلف الاخيرة على الأولى انها تقبل قيم كسرية أي من نوع float .. ثم ارسالها إلى كائن الرسم الخاص بنا Graphics  سواء كان من Panel أو حتى Bitmap باستدعاء الطريقة أو الاجراء DrawLines الذي يقبل تلك المصفوفة بمعلومية الكائن Pen ذلك الذي يمثل صفات لون و عرض الخط ..

    بشكل عملي عن طريق الكود :

    تكوين قائمة من نوع PointF

    List<PointF> MyPointes = new List<PointF>();

    نقوم بقراءة النقاط في الحدث Mouse Move .. مع التأكد من أن تم نقر زر الماوس الأيسر ثم نقوم برسمها كما أسلفت الذكر , ليكون إجراء الماوس موف الخاص بنا كما يلي :

    private void panel1_MouseMove(object sender, MouseEventArgs e)

    {

    if (e.Button == MouseButtons.Left)

    {

    MyPoints.Add(new PointF(e.Location.X, e.Location.Y));

    Graphics Gr = DrawPanel.CreateGraphics();

    Pen MyPen = new Pen(MyColor, LineW);

    if (MyPoints.Count > 1)

    {

    Gr.DrawLines(MyPen, MyPoints.ToArray());

    }

    }

    }

    حيث LineW متغير Integer يمثل عرض الخط و MyColor كائن من نوع Color يمثل لون الخط .. هكذا سيتم رسم المسار المطلوب كما في برنامج الرسام تماما .. في نفس الوقت تسطيع تطبيق عملية الرسم أيضا وفي نفس الوقت على كائن من نوع Bitmap وذلك ليسهل عليك عملية تخزين الصورة المرسومة ولكن –وراء الكواليس –  ولا ننسى تفريغ قائمة أو مصفوفة النقاط عند الحدث Mouse Up حتى لا يتم رسم الخط الجديد متصلا بالقديم ...

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

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

    كل ما استطيع تزويدك به هو مثال مفتوح المصدر –استلطفته - واستغرق مني حوالي نصف ساعة لتطبيق الفكرة المطروحة .. وهذه واجهته:

     

     

    لتحميل المثال مع الكود من هنا

    المثال بلغة VB.Net

    في النهاية أتمنى أن ينال هذا الموضوع رضائكم واستحسانكم ..

    ونلتقي بإذن الله في مواضيع أخرى ... إلى ذلك الحين تقبلوا مني أطيب التحيات

    مهند بندق...

     
    التعليقات (12)
    بواسطة حنان من ليبيا 11 مايو 2010

    شكراً لك اخي الكريم فعلاً رائع ما قلت و ما فعلت و تفكيرك رائع

    و هل يا ترى تتكرم علينا و تعلمنا شيئين

    1. عند استخدام بعض المنظومات في حقل إسم الطالب متلاً عندما ابدأ بكتابة الإسم يتم عرض كل الأسماء المشابهة في قائمة يمكن الإختيار منها ؟؟
    لا أدري ما هي تلك الأداة و اين يكتب الكود و كيف يتم الملئ بتلك الطريقة

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


    ولك مني كل الشكر و الإحترام و الحب


    و كثر الله من امثالك في البرمجة


    بواسطة مهند بندق من ليبيا 12 مايو 2010

    السلام عليكم ورحمة الله وبركاته

    مرحبا بالاخت الكريمة حنان ,, شكرا على الاطراء ...

    بالنسبة لاستفساراتك سأجيب عنها بشكل مبدئي اتمنى ات تفيدك الاجابة النظرية لكي تقومي بتطبيقها فيما بعد بشكل عملي ..

    1. الاداة التي تستعمل في العرض في العادة هي DataGridView يتم ملئها في كل مرة بنتائج البحث المخزنة مسبقا في كائن DataTable أو DataTable محضون داخل DataSet.. واستعمال الخاصية DataSource لاسناد نتائج البحث اي DataTable لكائن DataGridView ,أما جملة البحث يجب استعمال علامة % .. فمثلا ليتم البحث عن جميع الاسماء التي تبدأ بحرف M نكتب الجملة هكذا ..

    "SELECT * FROM [Table1] where [Name] like 'M%'"

    أو بدايته Mh
    نكتبها هكذا

    "SELECT * FROM [Table1] where [Name] like 'Mh%'"

    أما عن حدث كتابة كود البحث وملء البيانات داخل DataGridView نستعمل TextChanged لكائن TextBox حيث تتغير النتائج كلما واصلت الكتابة ..


    2. بالنسبة للقائمة المنسدلة يمكنك استعمال اداة ContextMenuStrip لصناعة تلك القائمة ,, واظهارها في الوقت المناسب مثلا عند النقر على زر الماوس الايمن على اي اداة فيوجد في أدوات Windows Controls خاصية باسم ContextMenuStrip قومي باسناد القائمة الخاصة بنا الى تلك الخاصية وستظهر فور النقر على تلك الاداة بزر الماوس .. أما التعامل مع اجراءاتها برمجيا أي الاوامر الموجودة داخل تلك القائمة , فتكفي نقرة مزدوجة على اي عنصر من القائمة لتيظهر لكي الحدث المناسب ..
    هذه اجابات بشكل نظري وأترك لكي التطبيق .. فلا يسعفني الوقت حاليا لتطبيقها ..

    تقبلي مني أطيب التحيات ..

    و السلام عليكم ورحمة الله وبركاته


    بواسطة ZerO من I.L.Y.N 13 مايو 2010

    والله ماشاء الله عليك عمو مهند يبي وقت باش نفهمها لكن
    عادي ..... شوية إجتهاد توة نولي ببرمجة رسام متطور إن شاء الله
    لكن مخدوم بالفوتوشوب ( شني أندير هذا تخصصي )


    مبدع أخي مهند

    لك كل الشكر والتقدير والإحترام و


    بواسطة مهند بندق من ليبيا 15 مايو 2010

    السلام عليكم ورحمة الله وبركاته

    هلا بالمصمم المبدع ZerO , نورت الموقع ...

    صحيت على الرد .. وان شاء الله عجباتك الفكرة :) !

    بالتوفيق في تخصصك , ومن ابداع الى ابداع

    Best Regards


    بواسطة حنان من ليبيا 15 مايو 2010

    السلام عليكم

    شكراً أخي مهند على ردك على إستفساري السابق
    و انا بكل صدق افتخر انك ليبي

    على كل حال سؤالي الأول لم تفهمه او ربما انا لم اشرح ما في بالي جيداً
    انا بكل تأكيد افهم جيداً كل ما قلتله و اعرف كيفية التعامل مع قواعد البيانات

    ما قصدته في سؤالي هوا : بعض برامج الوندوز windows application
    تجد قائمة Compobox و تمكنك من الكتابة فيها لانها ليست DropDownlist
    و بمجرد الكتابة يتم ملئ القائمة المنسدلة من الكمبوبوكس بالأسماء المشابهه بدون ان يحدث Reresh للكمبو و بدون ان يطر المستخدم لإعادة الكتابة من الأول

    متلاً هو يكتب "ح"

    فتعرض قائمة مثل
    حنان محمد
    حميدة
    حسان
    حنان خليفة
    حنين

    ثم هو يضيف حرف آخر كـ "حن"
    تكون النتيجة في القائمة
    حنان محمد
    حنان خليفة
    حنين

    بحيث لا يطر المستخدم لإكمال الكتابة بحيث يمكنه إستخدام الماوس لإختيار الإسم

    طبعاً ربما سوف نستخدم في الجملة شيئاً كهذا select Top 10 Fname From TableName
    where Fname like @Name


    سوف لن انسى جميلك ان رددت علي و شكراً


    بواسطة مهند بندق من ليبيا 15 مايو 2010

    بسم الله الرحمن الرحيم

    الاخت حنان , يسرني زيارتك ومتابعتك لهذه المدونة .. كما يسرني جدا أن اسمع مثل هذا الاطراء ولي الفخر أن أكون ليبي , وبارك الله فيك .. ودمت زائرة مشرفة .

    أما عن الاستشارة :

    الاجابة لا تختلف كثيرا عن سابقتها !
    .. فقط استعملي أداة اخرى وهي ListBox واملئيها في كل مرة بنتائج الكتابة بدلا من ملئها في DataGridView واجعلي خاصية Visible =false الا لو توفرت نتائج تكون Visible =true بالاضافة الى تحكمك بمكانها بما يناسب ComboBox الذي وضعته كما بخاصية Top و Left وعادة ما يكون Left مساوي للاولى و كذلك خاصية Width وتختلف Top بانها تساوي ComboBox.top + ComboBox.Height حتى تكون اسفلها تماما وارتفاعها يحدد حسب عدد العناصر وحجم الخط ..

    و ارى ان تستبدلي ComboBox بـ TextBox فان خاصية اظهار النتائج تعوض عن الـ ComboBox ... وعندما يختار المستخدم من القائمة المنسدلة التي تظهر .. فسيتم تنفيذ الحدث SelectedIndexChanged أكتبي فيه الامر المناسب والذي سيكون في هذه الحالة MyTextBox.Text = MyListBox.SelectedItem , وفور النقر تعود قائمتنا إلى الوضع المخفي اي Visible =false ... ولا تنسي تنظيف القائمة الخاصة بنا بـ MyListBox.Items.Clear قبل كل عملية ملئ عن طريق DataTable في حالة استعمال الوضع المنفصل للـ Ado.Net أو عن طريق DataReader في حالة استعمالك الوضع المتصل..

    أما بالنسبة لجملة الاستعلام فكرة جيدة جدا استعمال Top حتى لا يحصل ضغط على قاعدة البيانات .. كما انصح باستعمال OrderBy حتى تترتب النتائج أبجديا وكذلك استعمال % بشدة كما أشرت في ردي السابق..

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

    ارغب فعلا في تطبيق ذلك عمليا لكن الوقت لا يسمح حاليا , واعتقد انكِ لن تجدي صعوبة في تطبيقها..

    يسعدني تقديم المساعدة وفتح حلقة نقاش وتلقي مثل هذه الاستفسارات..
    ولك مني أطيب التحيات و تمنياتي لكِ بالتوفيق..

    و السلام عليكم ورحمة الله وبركاته


    بواسطة Dr-flow من libya -tripoli 16 مايو 2010

    خبير والله كما عودتنا عزيزي مهند
    متمنيا لك المزيد من التقدم والمعرفة
    وفي انتظار الجديد منك دائما


    بواسطة مهند بندق من ليبيا 16 مايو 2010

    السلام عليكم ورحمة الله وبركاته

    عزيزي وصديقي الدكتور فلو دائما بردودك و اطراءاتك التي تخجلني, وهذه شهادة من شخص لا تنقصه الخبرة والتفوق في مجال التقنية وانني أعتز بها .. فمرحبا بك بين طيات هذه الصفحات ودمت متابع ومشجع ومقترح ومنتقد ..

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

    http://www.mohaned-b.com/WebSite/Blog.aspx?BlogID=4ee09de4-5517-4cdf-aa95-7d7346482f97

    ولإي استفسارات في اطار الموضوع يمكنك الرد في نفس صفحة الموضوع ..

    وشكرا لكل من رد وكل من علق وكل من زار بصمت على زيارته ...

    تقبلوا مني أطيب التحيات ..

    و السلام عليكم ورحمة الله وبركاته


    بواسطة Eyad Shrara من سوريا 5 ديسمبر 2010

    بارك الله فيك أخي وجزاك الله خيرا الجزاء ووفقك لما تحب وترضى

    البرنامج سيفيدني بإذن الله في الرسم الهندسي لي عودة للموضوع

    وبعض الأسئلة عندما لأتفرغ للدراسة

    مدونتي
    eyadshrara.wordpress.com


    بواسطة مهند بندق من ليبيا 8 ديسمبر 2010

    السلام عليكم ورحمة الله وبركاته

    أولا شكرا لكل من قام بالتعقيب .. وبارك الله فيكم.

    وصلني استفسار من أحد الزوار الأحباء , بعد نقله للموضوع بارك الله فيه وتوجيه هذا السؤال له ..

    ---------------السؤال-----------------
    كنت أعمل على برنامج لتصميم البطاقات بلغة VB.NET 2003
    عبارة عن PictureBox1 تعتبر خلفية للبطاقة
    PictureBox2 صورة إخرى
    يتحكم المستخدم بالحجم - الاتجاه - بالإضافة لإمكانية سحبها وإفلاتها على الخلفية " تحديد موقعها "
    وأيضاً رسم النص على البطاقة
    هناك مشكلة واجهتني ألا وهي في الحفظ تحفظ الخلفية فقط دون الصورة أو النص

    فماهو الكود الصحيح لحفظ محتوى هذه الأدوات كملف واحد ؟

    ===================================

    ------------- الاجابة -----------------
    من الأفضل في هذه الحالة استخدام الأداة Panel واستعمال Panels أخرى للمحتويات الأخرى من نص و صور لكونها أشبه بـ طبقات أخرى layers هذا في وقت التصميم أو السحب و الافلات عن طريق الماوس .. ولكن بعد السحب والافلات يجب رسم جميع المكونات بتقنية GDI+ عن طريق الدوال المعروفة لذلك بدلالة موقع أو احداثيات الصور و النصوص الأخرى -وتستطيع معرفتها نسبة الى موقعها على الفورم - حيث يتم رسمها على صورة الخلفية .. حتى تصبح تلك الصورة كاملة ويتم تخزينها مباشرة إلى ملف..

    الفكرة سهلة التطبيق لمن يتقن GDI+ فقط كون كائن من نوع Graphics من صورة الخلفية واستعمله لرسم النص عن طريق DrawString ورسم الصور الأخرى عن طريق DrawImage ..

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

    -------------------------------------------------

    في النهاية تقبلوا مني أطيب التحيات..

    و السلام عليكم ورحمة الله وبركاته



    بواسطة فاطمه من الأردن 7 مايو 2012

    السلام عليكم ورحمةالله وبركاته

    تحيه طيبه لك أستاذي :)

    شكرا لك على ماتقدم

    عندي طلب أريد أن أعمل هذا البرنامج ولكن بالفيجوال

    أريد هذه الأكواد للفيجوال فهل من االممكن أن توفرها لي :(

    أريدها عاجلا .. ربي يوفقك ويحقق لك جميع ماتتمنى


    بواسطة مهند بندق من ليبيا 7 مايو 2012

    السلام عليكم ورحمة الله وبركاته

    اختي الفاضلة (فاطمة) أولا مرحبا بك في صفحات هذه المدونة..

    بخصوص طلبك , لقد قمت باعادة صياغة المثال بلغة VB.Net

    على هذا الرابط

    http://www.mohaned-b.com/downloads/OpenSourcePrograms/Mohaned-Paint-VB.zip

    أرجو ان يؤدي الغرض..

    و السلام عليكم ورحمة الله وبركاته






           
    الإسم
    الدولة
    البريد الإلكتروني
    المحتوى  
    أكتب النص الظاهر في الصورة
     





    حقوق النشر محفوظة لـ مهند بندق © 2009 - 2014
    Programmed And Designed By : Mohaned Bondoq
    Copyright © 2009 - 2014