مناقشة مختصرة حول Rough.js، وهي مكتبة رسومات مرسومة يدويًا تعتمد على Canvas

يوصي بمكتبة JS للرسومات ذات الأنماط المرسومة يدويًا والمعتمدة على Canvas.

Rough.js عبارة عن مكتبة خفيفة الوزن (حوالي 8 كيلو بايت) تعتمد على قماش يمكنها رسم أنماط تقريبية مرسومة باليد.

يوفر الإمكانيات الأساسية لرسم الخطوط والمنحنيات والأقواس والمضلعات والدوائر والأشكال الناقصية، ويدعم رسم مسارات SVG.

جيثب: https://github.com/pshihn/rough

رابط التحميل: https://github.com/pshihn/rough/tree/master/dist

 تثبيت npm - حفظ roughjs

 const rc =ough.canvas(document.getElementById('canvas'));rc.rectangle(10, 10, 200, 200); // x, y, width, height

 rc.circle(80, 120, 50); // centerX, centerY, القطرrc.ellipse(300, 100, 150, 80); // centerX, centerY, width, heightrc.line(80, 120, 300, 100) // x1, y1, x2, y2

 rc.circle(50, 50, 80, { fill: 'red' }); // املأ باللون الأحمر hachurerc.rectangle(120, 15, 80, 80, { fill: 'red' }); ، 150، 80، { ملء: rgb (10،150،10)، وزن التعبئة: 3 // خطوط أكثر سمكًا لـ hachure});rc.rectangle(220, 15, 80, 80, { fill: 'red', hachureAngle: 60, // زاوية hachure، hachureGap: 8});rc.rectangle(120, 105, 80, 80 ، { ملء: 'rgba(255,0,200,0.2)'، نمط التعبئة: 'صلب' // صلب يملأ})؛

 rc.rectangle(15, 15, 80, 80, { الخشونة: 0.5, الحشو: 'أحمر' });rc.rectangle(120, 15, 80, 80, { الخشونة: 2.8، الحشو: 'أزرق' }); rc.rectangle(220, 15, 80, 80, { الانحناء: 6، السكتة الدماغية: "أخضر"، عرض السكتة الدماغية: 3 });

 rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });rc.path('M230 80 A 45 45, 0, 1, 0 ، 275 125 لتر 275 80 ض'، { ملء: 'أرجواني' });rc.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { fill: 'red' });rc.path('M230 230 A 45 45, 0, 1, 1, 275 275 ل 275 230 ض', { ملء: 'أزرق' })؛

جنبا إلى جنب مع عمال الويب

إذا كانت هناك مكتبة استيراد Workly Web Workers في صفحة الويب، فسيقوم RoughJS تلقائيًا بنقل جميع العمليات إلى عمال الويب لتحرير سلسلة رسائل واجهة المستخدم الرئيسية. يعد هذا مفيدًا جدًا عند استخدام RoughJS لإنشاء رسومات معقدة (مثل الخرائط). اقرأ المزيد.

 <script src=https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.min.js></script><script src=../../dist/rough.min.js> </script>

https://github.com/pshihn/rough/wiki/Examples

واجهة برمجة التطبيقات والوثائق

https://github.com/pshihn/rough/wiki

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.