Ahmed Ebrahim11 نشر 19 فبراير 2023 أرسل تقرير مشاركة نشر 19 فبراير 2023 السلام عليكم هل يمكن استخدام javascript لعمل diagrams بهذا الشكل كما بالصور وكيف يمكنني ذلك اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Sam Ahw نشر 19 فبراير 2023 أرسل تقرير مشاركة نشر 19 فبراير 2023 نعم يمكن استخدام الجافاسكريبت لذلك، بحيث يتم استخدام العنصر canvas في HTML كحاوية للرسومات التي يتم إنشائها والتحكم بها من خلال الجافاسكريبت وتتيح لك رسم النقاط والخطوط وجميع الأشكال الهندسية دائرة، مربع، مستطيل،..إلخ أو أي شكل هندسي آخر تبعاً لإحداثيات النقاط والوصل فيما بينها. مثال: <canvas id="myCanvas" width="200" height="100"></canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); </script> بحيث تبدأ الإحداثيات من أعلى اليسار، وعند الرسم يتم استخدام التوابع المتاحة في جافاسكريبت لتحريك نقطة البداية والوصل بين هذه النقاط على شكل خطوط وأشكال هندسية. يمكنك الاطلاع أكثر على canvas والتوابع الرسومية المتاحة من خلال البحث على الانترنت. ويوجد أيضاً بعض الطرق الأخرى للرسم من خلال استخدام عنصر SVG أو مكتبات إضافية متاحة للتعامل مع الرسوم والتحريك. شرح عن العنصر canvas في ويكي حسوب: https://wiki.hsoub.com/HTML/canvas مقال مفيد عن canvas: اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 19 فبراير 2023 أرسل تقرير مشاركة نشر 19 فبراير 2023 نعم يمكنك فعل ذلك، إذا كنت تقصد الشكل المرفق فقط، ولا استطيع بناء الـ diagram من اجلك ولكن يمكنك بنائه باستخدام الـ html مثل svg واضافة التعديلات عليه باستخدام js و css. أما إذا كنت تريد بناء تطبيق يتيح انشاء diagrams فستحتاج إلى استخدام مكتبة مثل bpmn، وهذا مثال عملي عنها : https://codesandbox.io/s/bpmn-js-properties-panel-forked-648fb اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عبدالباسط ابراهيم نشر 19 فبراير 2023 أرسل تقرير مشاركة نشر 19 فبراير 2023 يمكن تنفيذ المطلوب من خلال استخدام الجافاسكريبت ، عن طريق استخدام العنصر canvas ولكن لتنفيذ مثل هذا ال diagram تحتاج أن تكون لديك خبرة جيدة باستخدام العنصر canvas حتى تقوم ببناء ال diagram من البداية بينما هناك مكتبات جاهزة تسهل عمل هذه ال diagram مثل amCharts : حيث يوجد قسم خاص لتنفيذ ال Sankey Diagram مكتبة D3 : هي مكتبة كبيرة خاصة بالجافاسكريبت لهذه الرسومات كما يوجد google charts الروابط السابقة تحتوي على أمثلة على الSankey Diagram لذلك هي الحل المناسب لك حالياً اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Ahmed Ebrahim11
السلام عليكم هل يمكن استخدام javascript لعمل diagrams بهذا الشكل كما بالصور وكيف يمكنني ذلك
رابط هذا التعليق
شارك على الشبكات الإجتماعية
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.