https://github.com/the-labo/the-fabric
Fabric.js wrapper of the-components
https://github.com/the-labo/the-fabric
component the
Last synced: 5 months ago
JSON representation
Fabric.js wrapper of the-components
- Host: GitHub
- URL: https://github.com/the-labo/the-fabric
- Owner: the-labo
- License: mit
- Created: 2017-10-05T02:50:02.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-05T02:54:46.000Z (almost 9 years ago)
- Last Synced: 2025-10-29T14:41:46.338Z (9 months ago)
- Topics: component, the
- Language: JavaScript
- Homepage:
- Size: 1.86 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
the-fabric
==========
[![Build Status][bd_travis_shield_url]][bd_travis_url]
[![npm Version][bd_npm_shield_url]][bd_npm_url]
[![JS Standard][bd_standard_shield_url]][bd_standard_url]
[bd_repo_url]: https://github.com/the-labo/the-fabric
[bd_travis_url]: http://travis-ci.org/the-labo/the-fabric
[bd_travis_shield_url]: http://img.shields.io/travis/the-labo/the-fabric.svg?style=flat
[bd_travis_com_url]: http://travis-ci.com/the-labo/the-fabric
[bd_travis_com_shield_url]: https://api.travis-ci.com/the-labo/the-fabric.svg?token=
[bd_license_url]: https://github.com/the-labo/the-fabric/blob/master/LICENSE
[bd_codeclimate_url]: http://codeclimate.com/github/the-labo/the-fabric
[bd_codeclimate_shield_url]: http://img.shields.io/codeclimate/github/the-labo/the-fabric.svg?style=flat
[bd_codeclimate_coverage_shield_url]: http://img.shields.io/codeclimate/coverage/github/the-labo/the-fabric.svg?style=flat
[bd_gemnasium_url]: https://gemnasium.com/the-labo/the-fabric
[bd_gemnasium_shield_url]: https://gemnasium.com/the-labo/the-fabric.svg
[bd_npm_url]: http://www.npmjs.org/package/the-fabric
[bd_npm_shield_url]: http://img.shields.io/npm/v/the-fabric.svg?style=flat
[bd_standard_url]: http://standardjs.com/
[bd_standard_shield_url]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg
Fabric.js wrapper of the-components
Installation
-----
```bash
$ npm install the-fabric --save
```
Usage
---------
```javascript
'use strict'
import React from 'react'
import { TheFabric, TheFabricStyle } from 'the-fabric'
class ExampleComponent extends React.Component {
constructor (props) {
super(props)
const s = this
s.vx01 = 1
}
render () {
const s = this
return (
{
// Initialize on count 0
if (count === 0) {
canvas.set({'backgroundColor': 'white'})
s.rect01 = new fabric.Rect({
left: 150,
top: 150,
fill: 'red',
width: 20,
height: 20
})
canvas.add(s.rect01)
}
{
const {left} = s.rect01
const vx = s.vx01
const needsTurn = (vx > 0 && left > 200) || (vx < 0 && left < 100)
if (needsTurn) {
s.vx01 *= -1
}
s.rect01.set({left: left + s.vx01})
}
canvas.renderAll()
}}>
)
}
}
export default ExampleComponent
```
Components
-----------
### TheFabric
Canvas drawing of the-components
**Props**
| Name | Type | Description | Default |
| --- | --- | ---- | ---- |
| `draw` | func | Draw handler | `() => null` |
| `width` | number | Canvas width | `300` |
| `height` | number | Canvas height | `300` |
### TheFabricStyle
Style for TheFabric
**Props**
| Name | Type | Description | Default |
| --- | --- | ---- | ---- |
| `options` | object | Style options | `{}` |
License
-------
This software is released under the [MIT License](https://github.com/the-labo/the-fabric/blob/master/LICENSE).
Links
------
+ [THE Labo][t_h_e_labo_url]
[t_h_e_labo_url]: https://github.com/the-labo