From 52a625358834d9c26a64f053a4e30334c3f1ec4d Mon Sep 17 00:00:00 2001 From: Farzaneh Sefidabi Date: Fri, 6 Oct 2023 18:30:08 +0330 Subject: [PATCH] [docs] update README.md and add codesandbox demo link --- README.md | 58 +++++++++++++++++++++++++++------------------------- package.json | 2 +- 2 files changed, 31 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 281ac63..30e219f 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,6 @@ npm

- This is a React wrapper for [Rough.js](https://roughjs.com/), a JavaScript library for creating sketchy, hand-drawn graphics. [rough-react-wrapper](https://github.com/fsefidabi/rough-react-wrapper) is an alternative for the archived [react-rough](https://github.com/ooade/react-rough) package published by [ooade](https://github.com/ooade). @@ -62,31 +61,31 @@ It will generate a rectangle shape like this: ## Props -| name | type | default | description | -| ------------------------- | ---------------------------------------------------------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| roughness | `number` | `1` | Indicates how rough the drawing is. A rectangle with the roughness of 0 would be a perfect rectangle. There is no upper limit to this value, but a value over 10 is mostly useless. | -| bowing | `number` | `1` | Indicates how curvy the lines are when drawing a sketch. | -| seed | `number` | `0` | Sets the seed for creating random values used in shape generation. This is useful for creating the exact shape when re-generating with the same parameters. The value of seed is between 1 and 2^31. If seed is not defined, or set to 0, no seed is used when computing random values. | -| stroke | `string` | `black` | Represents the color used to paint the outline of the drawn objects. If this is set to `none`, the shape vectors do not contain a stroke (This is different from having a transparent stroke). | -| strokeWidth | `number` | `1` | Sets the width of the strokes (in pixels). | -| fill | `string` | `transparent` | Represents the color used to fill a shape. In `hachure` style fills, this represents the color of the hachure lines. In `dots` style, it represents the color of the dots. | -| fillStyle | `enum` from [Fill Styles](#fill-styles) | `hachure` | Represents the filling style of an object. | -| fillWeight | `number` | half of the `strokeWidth` value | Represents the width of the hachure lines. | -| hachureAngle | `number` | -41 degree | Defines the angle of the hachure lines (in degrees). | -| hachureGap | `number` | four times of the `strokeWidth` value | Defines the average gap between two hachure lines (in pixels). | -| curveStepCount | `number` | `9` | When drawing ellipses, circles, and arcs, RoughJS approximates `curveStepCount` number of points to estimate the shape. | -| curveFitting | `number` | `0.95` | When drawing ellipses, circles, and arcs, Let RoughJS know how close should the rendered dimensions be when compared to the specified one. A value of 1 will ensure that the dimensions are almost 100% accurate. | -| strokeLineDash | `array` of numbers | `[]` | Sets the line dash pattern. Use this property if you want the stroke to be dashed (this does not affect the hachure and other fills of the shape). Set its value as described in [setLineDash method of canvas](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). | -| strokeLineDashOffset | `number` | `0` | Sets the line dash offset. Use this property if you want the stroke to be dashed. This is akin to the [lineDashOffset of canvas](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). | -| fillLineDash | `array` of numbers | `[]` | Similar to the `strokeLineDash` property but it affects the fills, not the stroke. eg. when you want hachure lines to be dashed. | -| fillLineDashOffset | `number` | `0` | Similar to the `strokeLineDashOffset` property but it affects the fills, not the stroke. | -| disableMultiStroke | `boolean` | `true` | Indicates if roughjs should or should not apply multiple strokes to sketch the shape. | -| disableMultiStrokeFill | `boolean` | `true` | Indicates if roughjs should or should not apply multiple strokes to sketch the hachure lines to fill the shape. | -| simplification | 0 < `number` < 1 | `0` | When drawing paths using SVG path instructions, simplification can be set to simplify the shape by the specified factor. For example, a path with 100 points and a simplification value of 0.5 will estimate the shape to about 50 points. This will give more complex shapes a sketchy feel. | -| dashOffset | `number` | value of `hachureGap` | Indicates the nominal length of dash (in pixels) when filling a shape using the dashed style. | -| dashGap | `number` | value of `hachureGap` | Indicates the nominal gap between dashes (in pixels) when filling a shape using the dashed style. | -| zigzagOffset | `number` | value of `hachureGap` | Indicates the nominal width of the zig-zag triangle in each line when filling a shape using the zigzag-line style. | -| preserveVertices | `boolean` | `false` | When randomizing shapes do not randomize locations of the end points. e.g. end points of line or a curve. | +| name | type | default | description | +| ------------------------- | ---------------------------------------------------------------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| roughness | `number` | `1` | Indicates how rough the drawing is. A rectangle with the roughness of 0 would be a perfect rectangle. There is no upper limit to this value, but a value over 10 is mostly useless. | +| bowing | `number` | `1` | Indicates how curvy the lines are when drawing a sketch. | +| seed | `number` | `0` | Sets the seed for creating random values used in shape generation. This is useful for creating the exact shape when re-generating with the same parameters. The value of seed is between 1 and 2^31. If seed is not defined, or set to 0, no seed is used when computing random values. | +| stroke | `string` | `black` | Represents the color used to paint the outline of the drawn objects. If this is set to `none`, the shape vectors do not contain a stroke (This is different from having a transparent stroke). | +| strokeWidth | `number` | `1` | Sets the width of the strokes (in pixels). | +| fill | `string` | `transparent` | Represents the color used to fill a shape. In `hachure` style fills, this represents the color of the hachure lines. In `dots` style, it represents the color of the dots. | +| fillStyle | `enum` from [Fill Styles](#fill-styles) | `hachure` | Represents the filling style of an object. | +| fillWeight | `number` | half of the `strokeWidth` value | Represents the width of the hachure lines. | +| hachureAngle | `number` | -41 degree | Defines the angle of the hachure lines (in degrees). | +| hachureGap | `number` | four times of the `strokeWidth` value | Defines the average gap between two hachure lines (in pixels). | +| curveStepCount | `number` | `9` | When drawing ellipses, circles, and arcs, RoughJS approximates `curveStepCount` number of points to estimate the shape. | +| curveFitting | `number` | `0.95` | When drawing ellipses, circles, and arcs, Let RoughJS know how close should the rendered dimensions be when compared to the specified one. A value of 1 will ensure that the dimensions are almost 100% accurate. | +| strokeLineDash | `array` of numbers | `[]` | Sets the line dash pattern. Use this property if you want the stroke to be dashed (this does not affect the hachure and other fills of the shape). Set its value as described in [setLineDash method of canvas](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). | +| strokeLineDashOffset | `number` | `0` | Sets the line dash offset. Use this property if you want the stroke to be dashed. This is akin to the [lineDashOffset of canvas](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). | +| fillLineDash | `array` of numbers | `[]` | Similar to the `strokeLineDash` property but it affects the fills, not the stroke. eg. when you want hachure lines to be dashed. | +| fillLineDashOffset | `number` | `0` | Similar to the `strokeLineDashOffset` property but it affects the fills, not the stroke. | +| disableMultiStroke | `boolean` | `true` | Indicates if roughjs should or should not apply multiple strokes to sketch the shape. | +| disableMultiStrokeFill | `boolean` | `true` | Indicates if roughjs should or should not apply multiple strokes to sketch the hachure lines to fill the shape. | +| simplification | `number` | `0` | When drawing paths using SVG path instructions, simplification can be set to simplify the shape by the specified factor. For example, a path with 100 points and a simplification value of 0.5 will estimate the shape to about 50 points. This will give more complex shapes a sketchy feel. The value should be between 0 and 1. | +| dashOffset | `number` | value of `hachureGap` | Indicates the nominal length of dash (in pixels) when filling a shape using the dashed style. | +| dashGap | `number` | value of `hachureGap` | Indicates the nominal gap between dashes (in pixels) when filling a shape using the dashed style. | +| zigzagOffset | `number` | value of `hachureGap` | Indicates the nominal width of the zig-zag triangle in each line when filling a shape using the zigzag-line style. | +| preserveVertices | `boolean` | `false` | When randomizing shapes do not randomize locations of the end points. e.g. end points of line or a curve. | ### Fill Styles @@ -94,8 +93,8 @@ It will generate a rectangle shape like this: | value | description | example | | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `hachure` | Draws sketchy parallel lines with the same roughness as defined by the roughness and the bowing properties of the shape. It can be further configured using the `fillWeight`, `hachureAngle`, and `hachureGap` properties. | fill-style-hachure | -| `solid` | Like a conventional fill | fill-style-solid | -| `zigzag` | Draws zig-zag lines filling the shape | fill-style-zigzag | +| `solid` | Like a conventional fill. | fill-style-solid | +| `zigzag` | Draws zig-zag lines filling the shape. | fill-style-zigzag | | `cross-hatch` | Similar to `hachure`, but draws cross hatch lines (akin to two `hachure` fills 90 degrees from each other). | fill-style-cross-hatch | | `dots` | Fills the shape with sketchy dots. | fill-style-dots | | `dashed` | Similar to `hachure` but the individual lines are dashed. Dashes can be configured using the `dashOffset` and `dashGap` properties. | fill-style-dashed | @@ -105,6 +104,9 @@ It will generate a rectangle shape like this: You can also check props specification in [rough.js documentation](https://github.com/rough-stuff/rough/wiki#options) +## Playground +You can find a [CodeSandbox demo here](https://codesandbox.io/s/rough-react-wrapper-examples-z3w3f5?file=/src/App.js) + ## Credits rough.js react is inspired by these open source projects: diff --git a/package.json b/package.json index 6f15536..bfa96bb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rough-react-wrapper", - "version": "1.0.0", + "version": "1.0.1", "main": "dist/index.js", "module": "dist/index.es.js", "files": ["dist"],