Flutter实现简单五线谱🎼

前言：为何会写这篇文章，主要是技术群经常有小伙伴问如何绘制五线谱，网上也基本找不到相关demo，感觉像是个很冷门的需求点；加之我对音乐和五线谱有一些不成熟的项目规划，希望能作为一个完整开源项目进行维护。因此在中秋假期第一天，花点时间简单绘制一个五线谱。

效果图

五线谱

知识点

1. 音符其实是一种字体：akvo，绘制五线谱，其实就是显示这种字体即可；
2. 涉及到Flutter canvas绘制和字体绘制；
3. 音乐相关知识🎵【这点是这篇文章缺失的】

实现步骤

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

写在最后

正如我一直强调的，这次编写五线谱，纯粹是一次简单的技术预研，代码的可用性不强，原因只有一个：对音乐、音符领域还没有任何研究。
我需要对这块有一定了解，得知道五线谱怎么画才是合格的，才能造出优秀的轮子。因此，我非常希望：

1. 在音乐领域有相关了解的，可以让我取取经😋；
2. 同时这个领域我认为是有商业/技术价值可挖掘的，我将深入开源，渴求有志之士一同加入；

说说近况吧。😄特效的编写应该会断更一段时间，之前的几个特效UI会在国庆期间优化好，作为pub发布。然后最近一直在复盘Android，接下来我会以一个Flutter开发者的角度，记录从0到0.5学习Android的过程，并分享给大家。

好了，小弟班门弄斧，希望能一起学习进步！！！