Rough.js يجعل الرسومات مرسومة باليد باستخدام Canvas & SVG

إنه لأمر مدهش أن نرى إلى أي مدى وصلت الويب عناصر ديناميكية مثل SVGs داخل المتصفح. يمكنك تصميم كل شيء من الرسوم المتحركة المخصصة إلى ألعاب HTML5 مع المكتبات الصحيحة.

واحدة من أحدث المكتبات تستحق الاختبار Rough.js. انه رسومات الجيل الحر النصي حاليا في مرحلة تجريبية ذلك يعمل على قماش و SVG العناصر.

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

حتى كتابة هذه السطور ، Rough.js لا يزال في الإصدار بيتا v0.1 ، لذلك قد لا تكون جاهزة لموقع الإنتاج المباشر. لكنه دليل على ذلك معايير الويب تتقدم بسرعة ونحن ندخل عصرًا حيث يكون هذا النوع من الأشياء ممكنًا.

خذ على سبيل المثال هذا شريط التقدم ولدت من خلال Rough.js. إذا قمت بالنقر فوق “بداية” زر ستلاحظ ذلك تدير الرسوم المتحركة المخصصة أن يبدو حقا مرسومة باليد. انها تستخدم خطوط SVG ذات أنماط محددة مسبقًا لخلق تأثير متذبذب الذي يبدو طبيعيا حقا.

في صفحة جيثب الرئيسية ، ستجد قائمة بالقوائم العديد من الأمثلة على Rough.js في العمل.

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

هنا أ مقتطف عينة مما يدل على كيفية إنشاء مستطيل في التعليمات البرمجية:

 var rough = new RoughCanvas (document.getElementById ('myCanvas') ، 400 ، 200) ؛ rough.rectangle (10، 10، 200، 200)؛ // س ، ص ، العرض ، الارتفاع 

بسيط جدًا بمجرد فهمك للشفرة ولكن ربما ليس البرنامج النصي الأكثر سهولة للمبتدئين.

إذا كنت تريد المزيد من مقتطفات الكود ونماذج العروض التوضيحية تحقق من الصفحة الرئيسية Rough.js. إنه المكان المثالي لبدء التعلم وللعثور على مقتطفات الكود التي يمكنك إعادة صياغتها.

أيضًا ، إذا كانت لديك أسئلة أو اقتراحات بشأن ميزات إضافية ، فيمكنك إرسال رسالة إلى مُنشئ Rough.js على Twitterpreetster.