Rough.js: हाथ से बने स्केच-स्टाइल ग्राफिक्स बनाने की लाइब्रेरी

 (roughjs.com)
4 पॉइंट द्वारा GN⁺ 2023-12-23 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Rough.js एक हल्की JavaScript लाइब्रेरी है जो साफ-सुथरे डिजिटल आकारों की जगह हाथ से बने जैसे स्केच-स्टाइल ग्राफिक्स बनाती है
  • gzipped आकार के हिसाब से यह 9kB से कम है, लेकिन लाइन, कर्व, आर्क, पॉलीगन, सर्कल, एलिप्स और SVG path तक संभाल सकती है
  • एक ही API flow के साथ यह Canvas और SVG दोनों को support करती है, इसलिए rendering target के अनुसार rough.canvas() या rough.svg() चुना जा सकता है
  • डिफॉल्ट fill hachure के अलावा solid, zigzag, cross-hatch, dots, sunburst, dashed, zigzag-line भी support किए जाते हैं
  • roughness, bowing, strokeWidth, hachureAngle, hachureGap जैसे options से लाइन की कंपकंपी और fill density को adjust किया जा सकता है

हाथ से बने स्टाइल के आकार बनाने वाली हल्की लाइब्रेरी

  • Rough.js स्केच-स्टाइल ग्राफिक्स बनाने के लिए एक JavaScript लाइब्रेरी है
  • लाइब्रेरी का आकार gzipped मानक के अनुसार 9kB से कम है
  • यह बुनियादी shapes और paths दोनों को support करती है
    • लाइन
    • कर्व
    • आर्क
    • पॉलीगन
    • सर्कल
    • एलिप्स
    • SVG paths
  • rendering target के रूप में Canvas और SVG दोनों का इस्तेमाल किया जा सकता है

इंस्टॉलेशन और बुनियादी उपयोग

  • npm से इंस्टॉल करें
npm install --save roughjs
  • कोड में roughjs को import करके इस्तेमाल करें
import rough from 'roughjs';
  • Canvas में rough.canvas() से context बनाकर shapes draw किए जाते हैं
const rc = rough.canvas(document.getElementById('canvas'));

rc.rectangle(10, 10, 200, 200); // x, y, width, height
  • SVG में rough.svg() से node बनाकर उसे SVG में जोड़ा जाता है
const rc = rough.svg(svg);

let node = rc.rectangle(10, 10, 200, 200); // x, y, width, height
svg.appendChild(node);
  • सर्कल, एलिप्स और लाइन draw करने के लिए बुनियादी API भी दी गई है
rc.circle(80, 120, 50); // centerX, centerY, diameter
rc.ellipse(300, 100, 150, 80); // centerX, centerY, width, height
rc.line(80, 120, 300, 100); // x1, y1, x2, y2

fill और स्केच अभिव्यक्ति को adjust करना

  • fill को fill और उससे जुड़े options के जरिए सेट किया जाता है
    • fill: 'red' लाल hachure fill का उपयोग करता है
    • fillWeight से hachure लाइन की मोटाई adjust की जाती है
    • hachureAngle और hachureGap से hachure का कोण और spacing बदला जाता है
    • fillStyle: 'solid' से solid fill इस्तेमाल किया जा सकता है
rc.circle(50, 50, 80, { fill: 'red' });
rc.rectangle(120, 15, 80, 80, { fill: 'red' });

rc.circle(50, 150, 80, {
  fill: "rgb(10,150,10)",
  fillWeight: 3
});

rc.rectangle(220, 15, 80, 80, {
  fill: 'red',
  hachureAngle: 60,
  hachureGap: 8
});

rc.rectangle(120, 105, 80, 80, {
  fill: 'rgba(255,0,200,0.2)',
  fillStyle: 'solid'
});
  • supported fill styles हैं hachure, solid, zigzag, cross-hatch, dots, sunburst, dashed, zigzag-line
  • लाइन की कंपकंपी और outline expression को roughness, bowing, stroke, strokeWidth जैसे options से बदला जा सकता है
rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' });
rc.rectangle(120, 15, 80, 80, { roughness: 2.8, fill: 'blue' });
rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

