A Flutter implementation of the rough.js library

library

rough is a library that allows you draw in a sketchy, hand-drawn-like style. it’s a direct port of rough.js.

installation

in the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
  rough: <latest_version>

basic usage

right now only drawing via canvas is supported. this is a basic documentation in case you want to play around with rough. i can’t ensure non-breaking changes of the library interface.

to draw a figure you have to:

1. create a drawconfig object to determine how your drawing will look.
2. create a filler to be used when drawing objects (you have to provide a configuration for the filling and a drawconfig for the filling path).
3. create a generator object using the created drawconfig and filler. this will define a drawing/filling style.
4. invoke the drawing method from the generator to create a drawable.
5. paint the drawable in the canvas using the drawrough method extension for canvas.

here an example on how to draw a circle:

//create a `drawconfig` object.
drawconfig mydrawconfig = drawconfig.build(
  roughness: 3,
  curvestepcount: 14,
  maxrandomnessoffset: 3,
);

//create a `filler` with a configuration (we reuse the drawconfig in this case).
fillerconfig myfillerconfig = fillerconfig(
    hachuregap: 8,
    hachureangle: -20,
    drawconfig: mydrawconfig,
);
filler myfiller = zigzagfiller(myfillerconfig);

//create a `generator` with the created `drawconfig` and `filler`
generator generator = generator(
  mydrawconfig,
  myfiller,
);

//4. build a circle `drawable`.
drawable figure = generator.circle(200, 200, 320);

//5. paint the `drawable` in the canvas.
canvas.drawrough(figure, pathpaint, fillpaint);

and this is the result:

both drawconfig and fillerconfig will use default values for anything not specified.

samples

some screenshots of the example app: