dibujo

Instalation

npm install dibujo

How to use it

To start using dibujo you have to first create a dibujo entity

  const render = new dibujo.Render()

after you have created the first dibujo instance you can create a scene but if you don't create a scene and add graphics to dibujo dibujo will use it's default scene to render the graphics you add.

Scene

A scene is a group of graphic objects, when you create a scene you can specify the background color of the scene for example:

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

When you create a scene you can add graphics to the scene

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

And to see the scene the scene must be rendered so you have to add the scene to render in this way:

 render.setScene(scene)

Graphics

There are several kinds of Graphic objects and when you create a new graphic you have to chosse one of them rigth now there are 7 kinds of diferent 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