上一节我们完成的棋盘的布署和绘制,棋子自然是接下来的重要内容了!
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({@requi