https://github.com/wobsoriano/rn-perfect-sketch-canvas

Perfect pressure-sensitive drawing for both iOS and Android.
https://github.com/wobsoriano/rn-perfect-sketch-canvas

canvas react react-native skia

Last synced: about 23 hours ago
JSON representation

Perfect pressure-sensitive drawing for both iOS and Android.

• Host: GitHub
• URL: https://github.com/wobsoriano/rn-perfect-sketch-canvas
• Owner: wobsoriano
• License: mit
• Created: 2022-04-29T21:56:20.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-12-14T19:25:31.000Z (about 1 year ago)
• Last Synced: 2025-01-14T04:08:29.003Z (9 days ago)
• Topics: canvas, react, react-native, skia
• Language: TypeScript
• Homepage:
• Size: 1.84 MB
• Stars: 144
• Watchers: 5
• Forks: 19
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# rn-perfect-sketch-canvas

A React Native component for drawing perfect pressure-sensitive freehand lines using [perfect-freehand](https://github.com/steveruizok/perfect-freehand) and [Skia renderer](https://shopify.github.io/react-native-skia/).



## Installation

```sh

npm install @shopify/react-native-skia rn-perfect-sketch-canvas

```

## Usage

```tsx

import React, { useRef } from 'react';

import { StyleSheet, SafeAreaView, Button } from 'react-native';

import { SketchCanvas, SketchCanvasRef } from 'rn-perfect-sketch-canvas';

export default function App() {

  const canvasRef = useRef(null);

  return (

    

      

      

    

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

  },

});

```

## Props

| Property           | Type     | Default | Description                                           |

| ------------------ | -------- | ------- | ----------------------------------------------------- |

| `containerStyle`   | object   | {}       | Styles to be applied on canvas component.            |

| `strokeColor`      | string   | black   | Color of stroke.                                      |

| `strokeWidth`      | number   | 8      | Size (diameter) of the stroke.                        |

| `topChildren`      | ReactNode   |      |        Node to be put on top of sketch                 |

| `bottomChildren`      | ReactNode   |      |     Node to be put on bottom of sketch (Background)                    |

## Methods

| Method           | Description|

| ------------------ | -------- |

| `reset()`   | Clear all the paths.   |

| `undo()`      | Undo   |

| `redo()`      | Redo   |

| `toBase64(format?: ImageFormat, quality?: number)`      | Get the base64 of image.   |

| `toImage()`      | Get a snapshot from the canvas in the surface.   |

| `toSvg(width: number, height: number, backgroundColor?: string)`      | Get the svg string of all paths.   |

| `toPath()`      | Get the array of point with {color, width, style, id} groups that got drawn in the canvas.    |

| `drawPath(path: points[])`      | Draws from an array of point with {color, width, style, id} groups.   |

| `toPoints()`      | Get the array of point groups that got drawn in the canvas.    |

| `addPoints(points: [x, y][][])`      | Draws from an array of point groups.   |

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## Inspired By

Please check out these previous works that helped inspire the creation of rn-perfect-sketch-canvas.

- [terrylinla/react-native-sketch-canvas](https://github.com/terrylinla/react-native-sketch-canvas) - A React Native component for drawing by touching on both iOS and Android.

- [uragirii/rn-skia-sketch-canvas](https://github.com/uragirii/rn-skia-sketch-canvas) - A React Native component for drawing using Skia renderer.

## License

MIT