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的過程，并分享給大家。

好了，小弟班門弄斧，希望能一起學習進步?。。?/em>

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容