抄了个在线吉他谱编辑器

简介: 这个项目其实是去年期末考复习的时候写的,因为实在不想复习所以无聊参照 有谱么 用 React 写的一个在线吉他谱编辑器。我还将项目里的和弦组件和歌词组件提取出来放在 npm 上。当时就觉得这个网站很不错,玩过吉他的人都知道每次搜吉他谱的时候总会出现谱子要么是 JPG,要么是 PNG,字体大小不样的问题。虽然问题不是很大,但是就是很难看,而这个网站完美解决了这个问题。

这个项目其实是去年期末考复习的时候写的,因为实在不想复习所以无聊参照 有谱么 用 React 写的一个在线吉他谱编辑器。我还将项目里的和弦组件歌词组件提取出来放在 npm 上。


Github 在这里image.png


当时就觉得这个网站很不错,玩过吉他的人都知道每次搜吉他谱的时候总会出现谱子要么是 JPG,要么是 PNG,字体大小不样的问题。虽然问题不是很大,但是就是很难看,而这个网站完美解决了这个问题。


它的渲染吉他谱的思路其实和 Markdown 以及 LaTex 有点像的。不过我写的在线编辑器可能性能比不上他的,因为每次修改都会重新渲染组件。如果要改进这个方面可能还得看看编译原理才能知道在哪些地方可以提高性能。


和弦组件




Github 在这里

这个和弦组件是用 React 渲染 SVG 来完成的。我稍微看了下“有谱么”的实现,可能他的更人性化一些,而我的可以高度定制。比如可以自定义和弦。

image.png


<Chord chordName="F"/>


歌词组件




Github 在这里

歌词组件只不过是对和弦组件的再次封装,只要将和弦组件做个定位就好了,


image.png


<Lyrics isEmbedChord={true}>
    [F] Good morning!
</Lyrics>


最后




最近想回顾一下这个项目,本来想试试能不能写一个 Webpack Loader 将文字渲染成 HTML 或者 SVG(也就是右边的样式),也算是一个锻炼吧。



相关文章
|
1月前
|
前端开发
业余时间开发了个海报编辑器
为了满足撰写博客或录制教程视频时对高质量海报的需求,我利用业余时间开发了一款海报编辑器。第一版功能简单,支持固定尺寸、黑底白字的标题。后来经过优化,增加了背景图、模糊效果、文字样式调整等功能,使海报更具吸引力。目前该编辑器已上线,欢迎大家试用并反馈。[访问海报编辑器](https://tool.share888.top/#/poster)
69 6
业余时间开发了个海报编辑器
|
4月前
|
人工智能 BI
用ChatGPT做excel表格真香!只需动嘴提要求和复制粘贴
用ChatGPT做excel表格真香!只需动嘴提要求和复制粘贴
|
6月前
|
小程序 程序员 uml
老铁,请收藏!IT人必备13个在线工具
老铁,请收藏!IT人必备13个在线工具
42 2
|
7月前
|
前端开发
前端知识笔记(二十)———简易弹窗制作
前端知识笔记(二十)———简易弹窗制作
77 0
|
存储 JSON 前端开发
魔鱼搭投编辑器 ,一款优秀的前端界面可视化工具
魔鱼搭投编辑器 ,一款优秀的前端界面可视化工具
196 1
|
存储 Java API
一个精美的主界面窗口功能的设计和实现原来如此简单,万字肝爆
一个精美的主界面窗口功能的设计和实现原来如此简单,万字肝爆
121 0
测试语雀编辑器
测试语雀编辑器
157 0
|
存储 移动开发 安全
ProcessOn2022网页版在线思维导图
ProcessOn是一个在线协作绘图平台,为用户提供强大、易用的作图工具!支持在线创作流程图、思维导图、组织结构图、网络拓扑图、BPMN、UML图、UI界面原型设计、iOS界面原型设计等。...
937 0
|
前端开发
前端工作总结277-HBuilderX常见快捷键
前端工作总结277-HBuilderX常见快捷键
134 0
|
XML JSON 前端开发
Vscode个性化设置:让一个小萌妹陪你敲代码
Vscode个性化设置:让一个小萌妹陪你敲代码
Vscode个性化设置:让一个小萌妹陪你敲代码