vexflow渲染带有光束的吉他选项卡,但我不想渲染茎

发布于 2025-01-21 23:18:25 字数 2212 浏览 3 评论 0原文

我的代码是:


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();
        });

结果是 <

​https://i.sstatic.net/yfau2.png“ rel =“ nofollow noreferrer”>在此处输入图像描述

如果我关闭渲染seg stem seg


const tabNode = new TabNote({
                ...data,
                positions: [{ str: 2, fret: 'x' }],
            }, false);

derender render效果结果为false: 在这里输入图像描述

那么我该如何纠正?

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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文