Acorde de guitarra basado en SVG generador de acordes-VexChords

Vista prévia

Descripción

VexChords es un generador de gráficos de acordes que le ayuda a renderizar dinámicamente acordes de guitarra utilizando el elemento JavaScript y SVG.

Funcionamiento

Instale & descargar.

# NPM
$ npm install vexchords --save

Importe los VexChords.

import * as vexchords from 'vexchords';

Cree un contenedor en el que desee renderizar los acordes de guitarra.

<div class="container"></div>

const selector = '#container';

Dibuje un gráfico de acordes de una matriz de acordes.

const chord = new ChordBox(selector);

chord.draw({


chord: [


[1, 2],


[2, 1],


[3, 2],


[4, 0],


 [5, 'x'],


 [6, 'x']

],


// optional: position marker

position: 5, // start render at fret 5


// optional: barres for barre chords

barres: [


{ fromString: 6, toString: 1, fret: 1 },


{ fromString: 5, toString: 3, fret: 3 }

],


// optional: tuning keys

tuning: ['E', 'A', 'D', 'G', 'B', 'E']

});

Opciones completas para personalizar la tabla de acordes.

const chord = new ChordBox('#selector', {


width: 100, // canvas width

height: 120, // canvas height


numStrings: 6, // number of strings (e.g., 4 for bass)

numFrets: 5, // number of frets (e.g., 7 for stretch chords)

showTuning: true, // show tuning keys


defaultColor: '#666', // default color

bgColor: '#FFF', // background color

strokeColor: '#666', // stroke color (overrides defaultColor)

textColor: '#666', // text color (overrides defaultColor)

stringColor: '#666', // string color (overrides defaultColor)

fretColor: '#666', // fret color (overrides defaultColor)

labelColor: '#666', // label color (overrides defaultColor)


fretWidth: 1, // fret width

stringWidth: 1, // string width


fontFamily,

fontSize,

fontWeight,

fontStyle, // font settings

labelWeight // weight of label font


});