react-legra

Draw LEGO like brick shapes using legraJS and Reactjs

react-legra provides a wrap around the common components of legraJS

Install

npm install --save react-legra

// or

yarn add react-legra

Usage

To start drawing, you first need to create a canvas to draw on, the <Board /> component will do that for you.

The <Board /> component recieve the same props as a canvas element, and additionally you can set the canvas prop, to reference all the drawing to an external canvas

All the components but <Board />, recieve (optionally) some configuration props:

options: { // To control the look and feel of the component
  filled?: false,
  color?: blue
},
bs: 24 // Brick size, default to 24

import React from 'react'
import Board, { Line } from 'react-legra'

function MyComponent() {

  return (
    <Board>
      <Line from={[3, 3]} to={[10, 10]} />
      // or
      // <Board.Line from={[5, 0]} to={[10, 10]} />
    </Board>
  )
}

Components

<Line />

Draw a line from (x1, y1) to (x2, y2)

| prop | type | default | |:-------------------:|:-------:|:-------:| | from (required) | Array[x1, y1] | - | | to (required) | Array[x2, y2] | - |

import Board, { Line } from 'react-legra'

function MyComponent() {

  return (
    <Board>
      <Line from={[1, 1]} to={[3, 3]} options={{ color: 'green' }} />
    </Board>
  )
}

<Rectangle />

Draw a rectangle given the top-left coordenates [x, y] (start) as the center point and with the specified width and height

| prop | type | default | |:-------------------:|:-------------:|:-------:| | start (required) | Array[x, y] | - | | width (required) | Integer | - | | height (required) | Integer | - |

import Board, { Rectangle } from 'react-legra'

function MyComponent() {

  return (
    <Board>
      <Rectangle start={[.2, 3]} width={8} height={2}/>
    </Board>
  )
}

<LinearPath />

Draw a set of lines connecting the specified points. points is an array of arrays of points (x, y).

| prop | type | default |:-------------------:|:---------------------------------:|:-------:| | points (required) | Array[[x1, y1], [x2, y2]...] | - |

import Board, { LinearPath } from 'react-legra'

function MyComponent() {

  const points = [[1, 1], [4, 1], [1, 4], [4, 4]]

  return (
    <Board>
      <LinearPath points={points} />
    </Board>
  )
}

<Image />

Draw an image with Legos!!!

| prop | type | default | |:-------------------:|:-------:|:-------:| | src (required) | String | - |

import Board, { Image } from 'react-legra'

function MyComponent() {

  return (
    <Board>
      <Image src="/spong.jpg" bs={8} />
    </Board>
}

<Circle />

Draw a circle from the center point and with the given radius

| prop | type | default | |:-------------------:|:---------------:|:-------:| | center (required) | Array[xc, yc] | - | | radius | Integer | 10 |

import Board, { Circle } from 'react-legra'

function MyComponent() {

  return (
    <Board>
      <Circle center={[3, 3]} radius={2} />
    </Board>
  )
}

<Ellipse />

Draw an ellipse from the center point and the horizontal and vertical axis lenght controlled by hAxis and vAxis props

| prop | type | default | |:-------------------:|:---------------:|:-------:| | center (required) | Array[xc, yc] | - | | hAxis | Integer | null | | vAxis | Integer | null |

import Board, { Ellipse } from 'react-legra'

function MyComponent() {

  return (
    <Board>
      <Ellipse center={[3, 3]} vAxis={2} hAxis={3} />
    </Board>
}

<Arc />

An arc is just a section of an ellipse controlled by the additional start and stop props which represent the angle of the arc, also you can "close" the arc form by these 2 points with the filled prop set to true

| prop | type | default | |:-------------------:|:---------------:|:-------:| | center (required) | Array[xc, yc] | - | | hAxis | Integer | null | | vAxis | Integer | null | | start | Integer | null | | stop | Integer | null | | filled | Boolean | false |

import Board, { Ellipse } from 'react-legra'

function MyComponent() {

  return (
    <Board>
      <Board.Arc center={[5, 3]} vAxis={4} hAxis={5} start={Math.PI} stop={Math.PI * .5} />
      <Board.Arc
        center={[8, 0]}
        options={{ color: 'pink'}}
        vAxis={5}
        hAxis={5}
        start={Math.PI}
        stop={-Math.PI * .5} />
    </Board>
}

<Polygon />

Draw a polygon with the given vertices

| prop | type | default | |:-------------------:|:-------:|:-------:| | vertices (required) | Array[[]] | - |

import Board, { Polygon } from 'react-legra'

function MyComponent() {

  const vertices = [
    [0, 0],
    [0, 7],
    [7, 0],
    [7, 7]
 ]

  return (
    <Board>
      <Polygon vertices={vertices} options={{ color: 'yellow' }} />
    </Board>
}

<BezierCurve />

Draws a bézier curve from (x1, y1) to (x2, y2) with (cp1x, cp1y) and (cp2x, cp2y) as the curve's control points.

| prop | type | default | |:-------------------:|:---------------:|:-------:| | from (required) | Array[x1, y1] | - | | to (required) | Array[x2, y2] | - | | controlPointX (required) | Array[x1, y1] | - | | controlPointY (required) | Array[x2, y2] | - |

import Board, { BeziearCurve } from 'react-legra'

function MyComponent() {

  return (
    <Board>
      <BezierCurve from={[3, 3]} to={[22, 14]} controlPointX={[8, 30]} controlPointX={[18, 1]} />
    </Board>
}

<QuadraticCurve />

Draws a quadratic curve from (x1, y1) to (x2, y2) with (cpx, cpy) as the curve's control point.

| prop | type | default | |:-------------------:|:---------------:|:-------:| | from (required) | Array[x1, y1] | - | | to (required) | Array[x2, y2] | - | | controlPoint (required) | Array[x1, y1, x2, y2] | - |

import Board, { QuadraticCurve } from 'react-legra'

function MyComponent() {

  return (
    <Board>
      <QuadraticCurve from={[3, 3]} to={[22, 14]} controlPoint={[8, 30, 18, 1]} />
    </Board>
}

Development

You'll need run two process (2 tabs) for development:

1.- Watch files and compile them to dist/, run on root directory

npm start // Watch and Compile files changes

2.- Run the example

cd example
npm start // Run the demo app

After that each change you do will be reflected on the demo app

Contributors

• Christofer Flores: christo_pr
• Fernando Barajas: fernando_barajas
• Gibran Lopez: GeDiez

License

MIT © christo-pr