前言：为何会写这篇文章，主要是技术群经常有小伙伴问如何绘制五线谱，网上也基本找不到相关demo，感觉像是个很冷门的需求点；加之我对音乐和五线谱有一些不成熟的项目规划，希望能作为一个完整开源项目进行维护。因此在中秋假期第一天，花点时间简单绘制一个五线谱。
效果图
五线谱
知识点
- 音符其实是一种字体：akvo，绘制五线谱，其实就是显示这种字体即可；
- 涉及到Flutter canvas绘制和字体绘制；
- 音乐相关知识🎵【这点是这篇文章缺失的】
实现步骤
1. 基本需求
从最简单的业务出发的话，至少会有这些需求：根据时长规划线谱长度、对应时间点显示对应音符、播放到对应音符着重显示......但限于笔者对音乐一窍不通，所以五线谱的实现只有两个需求：五条线+音符🤣。笔者本次仅做到均匀的在五线谱显示音符。
2. 绘制五线谱
非常简单，根据传入的音符长度，绘制横线。见代码：
/// 绘制5条基线
class BaseLinePainter extends CustomPainter {
final double lineSpace; // 每条线的间隙
final double rowSpace; // 每段五线谱的间隙
final int noteLength; // 音符的长度
BaseLinePainter(this.lineSpace, this.rowSpace, this.noteLength);
@override
void paint(Canvas canvas, Size size) {
Paint _paint = Paint()
..color = Colors.black
..isAntiAlias = false
..style = PaintingStyle.stroke
..strokeWidth = 1.0;
double w = size.width;
int rowCount = (noteLength / 6).ceil(); // 每行6个音符，向上取整
double h = 0;
for (int c = 0; c < rowCount; c++) {
canvas.save();
h = c * (4 * lineSpace + rowSpace);
for (int i = 0; i < 5; i++) {
Path path = new Path();
path.moveTo(0, h + i * lineSpace);
path.lineTo(w, h + i * lineSpace);
canvas.drawPath(path, _paint);
}
canvas.restore();
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
绘制音符
绘制音符其实就绘制文字，字体设为akvo即可，因此我们需要提前在yaml导入字体包
flutter:
fonts:
- family: akvo
fonts:
- asset: assets/fonts/akvo.ttf
在上面绘制横线的时候，我们规定一行五线谱绘制6个音符，下面是绘制代码：
/// 音符绘制方法
class NotesPainter extends CustomPainter {
final List<StaffModel> noteList; // 音符列表
final double lineSpace; // 每条线的间隙
final double rowSpace; // 每段五线谱的间隙
NotesPainter(this.noteList, this.lineSpace, this.rowSpace);
@override
void paint(Canvas canvas, Size size) {
double cellWidth = size.width / 6; // 每个音符的宽度
double rowTotalHeight = lineSpace * 4 + rowSpace;
final textStyle = ui.TextStyle(
fontFamily: 'akvo',
fontSize: 24, // 这里其实需要根据五线谱每条线之间的空隙来计算字体的size
color: Colors.brown,
);
for (int i = 0; i < noteList.length; i++) {
canvas.save();
int rowCount = (i / 6).floor(); // 第几行
int lineCount = (i % 6); // 第几列
Offset noteOffset = Offset(lineCount * cellWidth + (cellWidth - 12) / 2,
rowCount * rowTotalHeight + (noteList[i].level - 1) * lineSpace);
final paragraphBuilder = ui.ParagraphBuilder(ui.ParagraphStyle())
..pushStyle(textStyle)
..addText(noteList[i].note);
final paragraph = paragraphBuilder.build()..layout(ui.ParagraphConstraints(width: cellWidth));
canvas.drawParagraph(paragraph, noteOffset);
canvas.restore();
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
封装widget
传入音符model即可
class Staff extends StatelessWidget {
Staff(this.size, {Key? key}) : super(key: key);
final Size size;
final List<StaffModel> _list = [
StaffModel('e', 1),
StaffModel('e', 2),
StaffModel('g', 3),
StaffModel('e', 4),
StaffModel('h', 4),
StaffModel('f', 0),
StaffModel('e', 1),
StaffModel('e', 1),
StaffModel('1', 1),
StaffModel('2', 3),
StaffModel('3', 4),
StaffModel('4', 2),
StaffModel('5', 3),
StaffModel('6', 2),
StaffModel('e', 1),
StaffModel('g', 1),
StaffModel("\$", 3),
StaffModel('e', 2),
StaffModel('g', 3),
StaffModel('e', 4),
StaffModel('h', 4),
StaffModel('f', 0),
];
@override
Widget build(BuildContext context) {
return RepaintBoundary(
child: CustomPaint(
size: size,
painter: BaseLinePainter(12, 24, _list.length),
child: RepaintBoundary(
child: CustomPaint(
size: size,
painter: NotesPainter(_list, 12, 24),
),
),
),
);
}
}
相关资源和代码
音符使用的是akvo字体包，下面是akvo的键位对照表；至于字体可以自行网上下载，实在找不到的见下：
https://pan.baidu.com/s/1HVRHWi1KgOrsrepoKmg-lA
提取码: 62dq
akvo键位对照表.jpg
完整代码
class Staff extends StatelessWidget {
Staff(this.size, {Key? key}) : super(key: key);
final Size size;
final List<StaffModel> _list = [
StaffModel('e', 1),
StaffModel('e', 2),
StaffModel('g', 3),
StaffModel('e', 4),
StaffModel('h', 4),
StaffModel('f', 0),
StaffModel('e', 1),
StaffModel('e', 1),
StaffModel('1', 1),
StaffModel('2', 3),
StaffModel('3', 4),
StaffModel('4', 2),
StaffModel('5', 3),
StaffModel('6', 2),
StaffModel('e', 1),
StaffModel('g', 1),
StaffModel("\$", 3),
StaffModel('e', 2),
StaffModel('g', 3),
StaffModel('e', 4),
StaffModel('h', 4),
StaffModel('f', 0),
];
@override
Widget build(BuildContext context) {
return RepaintBoundary(
child: CustomPaint(
size: size,
painter: BaseLinePainter(12, 24, _list.length),
child: RepaintBoundary(
child: CustomPaint(
size: size,
painter: NotesPainter(_list, 12, 24),
),
),
),
);
}
}
class StaffModel {
final String note; // 音符
final int level; // 音符显示的层级 1、2、3、4、5
StaffModel(this.note, this.level);
}
写在最后
正如我一直强调的，这次编写五线谱，纯粹是一次简单的技术预研，代码的可用性不强，原因只有一个：对音乐、音符领域还没有任何研究。
我需要对这块有一定了解，得知道五线谱怎么画才是合格的，才能造出优秀的轮子。因此，我非常希望：
- 在音乐领域有相关了解的，可以让我取取经😋；
- 同时这个领域我认为是有商业/技术价值可挖掘的，我将深入开源，渴求有志之士一同加入；
说说近况吧。😄特效的编写应该会断更一段时间，之前的几个特效UI会在国庆期间优化好，作为pub发布。然后最近一直在复盘Android，接下来我会以一个Flutter开发者的角度，记录从0到0.5学习Android的过程，并分享给大家。
好了，小弟班门弄斧，希望能一起学习进步！！！
