VexChords 介绍
JavaScript实现在浏览器中渲染和弦图表。
安装
npm i vexchords
用法
import { Chord Box } from 'vexchords';
const chord = new Chord Box ('#selector',{
// Customizations (all optional,defaults shown)
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
stroke Color: '#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
});
chord.draw({
// array of [string,fret,label (optional)]
chord: [
[1,2],
[2,1],
[3,
[4,0],// fret 0 = open string
[5,'x'],// fret x = muted string
[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']
});
网站地址 : http://vexflow.com/vexchords/
GitHub: https://github.com/0xfe/vexchords
网站描述: JavaScript和弦图表
VexChords官方网站
官方网站： http://vexflow.com/vexchords/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。