GraphicsJS يتيح لك إنشاء أي رسومات ويب يمكنك تخيلها

جافا سكريبت API مخصصة هي مستقبل الويب. ال حركة مفتوحة المصدر مرفق مع رسومات SVG في مهب فتح الاحتمالات لمطوري الويب.

GraphicsJS هي مكتبة مفتوحة المصدر مجانية و JS API ل بناء الرسومات المخصصة في متصفحات الويب. ويمكن استخدامه ك أداة التصور لبيانات الرسوم البيانية ، أو يمكن استخدامه لصنع أشياء رائعة فقط للتباهي.

في الصفحة الرئيسية ، ستجد قسم كبير من العروض تم إنشاؤها باستخدام GraphicsJS. وهذه الأمثلة تخدش سطح ما هو ممكن.

المكتبة يستخدم DOM الظاهري الخاصة به وهو عبارة عن تجريد من DOM المتصفح. هذا إلى حد ما على غرار DOM رد React الظاهري ويستخدم بطريقة مماثلة.

نظرًا لأن هذه المكتبة تستخدم استنساخًا للنطاق DOM ، فإنه أيضًا يحتاج إلى عناصر HTML حقيقية للعمل على. لهذا السبب يستخدم SVG / VML بدلا من الكائنات المضمنة في قماش HTML5.

هذا محرك الرسومات كان بنيت أصلا في مكتبة AnyChart. من هناك ، كان لف و مفتوح المصدر كواجهة برمجة التطبيقات JS الخاصة بها.

GraphicsJS يدعم جميع المتصفحات الرئيسية, حتى يرجع تاريخها إلى IE6 و Chrome 1.0.

كل شفرة المصدر متاح في GitHub repo حيث يمكنك تنزيل نسخة وتجويفها إذا كان لديك وقت. لكنني أعتقد أن أفضل طريقة للتعلم هي الغوص مباشرة.

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

إذا كنت بدأت للتو يمكنك ذلك زيارة الملعب مستضاف على موقع AnyChart. هذا مكان جميل للعثور عليه عينات رمز العمل لكسر بناء الجملة.

أو ، إذا كنت تريد حقا أن تبدأ مع مربع واحد ثم GraphicsJS دليل البدء استطيع المساعدة. هذا هو أشبه “الرسمية” وثائق لذلك سوف تمسك يدك ل منحنى التعلم أكثر سلاسة بالمقارنة مع مستندات API.

في كلتا الحالتين ، أحب أن GraphicsJS كان مفتوح المصدر وتم طرحه في مجتمع المطورين. إنها بعيدة عن المكتبة المثالية ولكنها واحدة من أفضل ما لدينا إنشاء رسومات SVG مخصصة من البداية.

ولتحويل التروس الخاصة بك ، يمكنك أدناه رؤية عينة مما يمكنك بنائه باستخدام Graphics.js.