0

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

enter image description here

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?

onehacker
  • 1
  • 2

1 Answers1

0

Finally I fix it by myself. issue:https://github.com/0xfe/vexflow/issues/1374#event-6449532655

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
onehacker
  • 1
  • 2
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Tyler2P Apr 19 '22 at 09:52