▲

GN⁺: Rough.js: 손으로 그린 듯한 스케치 효과의 그래픽 생성

 (roughjs.com)
4P by neo 11달전 | favorite | 댓글 1개

Rough.js

  • Rough.js는 스케치 같은 수제 드로잉 스타일로 그래픽을 그릴 수 있는 작은 그래픽 라이브러리임.
  • 선, 곡선, 호, 다각형, 원, 타원을 그릴 수 있는 기본 도형을 정의하며, SVG 경로를 그리는 것도 지원함.
  • Rough.js는 캔버스와 SVG 모두에서 작동함.

설치

  • npm을 통해 설치: npm install --save roughjs
  • 코드에서 사용: import rough from 'roughjs';

사용법

  • 전체 Rough.js API는 Github에서 확인 가능함.
  • 캔버스 사용 예: 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);

선과 타원

  • 원과 타원, 선을 그리는 예: rc.circle(80, 120, 50); rc.ellipse(300, 100, 150, 80); rc.line(80, 120, 300, 100);

채우기

  • 채우기 스타일에는 hachure (기본), solid, zigzag, cross-hatch, dots, sunburst, dashed, zigzag-line 등이 있음.
  • 채우기 예: rc.circle(50, 50, 80, { fill: 'red' }); rc.rectangle(120, 15, 80, 80, { fill: 'red' });

스케치 스타일

  • 스케치 스타일 조정 예: rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' }); rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

SVG 경로

  • SVG 경로 그리기 예: rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });

예시

  • 여기서 예시 확인 가능.

API & 문서

  • 전체 Rough.js API

크레딧

  • 선과 타원 윤곽을 그리는 핵심 알고리즘은 handyprocessing 라이브러리에서 적용됨.
  • SVG 호를 캔버스로 변환하는 알고리즘은 Mozilla 코드베이스에서 적용됨.

이 프로젝트 지원하기

  • Github Sponsors나 Open Collective를 통해 이 프로젝트를 지원할 수 있음.
  • 이 프로젝트는 Excalidraw, Cube, Diagrams.net, Terrastruct, SheetJS, Poster Maker, Chartle 등의 지원을 받고 있음.

라이선스

  • MIT 라이선스, Preet Shihn 저작권.

GN⁺의 의견

  • Rough.js는 사용자가 간단하게 수제 드로잉 스타일의 그래픽을 웹에서 구현할 수 있게 해주는 혁신적인 라이브러리임.
  • 다양한 채우기 스타일과 스케치 스타일을 조정할 수 있는 기능은 웹 기반 그래픽 디자인에 새로운 차원을 제공함.
  • 이 라이브러리는 오픈 소스 커뮤니티의 지원을 받으며, 다양한 웹 기반 도구와 통합되어 사용자 경험을 풍부하게 만드는 데 기여하고 있음.
▲
neo 11달전  [-]
Hacker News 의견

  • RoughNotation & RoughJS 사용 사례

    • RoughJS를 사용하여 밑줄, 강조 등을 지원하는 RoughNotation에 대한 언급.
    • 자신의 웹사이트에서 영감을 받아 구현한 예시로, 하이라이트된 제목에 마우스를 올리면 작동 방식을 요약한 글을 참조하도록 안내.
    • 관련된 해커뉴스 게시물들과 그들의 댓글 수를 나열하여 RoughJS의 인기와 사용 사례를 보여줌.

  • Wired Elements & svg2roughjs

    • RoughJS를 사용하여 스케치 스타일로 렌더링하는 웹 컴포넌트 세트인 Wired Elements 소개.
    • SVG 파일을 스케치로 변환하는 svg2roughjs 래퍼를 만든 경험 공유.

  • RoughJS를 활용한 인터랙티브 목업 생성

    • WiredJS와 함께 사용하여 인터랙티브 목업을 만드는 사례 소개.
    • 목업 예시와 소스 코드 링크 제공.

  • RoughJS의 다양한 활용

    • Excalidraw와 비교하며 RoughJS의 효과를 좋아한다는 의견.
    • horserecords.info에서 RoughJS를 사용한 사례.
    • Boxy SVG 내의 "Sketchify" 생성기 구현 경험을 공유하며, RoughJS가 의존성이 거의 없고 웹 워커 내에서 실행될 수 있다는 장점을 강조.
    • 라이브러리의 사용 용이성과 시간에 견딘 안정성을 칭찬하며, usdc.cool에서 차트를 만드는 데 사용했다는 사례.
    • Rough.js에 감사를 표하며, Hatch 프로젝트에 추가할 수 있는 Sketchy Shapes를 만들고, 실시간으로 파라미터를 조정하는 것이 재미있다는 의견.

이 요약은 해커뉴스 댓글에서 RoughJS 및 관련 도구들의 다양한 활용 사례와 사용자들의 긍정적인 경험을 보여줌. RoughJS는 손으로 그린 듯한 스케치 스타일의 그래픽을 만들 수 있는 자바스크립트 라이브러리로, 웹 개발자들 사이에서 인기가 있으며, 목업, 차트, 인터랙티브 요소 등 다양한 웹 컴포넌트를 만드는 데 사용됨.

답변달기