Login With Github

RoughJS API: Methods and Properties

Both RoughCanvas and RoughSVG provide the same methods. The difference is that the RoughSVG methods return a node (g) that can be inserted in to the SVG DOM.

For each method, options is an optional argument - it configures how the shape is drawn/filled. Default options can be configured in the rough.canvas instantiator described above.

line (x1, y1, x2, y2 [, options])

Draws a line from (x1, y1) to (x2, y2).

roughCanvas.line(60, 60, 190, 60);
roughCanvas.line(60, 60, 190, 60, {strokeWidth: 5});

in SVG:

const line = roughSvg.line(60, 60, 190, 60);
svg.appendChild(line);

rectangle (x, y, width, height [, options])

Draws a rectangle with the top-left corner at (x, y) with the specified width and height.

roughCanvas.rectangle(10, 10, 100, 100);
roughCanvas.rectangle(140, 10, 100, 100, { fill: 'red'});

in SVG:

svg.appendChild(roughSvg.rectangle(10, 10, 100, 100));
svg.appendChild(roughSvg.rectangle(140, 10, 100, 100, { fill: 'red'}));

ellipse (x, y, width, height [, options])

Draws an ellipse with the center at (x, y) and the specified width and height.

roughCanvas.ellipse(350, 50, 150, 80);
roughCanvas.ellipse(610, 50, 150, 80, {fill: 'blue', stroke: 'red'});

circle (x, y, diameter [, options])

Draws a circle with the center at (x, y) and the specified diameter.

roughCanvas.circle(480, 50, 80);

linearPath (points [, options])

Draws a set of lines connecting the specified points.

points is an array of points. Each point is an array with 2 values - [x, y]

roughCanvas.linearPath([[690, 10], [790, 20], [750, 120], [690, 100]]);

polygon (vertices [, options])

Draws a polygon with the specified vertices.

vertices is an array of points. Each point is an array with 2 values - [x, y]

roughCanvas.polygon([[690, 130], [790, 140], [750, 240], [690, 220]]);

arc (x, y, width, height, start, stop, closed [, options])

Draws an arc. An arc is described as a section of en ellipse. xy represent the center of that ellipse. widthheight are the dimensions of that ellipse.

startstop are the start and stop angles for the arc.

closed is a boolean argument. If true, lines are drawn to connect the two end points of the arc to the center.

roughCanvas.arc(350, 300, 200, 180, Math.PI, Math.PI * 1.6, true);
roughCanvas.arc(350, 300, 200, 180, 0, Math.PI / 2, true, {
  stroke: 'red', strokeWidth: 4,
  fill: 'rgba(255,255,0,0.4)', fillStyle: 'solid'
});
roughCanvas.arc(350, 300, 200, 180, Math.PI / 2, Math.PI, true, {
  stroke: 'blue', strokeWidth: 2,
  fill: 'rgba(255,0,255,0.4)'
});

curve (points [, options])

Draws a curve passing through the points passed in.

points is an array of points. Each point is an array with 2 values - [x, y]

// draw sine curve
let points = [];
for (let i = 0; i < 20; i++) {
  let x = (400 / 20) * i + 10;
  let xdeg = (Math.PI / 100) * x;
  let y = Math.round(Math.sin(xdeg) * 90) + 500;
  points.push([x, y]);
}
roughCanvas.curve(points, {
  stroke: 'red', strokeWidth: 3
});

path (d [, options])

Draws a path described using a SVG path data string.

roughCanvas.path('M37,17v15H14V17z M50,0H0v50h50z');
roughCanvas.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });

One of the options you can pass in to the path method is simplification which tries to reduce the number of points in the path, thereby simplifying it. This is great for drawing complex paths like maps. simplification is a number between 0 and 1.

draw (drawable)

Draws the drawable object passed in.

Read more about it here.

RoughCanvas/RoughSVG has only one property:

generator

A generator is a readonly property that lets you create a drawable object for a shape that can be later used with the draw method.

Read about it here.

let roughCanvas = rough.canvas(document.getElementById('myCanvas'));
let generator = roughCanvas.generator;
let rect1 = generator.rectangle(10, 10, 100, 100);
let rect2 = generator.rectangle(10, 120, 100, 100, {fill: 'red'});
roughCanvas.draw(rect1);
roughCanvas.draw(rect2);

0 Comment

temp