rough README

The project's README from github.com/rough-stuff/rough. As one markdown file: README.md.

Rough.js

Rough.js is a small (<9 kB) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths.

Rough.js works with both Canvas and SVG.

Rough.js sample

@RoughLib on Twitter.

Install

from npm:

npm install --save roughjs

Or get the latest using unpkg: https://unpkg.com/roughjs@latest/bundled/rough.js

If you are looking for bundled version in different formats, the npm package will have these in the following locations:

CommonJS: roughjs/bundled/rough.cjs.js

ESM: roughjs/bundled/rough.esm.js

Browser IIFE: roughjs/bundled/rough.js

Usage

Rough.js rectangle

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

or SVG

const rc = rough.svg(svg);
let node = rc.rectangle(10, 10, 200, 200); // x, y, width, height
svg.appendChild(node);

Lines and Ellipses

Rough.js rectangle

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

Filling

Rough.js rectangle

rc.circle(50, 50, 80, { fill: 'red' }); // fill with red hachure
rc.rectangle(120, 15, 80, 80, { fill: 'red' });
rc.circle(50, 150, 80, {
  fill: "rgb(10,150,10)",
  fillWeight: 3 // thicker lines for hachure
});
rc.rectangle(220, 15, 80, 80, {
  fill: 'red',
  hachureAngle: 60, // angle of hachure,
  hachureGap: 8
});
rc.rectangle(120, 105, 80, 80, {
  fill: 'rgba(255,0,200,0.2)',
  fillStyle: 'solid' // solid fill
});

Fill styles can be: hachure(default), solid, zigzag, cross-hatch, dots, dashed, or zigzag-line

Rough.js fill examples

Sketching style

Rough.js rectangle

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 Paths

Rough.js paths

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' });

SVG Path with simplification:

Rough.js texas map Rough.js texas map

Examples

Rough.js US map

View examples here

API & Documentation

Full Rough.js API

Credits

Some of the core algorithms were adapted from handy processing lib.

Algorithm to convert SVG arcs to Canvas described here was adapted from Mozilla codebase

Contributors

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

MIT License (c) Preet Shihn

rough (rough-stuff/rough)

Searching Database…

21.3K ·GitHub
Rough
Что это такое?Rough.js — это небольшая (меньше 9 кБ) JavaScript-библиотека для графики, которая делает рисунки похожими на наброски от руки вместо чётких геометричных линий.
Это библиотека, которую я подключаю к своему коду, или отдельное приложение для рисования?Это библиотека, которую вы импортируете в свой веб-код, а не отдельное приложение: вы вызываете её примитивы, и она рисует «набросанный» результат на Canvas или SVG.
Как добавить её в свой проект?Установите её из npm (пакет называется roughjs) или подключите свежую сборку через unpkg. В пакете в папке bundled/ лежат сборки CommonJS, ESM и browser-IIFE.
Нужно ли что-то ещё, кроме самой библиотеки, чтобы начать рисовать?Нет — это обычный клиентский JavaScript, поэтому ни сервер, ни сборка не нужны. Её вспомогательные библиотеки (hachure-fill, path-data-parser, points-on-curve, points-on-path) подтянутся автоматически как зависимости npm.
Насколько она увеличит бандл моей страницы?Совсем немного — вся библиотека весит меньше 9 кБ, так что её можно спокойно держать в продакшене и не задумываться об этом.
Откуда взяты алгоритмы «набросанности»?Автор ссылается на библиотеку handy processing lib для части ключевых алгоритмов и на кодовую базу Mozilla для преобразования SVG-дуг в Canvas.
Можно ли использовать её в коммерческих проектах?Да — Rough.js распространяется по лицензии MIT (c) Preet Shihn, поэтому свободное использование, включая коммерческое, разрешено.
What are similar projects?zdog, signature_pad, konva, matter-js, paper.js, anime, particles.js, mojs
Which topics is it in?html5-canvas, sketch, 2d, creative-coding, canvas, lightweight, svg, graphics, javascript-library, browser, html, npm
Creator
rough-stuff
Size
6 MB
Stars
21.3K
Updated
CommitNov 20Releasev3.1.0Mar 14
Age
9y
Commits · 90 Days