https://github.com/dneustadt/vue-rough
A small components library to use Rough.js in Vue.
https://github.com/dneustadt/vue-rough
canvas drawn hand js rough svg vue
Last synced: 8 months ago
JSON representation
A small components library to use Rough.js in Vue.
- Host: GitHub
- URL: https://github.com/dneustadt/vue-rough
- Owner: dneustadt
- Created: 2020-08-04T15:28:52.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-06-25T14:31:04.000Z (over 2 years ago)
- Last Synced: 2024-05-01T18:25:48.556Z (over 1 year ago)
- Topics: canvas, drawn, hand, js, rough, svg, vue
- Language: Vue
- Homepage:
- Size: 2.79 MB
- Stars: 27
- Watchers: 2
- Forks: 10
- Open Issues: 19
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
- awesome-vue - vue-rough - A small components library to use Rough.js in Vue. ` 📝 2 months ago` (UI Components [🔝](#readme))
- awesome-vue - vue-rough - Components for Rough.js, a graphics library that lets you draw in a sketchy, hand-drawn-like, style. (Components & Libraries / UI Components)
README
# vue-rough
A small components library to use [Rough.js](https://github.com/rough-stuff/rough) in Vue.
## Examples
[https://vue-rough.neustadt.dev](https://vue-rough.neustadt.dev)
## Installation
```
$ npm install vue-rough
```
```js
import VueRough from 'vue-rough';
Vue.use(VueRough);
```
## Container Components
These wrap around visual components. You can choose between canvas or SVG as the container format.
```vue
```
```vue
```
`options` takes an Object with properties to be applied in general to all included visual components.
See the [Rough.js wiki](https://github.com/rough-stuff/rough/wiki#options) for a list of available
options.
## Visual Components
Shown below is a quick overview of the available components with their required properties.
All components may use additional properties. See the [Rough.js wiki](https://github.com/rough-stuff/rough/wiki#options)
for a full list of options. Components must be placed inside `rough-canvas` or `rough-svg`
### rough-line
```vue
```
### rough-rectangle
```vue
```
### rough-ellipse
```vue
```
### rough-circle
```vue
```
### rough-linear-path
```vue
```
### rough-polygon
```vue
```
### rough-arc
```vue
```
### rough-curve
```vue
```
### rough-path
```vue
```