VexFlow render guitar tab with beam, but I don't wanna render stem

66 views Asked by At

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?

1

There are 1 answers

1
onehacker On