SVG path और API दस्तावेज़

  • SVG path string को rc.path() से draw किया जा सकता है
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 L 275 80 Z', { fill: 'purple' });
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 L 275 230 Z', { fill: 'blue' });

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2023-12-23
Hacker News पर राय

  • RoughNotation(https://roughnotation.com/) भी देखने लायक है। यह RoughJS का इस्तेमाल करके underline, highlight वगैरह सपोर्ट करता है
    मेरी वेबसाइट ने भी इससे कुछ inspiration लिया है; highlighted title पर mouse hover करके देख सकते हैं: https://muxup.com/
    implementation का तरीका मैंने https://muxup.com/2022q3/muxup-implementation-notes#randomly-generated-title-highlights पर लिख रखा है, और वहां जाकर देखेंगे तो असली code सच में बहुत कम है

    • कुल मिलाकर effect अच्छा लगता है, लेकिन site पर जब भी कोई element focus पाता है, highlight फिर से define हो जाता है, जिससे पढ़ने के लिए text ढूंढते समय काफी परेशान करने वाली flicker होती है
      यह intended behavior भी हो सकता है, लेकिन अगर नहीं है तो ध्यान दिलाने के लिए लिख रहा हूं। मेरा environment Chrome/Linux है
    • click करने पर बदलने वाली scribble drawing ज्यादा पसंद आई

  • संबंधित सामग्री:
    Show HN: Sketchy-appearance interactive timeline made using RoughJS - https://news.ycombinator.com/item?id=29563678 - दिसंबर 2021, 1 comment
    Rough.js – Create graphics with a hand-drawn, sketchy, appearance - https://news.ycombinator.com/item?id=29555853 - दिसंबर 2021, 23 comments
    Show HN: Hand-drawn timelines using RoughJS - https://news.ycombinator.com/item?id=23998225 - जुलाई 2020, 1 comment
    Rough.js – Create graphics with a hand-drawn, sketchy, appearance - https://news.ycombinator.com/item?id=22787187 - अप्रैल 2020, 13 comments
    Rough.js v4.0 – hand-drawn, sketchy graphics - https://news.ycombinator.com/item?id=22141526 - जनवरी 2020, 20 comments
    Show HN: RoughJS – Create hand-drawn graphics using JavaScript - https://news.ycombinator.com/item?id=16571827 - मार्च 2018, 92 comments
    Show HN: Rough.js simple lib to create hand-drawn, sketchy, scribbly graphics - https://news.ycombinator.com/item?id=13662347 - फरवरी 2017, 1 comment

  • Wired Elements उसी author द्वारा बनाए गए web components का collection है, और Rough.js से sketch-style rendering करता है
    यह किसी भी framework में काम करता है
    https://wiredjs.com/

  • interactive mockup बनाते समय https://wiredjs.com के साथ इसका उपयोग कर रहा हूं। उदाहरण नीचे हैं
    https://edea-dev.gitlab.io/mockups/ (source: https://gitlab.com/edea-dev/mockups)
    https://otfn.development.fabcity.hamburg/git-pdm-mockups/

  • https://excalidraw.com/ याद आता है

    • इस page के हिसाब से Excalidraw उस library को support करता है, तो शायद अंदर इस्तेमाल करता होगा
      update: असल में https://github.com/excalidraw/excalidraw/issues/362 जैसे उदाहरण हैं

  • पहले RoughJS पर आधारित data visualization library roughviz बनाई थी
    https://www.jwilber.me/roughviz/
    इसके author Preet ने और भी कई शानदार projects किए हैं, इसलिए उनकी site भी देखना बनता है: https://shihn.ca/creations/

  • Boxy SVG के Sketchify generator(https://boxy-svg.com/ideas/23) को implement करने में Rough.js का इस्तेमाल किया था
    Rough.js में dependencies बहुत कम हैं और इसे web worker के अंदर भी चलाया जा सकता है—यह बात खास तौर पर अच्छी है

    • उफ, यह तो सिर्फ Chrome engine-based browsers को support करता है
    • Firefox Android support नहीं है क्या? मजाक है

  • बेहतरीन library है। सामान्य SVG files को sketch-style में convert करने वाला svg2roughjs wrapper बनाते समय इसका इस्तेमाल किया था: https://github.com/fskpf/svg2roughjs

  • Rough.js बहुत आकर्षक है। https://www.vanillacomponents.com/ में data grid draw करने के लिए इसका इस्तेमाल कर रहा हूं

  • Rough.js पसंद है। Hatch project में add किए जा सकने वाले Sketchy Shapes बनाते समय इसका इस्तेमाल किया था
    parameters को real-time में बदलकर देखना मजेदार है: https://hatch.one/@darrin/sketchy-shapes/edit