Rough.js: हाथ से बनाई गई स्केच जैसी इफ़ेक्ट वाले ग्राफ़िक्स बनाना

Rough.js

• Rough.js एक छोटा graphics library है जो sketch जैसी hand-drawn style में graphics ड्रॉ कर सकता है.
• यह lines, curves, arcs, polygons, circles और ellipses जैसी basic shapes को define करता है, और SVG paths ड्रॉ करने का support भी देता है.
• Rough.js, canvas और SVG दोनों पर काम करता है.

इंस्टॉलेशन

• npm के ज़रिए इंस्टॉल करें: npm install --save roughjs
• कोड में उपयोग करें: import rough from 'roughjs';

उपयोग

• पूरा Rough.js API Github पर देखा जा सकता है.
• canvas उपयोग उदाहरण: const rc = rough.canvas(document.getElementById('canvas')); rc.rectangle(10, 10, 200, 200);
• SVG उपयोग उदाहरण: const rc = rough.svg(svg); let node = rc.rectangle(10, 10, 200, 200); svg.appendChild(node);

रेखाएँ और ellipse

• circle, ellipse और line ड्रॉ करने का उदाहरण: rc.circle(80, 120, 50); rc.ellipse(300, 100, 150, 80); rc.line(80, 120, 300, 100);

fill

• fill styles में hachure (default), solid, zigzag, cross-hatch, dots, sunburst, dashed, zigzag-line आदि शामिल हैं.
• fill उदाहरण: rc.circle(50, 50, 80, { fill: 'red' }); rc.rectangle(120, 15, 80, 80, { fill: 'red' });

स्केच style

• sketch style को adjust करने का उदाहरण: rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' }); rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

SVG path

• SVG path ड्रॉ करने का उदाहरण: rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });

उदाहरण

• उदाहरण यहाँ देखे जा सकते हैं.

API & दस्तावेज़

• पूरा Rough.js API

क्रेडिट

• lines और ellipses की outline ड्रॉ करने वाला मुख्य algorithm handyprocessing library से लिया गया है.
• SVG arcs को canvas में बदलने वाला algorithm Mozilla codebase से लिया गया है.

इस प्रोजेक्ट को सपोर्ट करें

• Github Sponsors या Open Collective के ज़रिए इस प्रोजेक्ट को सपोर्ट किया जा सकता है.
• इस प्रोजेक्ट को Excalidraw, Cube, Diagrams.net, Terrastruct, SheetJS, Poster Maker, Chartle आदि का समर्थन प्राप्त है.

लाइसेंस

• MIT लाइसेंस, copyright Preet Shihn.

---

GN⁺ की राय

• Rough.js एक innovative library है जो users को आसानी से web पर hand-drawn style graphics लागू करने में मदद करती है.
• अलग-अलग fill styles और sketch style को adjust करने की क्षमता web-based graphic design को एक नया आयाम देती है.
• यह library open source community के समर्थन से विकसित हो रही है और कई web-based tools के साथ integrate होकर user experience को बेहतर बनाने में योगदान देती है.

[GN⁺]

Hacker News की राय

• RoughNotation & RoughJS के उपयोग के मामले

  • RoughJS का उपयोग करके underline, highlight आदि को सपोर्ट करने वाले RoughNotation का उल्लेख.
  • अपनी वेबसाइट से प्रेरित एक implementation के उदाहरण के रूप में, highlighted title पर mouse ले जाने पर उसके काम करने के तरीके का सार बताने वाली पोस्ट देखने के लिए मार्गदर्शन.
  • संबंधित Hacker News पोस्ट और उन पर आए comments की संख्या सूचीबद्ध करके RoughJS की लोकप्रियता और उपयोग के मामलों को दिखाया गया है.

• Wired Elements & svg2roughjs

  • RoughJS का उपयोग करके sketch style में render होने वाले web components के सेट Wired Elements का परिचय.
  • SVG फ़ाइलों को sketch में बदलने वाले svg2roughjs wrapper बनाने के अनुभव को साझा किया गया है.

• RoughJS का उपयोग करके interactive mockup बनाना

  • WiredJS के साथ मिलाकर interactive mockup बनाने के एक उपयोग मामले का परिचय.
  • mockup उदाहरण और source code link प्रदान किए गए हैं.

• RoughJS के विभिन्न उपयोग

  • Excalidraw से तुलना करते हुए RoughJS के effect को पसंद करने वाली राय.
  • horserecords.info में RoughJS के उपयोग का मामला.
  • Boxy SVG के भीतर "Sketchify" generator लागू करने के अनुभव को साझा करते हुए, RoughJS की इस विशेषता पर ज़ोर कि इसमें dependencies लगभग नहीं हैं और यह web worker के भीतर चल सकता है.
  • library के उपयोग में आसानी और समय की कसौटी पर खरे उतरने वाली स्थिरता की प्रशंसा करते हुए, usdc.cool में charts बनाने के लिए इसका उपयोग करने का उदाहरण.
  • Rough.js के प्रति आभार व्यक्त करते हुए, Hatch project में जोड़े जा सकने वाले Sketchy Shapes बनाने और real time में parameters समायोजित करने को मज़ेदार बताने वाली राय.

यह सारांश Hacker News comments में RoughJS और उससे जुड़े tools के विभिन्न उपयोग मामलों और उपयोगकर्ताओं के सकारात्मक अनुभवों को दिखाता है। RoughJS हाथ से बनी sketch style graphics बनाने वाली एक JavaScript library है, जो web developers के बीच लोकप्रिय है और mockup, charts, interactive elements जैसे विभिन्न web components बनाने में उपयोग होती है.