18

لخبراء الـ HTML5 + Javascript: كيف أُطبق الفكرة التالية؟!

السلام عليكم :)

لا أطلب منكم حلولاً برمجيةً جاهزة , وإنما لمحة سريعة لكيفية تطبيق هذه الفكرة , والتي تأتي ضمن مشروع متكامل ..

الفكرة , كما هي موضحة في الصورة :

عبارة عن مجموعتين من الحقول , كل مجموعة تحوي ثلاثة حقول , وما أريده هو كالتالي:

كيف لي أن أربط حقلاً واحداً من المجموعة الأولى , مع حقلٍ أخر في المجموعة الثانية .. وطريقة الربط هي:

أن أسحب باستخدام الماوس , "حبلاً" أو "خيطاً" من الحقل الأول وأمدّه إلى أن يرتبط بالحقل الثاني .. وبعد أن يتم الربط , أُكمل عمل البرنامج ..

-الحبل , هو المستقيم ذو اللون الأزرق كما وضّحت في الصورة ..

صحيح أن الفكرة تستوجب عمل عناصر إدخال مخصصة , غير المتوفرة بشكل افتراضي في الويب ..

هل لديكم أية أفكار؟ كيف أُطبقها؟ كيف أقوم بعمل عناصر إدخال خاصة؟ ما هو المنطق البرمجي للفكرة؟

عبّروا بما شئتم :)

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

التعليقات

17
راشد المري أضف ردا

هناك مكتبات جاهزه انظر هنا قد تفيدك

ايضاً

وبقية الامثلة ايضاً

15
وجيه عوض الجيد أضف ردا

وعليكم السلام

قمت بعمل شي أسبه بهذا عن طريق svg

وهي فقط تطلب منك تمرير لها أحداثيات نقطيتين فيتم رسم خط بينها

مثال هذا الكود لرسم خطيين يلتقيان في نقطة واحدة (61.5,56)

<svg style="border:solid 0px;position:absolute;top:114px; left:190px;
z-index:1" width="900px" height="300px" version="1.1">
<polygon style="fill:#FFF;stroke:#800080;stroke-width:10;fill-rule:evenodd;"
points="61.5,242 61.5,56"></polygon>
<polygon style="fill:#FFF;stroke:#800080;stroke-width:10;fill-rule:evenodd;"
points="61.5,56 128.5,149"></polygon>
</svg>

هذا جزء من الكود الذي كتبته لتنفيذ الرسم

رابط للمثال

1
راشد المري أضف ردا

انت مبدع، هل يمكن تطوير الكود بحيث يتم الضغط مباشرة بدون زر كنترول ( من نقطة الى اخرى ويرسم خط بينهم ؟ )

مثال اسئلة ( صل الاجابة الصحيحة ) !

1
وجيه عوض الجيد أضف ردا

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

التطبيق لم يكن لغرض معين لذلك لم أهتم ببعض الامور (هذه مجرد أشياء أفعلها في أوقات الملل)

فقط قم بعمل ما يناسبك عن طريق javascript

0
binamjad أضف ردا

أنا يعمل عندي بدون النقر على زر كنترول، مع أنه مكتوب في الأعلى ( إضغط بإستمرار على مفتاح CTRL)

وإذا ضغطت على كنترول.. يتوقف التوصيل

0
وجيه عوض الجيد أضف ردا

نعم ربما هناك خطأ ما

لان الكود مر بعدة تعديلات ربما نسيت بعض الاشياء

0
وجيه عوض الجيد أضف ردا

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

1
iali أضف ردا

Canvas or SVG