react-native-art-extra v0.1.2

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>

• 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>

• 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>

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>

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>

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>

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>

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