JavaScript hand-painted Graphic library ROUGHJS usage Guide

ROUGHJS is a lightweight JavaScript graphics library (approximately 9KB after compression), allowing you to draw sketch-style, hand-drawn-style graphics on your Web page. ROUGHJS defines the elements that draw lines, curves, arcs, polygons, circles, and ellipses, and it also supports drawing SVG paths.

Here is its Project website address: https://roughjs.com/

ROUGHJS can work on both canvas and SVG, which is a very useful feature.

Installation

The latest ROUGHJS library can be downloaded from GitHub.

or download from NPM:

Install --save ROUGHJS

Use

Const RC = Rough.canvas (document.getElementById (' canvas ')); Rc.rectangle (//  x, y, width, height 

or use SVG

Const RC =//  x, y, width, heightsvg.appendchild (node);

Draw lines and ellipses

// CenterX, centery, diameter // CenterX, CenterY, width, height // x1, y1, x2, y2

Fill

Rc.circle (+, +, {fill: ' Red '});//fill with red hachureRc.rectangle (+, +, +), {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});

The fill style can be: Halo Wengjiang Line (default), solid, zigzag, cross hatch, or point.

Sketch Style

Rc.rectangle (n, roughness:0.5, fill: ' Red ' }), Rc.rectangle (+, +, +, + roughness:2.8, fil L: ' Blue ' }); Rc.rectangle (up, up, up, N, {bowing:6, stroke: ' Green ', strokewidth:3});

SVG path

Rc.path (' M80 a ', 0, 0, 0, L-Z ', {fill: ' Green ' ), Rc.path (' M230 a 45 45, 0, 1, 0, 275 L 275 z ', {fill: ' Purple ' }), Rc.path (' M80 ' A, 0, 0, 1, 275 L-Z ', {fill: ' Red ' } ); Rc.path (' M230 A, 0, 1, 1, 275 275 L 275 Z ', {fill: ' Blue '});

Simplified SVG path:

Using the Web Workers

If you have imported workly (about 1k in size) on your Web page, Roughjs automatically throws all the processing work to the Web Worker while releasing the UI main thread. With the support of web worker, it is very useful to create complex graphics using ROUGHJS, such as maps. You can read more about this here.

<src= "Https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.min.js"> </script><src= ". /.. /dist/rough.min.js "></script>

Here you can see examples of using ROUGHJS to generate maps.

Example

You can see some examples of ROUGHJS use on this page.

Simple basic Graphic Drawing

<id= "Canvas"  width= " $" height= "  ></canvas>

<script>Const RC= Rough.canvas (document.getElementById (' canvas ')));//Line and RectangleRc.rectangle (10, 10, 100, 100); Rc.rectangle (140, 10, 100, 100, {fill:' Rgba (255,0,0,0.2) ', FillStyle:' Solid ', roughness:2}); Rc.rectangle (10, 130, 100, 100, {fill:' Red ', Stroke:' Blue ', Hachureangle:60, Hachuregap:10, FillWeight:5, Strokewidth:5});//Ellipse and CircleRc.ellipse (350, 50, 150, 80); Rc.ellipse (610, 50, 150, 80, {fill:' Blue '}); Rc.circle (480, 50, 80, {stroke:' Red ', strokewidth:2, fill:' Rgba (0,255,0,0.3) ', FillStyle: ' Solid '});//overlapping circlesRc.circle (480, 150, 80, {stroke:' Red ', strokewidth:4, fill:' Rgba (0,255,0,1) ', Fillweight:4, Hachuregap:6}); Rc.circle (530, 150, 80, {stroke:' Blue ', strokewidth:4, fill:' Rgba (255,255,0,1) ', Fillweight:4, Hachuregap:6});//Linearpath and PolygonRc.linearpath ([[690, 10], [790, 20], [750, 120], [690, 100]], {roughness:0.7, Stroke:' Red ', strokewidth:4}); Rc.polygon ([[690, 130], [790, 140], [750, 240], [690, 220]]); Rc.polygon ([[690, 250], [790, 260], [750, 360], [690, 340]], {stroke:' Red ', strokewidth:4, fill:' Rgba (0,0,255,0.2) ', FillStyle: ' Solid '}); Rc.polygon ([[690, 370], [790, 385], [750, 480], [690, 460]], {stroke:' Red ', Hachureangle:65, fill:' Rgba (0,0,255,0.6) '});//ArcsRc.arc, Math.PI, Math.PI * 1.6); Rc.arc (, Math.PI, Math.PI * 1.6,true); Rc.arc (, 0, MATH.PI/2,true, {stroke:' Red ', strokewidth:4, fill:' Rgba (255,255,0,0.4) ', FillStyle: ' Solid '}); Rc.arc (, MATH.PI/2, Math.PI,true, {stroke:' Blue ', strokewidth:2, fill:' Rgba (255,0,255,0.4) '});//Draw sine CurveLet points = []; for(Let i = 0; i < i++;) {  //4pi-400pxLet x = (400/20) * i + 10; Let Xdeg= (math.pi/100) *x; Let y= Math.Round (Math.sin (xdeg) * 90) + 500; Points.push ([x, Y]);} Rc.curve (points, {roughness:1.2, stroke: ' Red ', strokewidth:3});</script>

