react-native-art-extra/README.md

Useful React Components like tags used in svg file for ReactNativeART's Surface Component.

## ART Extra for react native

### Install

```
npm install --save react-native-art-extra
```

### Usage

```
import 'react-native-art-extra';
import { ART } from 'react-native';

const {Surface, Group, Shape, ...} = ART;
```

or

```
import ART from 'react-native-art-extra';

const {Surface, Group, Shape, ...} = ART;
```

## Doc and Example

***Notation:*** All example with props  

    ```
    const style = {
      fill: 'red' ,
      stroke: 'blue' ,
      strokeWidth: 5,
      strokeCap: 'square',
      strokeJoin: 'miter',
    };
    ```

* #### Line

    * `x1`
    * `y1`
    * `x2`
    * `y2`
    
    
    ```
    <Surface width={100} height={100}>
      <Line {...style} x1={25} y1={50} x2={75} y2={50}/>
    </Surface>
    ```
    
  <div>
    <svg width="100" height="100">
      <line x1="25" y1="50" x2="75" y2="50" style="stroke: blue; fill: red; stroke-width: 5"/>
    </svg>
  </div>
  
* #### Rect

  * `x`
  * `y`
  * `width`
  * `height`
  * `rx`
  * `ry`

  ```
  <Surface width={100} height={100}>
      <Rect {...style} x='5' y='5' width='60' height='90' rx='30' ry='20'/>
    </Surface>
  ```
  
  <div>
    <svg width="100" height="120">
      <rect x="5" y="5" width='60' height='90' rx='30' ry='20' style="stroke: blue; fill: red; stroke-width: 5"/>
    </svg>
  </div>
  
* #### Ellipse

  * `cx`
  * `cy`
  * `rx`
  * `ry`

  ```
    <Surface width={100} height={100}>
      <Ellipse {...style} cx={50} cy={50} rx={40} ry={20} transform={new Transform().skewX(30, 300, 100)}/>
    </Surface>
  ```
  <div>
    <svg width="100" height="120">
      <ellipse cx="50" cy="50" rx="40" ry="20" style="stroke: blue; fill: red; stroke-width: 5"/>
    </svg>
  </div>

### Circle

  * `cx`
  * `cy`
  * `r`

  ```
    <Surface width={100} height={100}>
      <Circle {...style} cx={50} cy={50} r={40} transform={new Transform().skewX(30, 300, 100)}/>
    </Surface>
  ```
  <div>
    <svg width="100" height="120">
      <circle cx="50" cy="50" r="40" style="stroke: blue; fill: red; stroke-width: 5"/>
    </svg>
  </div>

### Wedge

  * `cx`
  * `cy`
  * `or`
  * `ir`
  * `sa`
  * `ea`

  ```
    <Surface width={100} height={100}>
      <Wedge {...style} cx={50} cy={100} or={70} ir={30} sa={-30} ea={30} />
    </Surface>
  ```

  <div>
    <svg width="100" height="120">
      <path d="M15,39.38a70,70,0,0,1,70,0L65,74.02a30,30,0,0,0,-30,0z" style="stroke: blue; fill: red; stroke-width: 5"/>
    </svg>
  </div>

### Polyline

  * `points` need at least 3 points

  ```
    <Surface width={100} height={100}>
      <Polyline {...style} points={[10, 10, 0, 30, 50,0,50,100,100, 50, 0, 50]} />
    </Surface>
  ```

  <div>
    <svg>
      <polyline points="10, 10, 0, 30, 50,0,50,100,100, 50, 0, 50" style="stroke: blue; fill: white; stroke-width: 5"/>
    </svg>
  </div>

### Polygon

  * `points` need at least 3 points

  ```
    <Surface width={100} height={100}>
    	<Polygon {...style} points={[10, 10, 0, 30, 50,0,50,100,100, 50, 0, 50]} />
    </Surface>
  ```

  <div>
    <svg>
      <polygon points="10, 10, 0, 30, 50,0,50,100,100, 50, 0, 50" style="stroke: blue; fill: red; stroke-width: 5"/>
    </svg>
  </div>
  
### Transform
  

#### scale

  * `scale` 

    ```
      type scale = (sx, sy, x, y)=> Transform
    ```

  * `scaleTo` 

  * `scaleX`
  * `scaleY`
  * `scaleXTo`
  * `scaleYTo`

#### skew

  * `skew` 

    ```
      type skew = (dx, dy, x, y)=> Transform
    ```

  * `skewTo`

  * `skewX`
  * `skewY`
  * `skewXTo`
  * `skewYTo`