Dibujo NPM | npm.io

Instalation

How to use it

  const render = new dibujo.Render()

Scene

const scene = new dibujo.Scene('#FF00FF')

  const rect = new dibujo.Rect({
    position: new dibujo.Vector(10, 10),
    width: 100,
    height: 100,
    color: 'blue'
  })
  
  scene.add(rect)

 render.setScene(scene)

Graphics

Rect
Circle
Picture
Line
Poligon
Text
Arc

Picture

  const picture = new dibujo.Picture({
    position: new dibujo.Vector(10, 10),
    width: 100,
    height: 100,
    src: './apple.png'
  })

Param	Type	Description
position	object	This object contains the position of the image
src	string	This will be the location where the image is saved
width	number	The width
opacity	number	The opacity
height	number	The height

Rect

  const rect = new dibujo.Rect({
    position: new dibujo.Vector(10, 10),
    width: 100,
    height: 100,
    color: 'blue'
  })

Param	Type	Description
position	object	This object contains the position of the rect
color	string	The color of the rect
width	number	The width
height	number	The height
stroke	boolean	Draw stroke
lineColor	number	Stroke color
lineWidth	number	Line width

Text

  const text = new dibujo.Text({
    position: new dibujo.Vector(10, 10),
    content: 'Hello World'
  })

Param	Type	Description
position	Point	The coordinates of the text
content	string	The content
style	object	This is the style of the text

Line

  const line = new dibujo.Line({
    start: new dibujo.Vector(10, 10),
    end: new dibujo.Vector(20, 20),
    color: 'blue'
  })

Param	Type	Description
start	Point	The start coordinate of the line
end	Point	The end coordinate of the line
color	string	This is the color of the line

Poligon

  const poli = new dibujo.Poligon({
    cords: [
      {x: 10, y: 10},
      {x: 20, y: 20},
      {x: 10, y: 20}
    ],
    color: 'blue'
  })

Param	Type	Description
cords	Array	Array of the vertex of the poligon
fill	boolean	Fill the poligon
stroke	boolean	Stroke the poligon
strokeColor	string	This is the color of the lines of the poligon
color	string	This is the color of the poligon

Circle

  const circle = new dibujo.Circle({
    position: new dibujo.Vector(10, 10),
    radius: 10,
    color: 'blue'
  })

Param	Type	Description
position	Point	Position of the circle
radius	number	Radius of the circle
color	string	Color of the circle
stroke	boolean	Show stroke
lineWidth	number	Width of the line
lineColor	string	Color of the line

Arc

  const arc = new dibujo.Arc({
    position: new dibujo.Vector(10, 10),
    radius: 10,
    color: 'blue'
  })

Param	Type	Description
color	string	Color of the arc
position	Point	Position of the arc
radius	number	Radius of the arc
lineWidth	number	Width of the line
stroke	boolean	Show stroke
lineColor	string	Color of the line
eAngl	number	End angle of the arc
aAngl	number	Start angle of the arc