vexflow渲染带有光束的吉他选项卡,但我不想渲染茎
我的代码是:
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
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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
最后,我自己修理。问题: https://github.com/0xfoflow/vexfoflow/vexflow/vexflow/sissues/13744# Event-6449532655
Finally I fix it by myself. issue:https://github.com/0xfe/vexflow/issues/1374#event-6449532655