战场怎能缺少兵卒：棋子的绘制

上一节我们完成的棋盘的布署和绘制，棋子自然是接下来的重要内容了!

CustomPaint 可以将绘制内容分成背景和前景两款部分，上一节中，我们在 CustomPaint 中将 painter 指向了我们的 BoardPainter 对象，它正是用来指定背景 Painter 的。

本节提要

• 思考棋子与棋盘的关联
• 讨论象棋「局面」的表示方式
• 使用 Canvas 绘制各个棋子
• 规划局面的管理工具类
• 应用三方字体美化棋子

布署棋子组件

CustomPaint 还可以指定一个 CustomPainter 类型的 foregroundPainter 对象，用于在背景之上绘制前景内容。我们正是要用它来绘制棋盘上的棋子。

在 lib/board 文件夹下，我们新建一个名叫 pieces-painter.dart 的文件：

import 'package:flutter/material.dart';
import 'board-widget.dart';

class PiecesPainter extends CustomPainter {
  // 棋盘的宽度， 横盘上线格的总宽度，每一个格子的边长
  final double width, gridWidth, squareSide;
  final thePaint = Paint();

  PiecesPainter({@required this.width})
      : gridWidth = (width - BoardWidget.Padding * 2) * 8 / 9,
        squareSide = (width - BoardWidget.Padding * 2) / 9;

  @override
  void paint(Canvas canvas, Size si