JSPM – react-native-art-extra@0.1.2

Package Exports

react-native-art-extra

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-art-extra) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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;

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