Rough.js: Elle Çizilmiş Gibi Eskiz Efektli Grafik Üretimi

Rough.js

• Rough.js, eskiz benzeri el yapımı çizim stiliyle grafikler çizebilen küçük bir grafik kütüphanesidir.
• Çizgiler, eğriler, yaylar, çokgenler, daireler ve elipsler çizebilen temel şekilleri tanımlar; ayrıca SVG yollarını çizmeyi de destekler.
• Rough.js hem Canvas hem de SVG üzerinde çalışır.

Kurulum

• npm ile kurulum: npm install --save roughjs
• Kod içinde kullanım: import rough from 'roughjs';

Kullanım

• Tüm Rough.js API'si Github'da görülebilir.
• Canvas kullanım örneği: const rc = rough.canvas(document.getElementById('canvas')); rc.rectangle(10, 10, 200, 200);
• SVG kullanım örneği: const rc = rough.svg(svg); let node = rc.rectangle(10, 10, 200, 200); svg.appendChild(node);

Çizgiler ve elipsler

• Daire, elips ve çizgi çizim örneği: rc.circle(80, 120, 50); rc.ellipse(300, 100, 150, 80); rc.line(80, 120, 300, 100);

Dolgu

• Dolgu stilleri arasında hachure (varsayılan), solid, zigzag, cross-hatch, dots, sunburst, dashed, zigzag-line yer alır.
• Dolgu örneği: rc.circle(50, 50, 80, { fill: 'red' }); rc.rectangle(120, 15, 80, 80, { fill: 'red' });

Eskiz stili

• Eskiz stilini ayarlama örneği: rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' }); rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

SVG yolları

• SVG yolu çizim örneği: rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });

Örnekler

• Örnekler burada görülebilir.

API ve dokümantasyon

• Tüm Rough.js API'si

Katkıda bulunanlar

• Çizgi ve elips konturlarını çizen temel algoritma handyprocessing kütüphanesinden alınmıştır.
• SVG yaylarını Canvas'a dönüştüren algoritma Mozilla kod tabanından alınmıştır.

Bu projeyi destekleyin

• Bu projeyi Github Sponsors veya Open Collective üzerinden destekleyebilirsiniz.
• Bu proje Excalidraw, Cube, Diagrams.net, Terrastruct, SheetJS, Poster Maker, Chartle ve diğerlerinden destek almaktadır.

Lisans

• MIT lisansı, telif hakkı Preet Shihn'e aittir.

---

GN⁺ görüşü

• Rough.js, kullanıcıların web üzerinde el yapımı çizim stilinde grafikleri kolayca oluşturmasını sağlayan yenilikçi bir kütüphanedir.
• Çeşitli dolgu stilleri ve eskiz stilini ayarlayabilme özellikleri, web tabanlı grafik tasarıma yeni bir boyut kazandırır.
• Bu kütüphane açık kaynak topluluğunun desteğini alır ve çeşitli web tabanlı araçlarla entegre olarak kullanıcı deneyimini zenginleştirmeye katkı sağlar.

[GN⁺]

Hacker News görüşleri

• RoughNotation & RoughJS kullanım örnekleri

  • Alt çizgi, vurgu vb. destekleyen ve RoughJS kullanan RoughNotation’dan bahsediliyor.
  • Kendi web sitesinden ilham alarak yaptığı bir uygulama örneği paylaşılmış; vurgulanmış başlığın üzerine fareyle gelindiğinde nasıl çalıştığını özetleyen yazıya yönlendiriyor.
  • RoughJS’nin popülerliğini ve kullanım örneklerini göstermek için ilgili Hacker News gönderileri ve yorum sayıları listeleniyor.

• Wired Elements & svg2roughjs

  • RoughJS kullanarak skeç tarzında render alan bir web component seti olan Wired Elements tanıtılıyor.
  • SVG dosyalarını skeçe dönüştüren svg2roughjs sarmalayıcısını yapma deneyimi paylaşılıyor.

• RoughJS ile interaktif mockup oluşturma

  • WiredJS ile birlikte kullanılarak interaktif mockup üretme örneği veriliyor.
  • Mockup örneği ve kaynak kod bağlantısı sunuluyor.

• RoughJS’nin çeşitli kullanımları

  • Excalidraw ile karşılaştırılarak RoughJS’nin etkisinin beğenildiği belirtiliyor.
  • horserecords.info üzerinde RoughJS kullanımına bir örnek veriliyor.
  • Boxy SVG içindeki "Sketchify" üreticisini uygulama deneyimi paylaşılırken, RoughJS’nin neredeyse hiç bağımlılığı olmaması ve web worker içinde çalışabilmesi önemli avantajlar olarak vurgulanıyor.
  • Kütüphanenin kullanım kolaylığı ve zaman içinde kanıtlanmış kararlılığı övülüyor; usdc.cool üzerinde grafik üretmek için kullanıldığı örneği veriliyor.
  • Rough.js’e teşekkür edilerek Hatch projesine eklenebilecek Sketchy Shapes oluşturmanın ve parametreleri gerçek zamanlı ayarlamanın eğlenceli olduğu ifade ediliyor.

Bu özet, Hacker News yorumlarında RoughJS ve ilgili araçların çeşitli kullanım örneklerini ve kullanıcıların olumlu deneyimlerini gösteriyor. RoughJS, elde çizilmiş gibi görünen skeç tarzı grafikler üretmeye yarayan bir JavaScript kütüphanesi olarak web geliştiricileri arasında popüler; mockup, grafik ve interaktif öğeler gibi çeşitli web bileşenleri oluşturmak için kullanılıyor.