{"id":13984,"date":"2021-03-09T10:30:21","date_gmt":"2021-03-09T09:30:21","guid":{"rendered":"https:\/\/hesmid.nl\/test\/?p=13984"},"modified":"2021-03-09T13:43:11","modified_gmt":"2021-03-09T12:43:11","slug":"rough-js-create-graphics-with-a-hand-drawn-sketchy-appearance","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/rough-js-create-graphics-with-a-hand-drawn-sketchy-appearance\/","title":{"rendered":"rough.js – create graphics with a hand-drawn, sketchy, appearance"},"content":{"rendered":"\n

https:\/\/roughjs.com\/<\/a><\/p>\n\n\n\n

Rough.js<\/h2>\n\n\n\n

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

Rough.js works with both Canvas<\/a> and SVG<\/a>.<\/p>\n\n\n\n

\"Rough.js<\/figure>\n\n\n\n\n\n\n\n

Install<\/h2>\n\n\n\n

Install from npm:<\/p>\n\n\n\n

npm install --save roughjs<\/code><\/pre>\n\n\n\n
And use it in your code:<\/p>\n\n\n\n
import rough from 'roughjs';<\/code><\/pre>\n\n\n\n
Usage<\/h2>\n\n\n\n
View Full Rough.js API<\/a> is available on Github.<\/p>\n\n\n\n
\"Rough.js<\/figure>\n\n\n\n
const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 200, 200); \/\/ x, y, width, height<\/code><\/pre>\n\n\n\n
or SVG<\/p>\n\n\n\n
const rc = rough.svg(svg);
let node = rc.rectangle(10, 10, 200, 200); \/\/ x, y, width, height
svg.appendChild(node);<\/code><\/pre>\n\n\n\n
Lines and Ellipses<\/h2>\n\n\n\n
\"Rough.js<\/figure>\n\n\n\n
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<\/code><\/pre>\n\n\n\n
Filling<\/h2>\n\n\n\n
\"Rough.js<\/figure>\n\n\n\n
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
});<\/code><\/pre>\n\n\n\n
Fill styles can be: hachure<\/strong>(default), solid<\/strong>, zigzag<\/strong>, cross-hatch<\/strong>, dots<\/strong>, sunburst<\/strong>, dashed<\/strong>, or zigzag-line<\/strong><\/p>\n\n\n\n
\"Rough.js<\/figure>\n\n\n\n
Sketching style<\/h2>\n\n\n\n
\"Rough.js<\/figure>\n\n\n\n
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 });<\/code><\/pre>\n\n\n\n
SVG Paths<\/h2>\n\n\n\n
\"Rough.js<\/figure>\n\n\n\n
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' });<\/code><\/pre>\n\n\n\n
SVG Path with simplification:<\/p>\n\n\n\n
\"Rough.js<\/figure>\n\n\n\n
\"Rough.js<\/figure>\n\n\n\n
Examples<\/h2>\n\n\n\n
\"Rough.js<\/figure>\n\n\n\n
View examples here<\/a><\/p>\n\n\n\n
API & Documentation<\/h2>\n\n\n\n
Full Rough.js API<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
https:\/\/roughjs.com\/ Rough.js Rough.js is a small (<9kB gzipped) 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.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[109,45],"tags":[233,101,279,626],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/13984"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=13984"}],"version-history":[{"count":2,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/13984\/revisions"}],"predecessor-version":[{"id":13986,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/13984\/revisions\/13986"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=13984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=13984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=13984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}