my code is:
const div = document.getElementById('mContainer');
const renderer = new Renderer(div, Renderer.Backends.SVG);
renderer.resize(380, 300);
const context = renderer.getContext();
const stave = new TabStave(0, 40, 320);
stave.setContext(context).draw();
const noteData = [
// { keys: ['f/4'], duration: 'q' },
{ keys: ['f/4'], duration: '8' },
{ keys: ['e/4'], duration: '8' },
{ keys: ['d/4'], duration: '8' },
{ keys: ['c/4'], duration: '16' },
{ keys: ['c/4'], duration: '16' },
{ keys: ['c/5'], duration: '8' },
{ keys: ['b/4'], duration: '8' },
{ keys: ['c/5'], duration: '8' },
{ keys: ['c/5'], duration: '32' },
{ keys: ['c/5'], duration: '32' },
{ keys: ['b/4'], duration: '32' },
{ keys: ['f/4'], duration: '32' }
];
function createNote(data) {
const tabNode = new TabNote({
...data,
positions: [{ str: 2, fret: 'x' }],
}, true);
// tabNode.render_options.draw_stem_through_stave = true;
return tabNode;
}
// const formatter = new Formatter();
const notes = noteData.map(createNote);
const voice = new Voice({
num_beats: 4,
beat_value: 4,
}).addTickables(notes);
new Formatter().joinVoices([voice]).format([voice], 300);
voice.draw(context, stave);
const beams = Beam.generateBeams(notes, {
stem_direction: Stem.DOWN,
});
beams.forEach((b) => {
b.setContext(context).draw();
});
the result is enter image description here
But I don't want to render the highlight part
If I close render stem
const tabNode = new TabNote({
...data,
positions: [{ str: 2, fret: 'x' }],
}, false);
the render result is false: enter image description here
so how can i correct it?
Finally I fix it by myself. issue:https://github.com/0xfe/vexflow/issues/1374#event-6449532655