Biblioteca de dibujo de lienzo liso-PortrayCanvas

Vista prévia

Descripción

PortrayCanvas es una aplicación de dibujo de JavaScript que permite al usuario dibujar puntos y líneas suaves en un elemento canvas.

Install & Download:

# Yarn
$ yarn add portraycanvas

# NPM
$ npm install portraycanvas --save

Funcionamiento

Importa el JavaScript ' portraycanvas. min. js ' en el archivo HTML.

<script src="dist/portraycanvas.min.js"></script>

Cree un elemento canvas de HTML5 para la aplicación de dibujo.

<canvas id="example" width="800" height="650"></canvas>

Inicializar la aplicación de dibujo.

var canvas = new PortrayCanvas(document.getElementById('example'), {


// options here
});

Personalice la aplicación de dibujo con los siguientes ajustes:

var canvas = new PortrayCanvas(document.getElementById('example'), {



// line width


lineWidth: 2,



// color of lines & points


color: '#00ff00',



// period in which it collects points


period: 5



});

Controladores de eventos disponibles.

var canvas = new PortrayCanvas(document.getElementById('example'), {



onLineFinish: function(c){



// do something


},



onClear: function(){



// do something


},



onUndo: function(line){



// do something


}

});

Devuelva una matriz de objetos que contengan todas las líneas que acaba de dibujó.

canvas.getLines();

More API methods.

// clears all lines
canvas.clear();

 // undo
canvas.undo();

 // set the color of the line
canvas.setColor('#ff0000');

// reverts the default color
canvas.revertDefaultColor();