View Demo

Draw a column chart with D3.js

 <  script  src  = "Rough.min.js"  ></ script  >  <  script  src  = "Https://d3js.org/d3.v4.min.js"  ></ script  >  

<id= "Canvas"  width= "960"  height= "$"  ></canvas>

<script>varCanvas = document.getElementById (' Canvas '); Const RC=Rough.canvas (canvas, {options: {fill:"Blue", roughness:0.8, bowing:0.7  }});varContext = Canvas.getcontext ("2d");varMargin = {top:20, right:20, bottom:30, left:40}, Width= Canvas.width-margin.left-margin.right, Height= Canvas.height-margin.top-Margin.bottom;varx =D3.scaleband (). Rangeround ([0, Width]) . Padding (0.1);vary =d3.scalelinear (). Rangeround ([Height,0]); Context.translate (Margin.left, Margin.top);d 3.TSV ("DATA.TSV",function(d) {d.frequency= +d.frequency; returnD;},function(Error, data) {if(Error)Throwerror; X.domain (Data.map (function(d) {returnD.letter;})); Y.domain ([0, D3.max (data,function(d) {returnd.frequency;})]); varYtickcount = 10, Yticks=y.ticks (ytickcount), Ytickformat= Y.tickformat (ytickcount, "%"); Data.foreach (function(d) {rc.rectangle (x (d.letter), Y (d.frequency), x.bandwidth (), Height-y (d.frequency));  });  Context.beginpath (); X.domain (). ForEach (function(d) {Context.moveto (x (d)+ X.bandwidth ()/2, height); Context.lineto (x (d)+ X.bandwidth ()/2, height + 6);  }); Context.strokestyle= "BLACK";  Context.stroke (); Context.textalign= "Center"; Context.textbaseline= "Top"; X.domain (). ForEach (function(d) {Context.filltext (d, X (d)+ X.bandwidth ()/2, height + 6);  });  Context.beginpath (); Yticks.foreach (function(d) {Context.moveto (0, Y (d) + 0.5); Context.lineto (-6, Y (d) + 0.5);  }); Context.strokestyle= "BLACK";  Context.stroke (); Context.textalign= "Right"; Context.textbaseline= "Middle"; Yticks.foreach (function(d) {Context.filltext (Ytickformat (d),-9, Y (d));  });  Context.beginpath (); Context.moveto (-6.5, 0 + 0.5); Context.lineto (0.5, 0 + 0.5); Context.lineto (0.5, Height + 0.5); Context.lineto (-6.5, height + 0.5); Context.strokestyle= "BLACK";  Context.stroke ();  Context.save (); Context.rotate (-math.pi/2); Context.textalign= "Right"; Context.textbaseline= "Top"; Context.font= "Bold 10px Sans-serif"; Context.filltext ("Frequency",-10, 10); Context.restore ();});</script>

View Demo

Api

• Roughcanvas and Roughsvg
• Methods and Properties
• Options
• Config

You can use Roughjs very happily and wish you good luck!

JavaScript hand-painted Graphic library ROUGHJS usage Guide