図のようなチャートを作るために、円や線分を文字に重ねる必要があった。図形は描けるようになったが、文字を重ねる方法がわかったので、記録しておく。
Stack() ウィジェット を用いると 実現できる。
return MediaQuery(
data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
child: Scaffold(
appBar: AppBar(
title: Text('命式チャート'),
),
body: Container(
color: Colors.black,
child: Stack( // <-------- このウィジェットを使うと使うと重ねられる
children: [ // <-------- 子ウィジェットが複数になるのでchildren
SizedBox( // <---------下から1番目の階層
width: 386,
height: 509,
child: CustomPaint(
painter: ShapePainter1(), // 渡したい変数を引数に指定する
// size: const Size(400, 400), // この行を入れると図形と文字を重ねることができない
),
),
SizedBox( // <----------下から2番目の階層
width: 386,
height: 509,
child: CustomPaint(
painter: ShapePainter2(gogyou: j), // 渡したい変数を引数に指定する
),
),
SizedBox( // <----------下から3番目の階層
width: 386,
height: 509,
child: Column(
children: [
// ■■■■■■■■■ 1行目 ■■■■■■■■■■■■■
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
// 以下文字の記述 省略
), // SizedBox
],
), // Stack
), // Container
), // Scaffold
); // MediaQuery
}
}
class ShapePainter1 extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
var center1 = const Offset(193, 220 - 30 - 14); // 表面の中心座標
var center2 = const Offset(-70 + 193 - 33, 500 - 60 - 14 - 0); // 本質の中心座標
final penWhite = Paint()
..color = Colors.white
..strokeWidth = 2.0;
final penBlue = Paint()
..color = Colors.blue
..strokeWidth = 2.0;
double angleMoku = 72 * 0 - 90;
double angleKa = 72 * 1 - 90;
double angleDo = 72 * 2 - 90;
double angleKin = 72 * 3 - 90;
double angleSui = 72 * 4 - 90;
double radianMoku = angleMoku / 180 * pi;
double radianKa = angleKa / 180 * pi;
double radianDo = angleDo / 180 * pi;
double radianKin = angleKin / 180 * pi;
double radianSui = angleSui / 180 * pi;
final centerMoku1 =
center1 + Offset(113 * cos(radianMoku), 113 * sin(radianMoku));
final centerMoku2 =
center1 + Offset(59 * cos(radianMoku), 59 * sin(radianMoku));
final centerKa1 =
center1 + Offset(113 * cos(radianKa), 113 * sin(radianKa));
final centerKa2 = center1 + Offset(59 * cos(radianKa), 59 * sin(radianKa));
final centerDo1 =
center1 + Offset(113 * cos(radianDo), 113 * sin(radianDo));
final centerDo2 = center1 + Offset(59 * cos(radianDo), 59 * sin(radianDo));
final centerKin1 =
center1 + Offset(113 * cos(radianKin), 113 * sin(radianKin));
final centerKin2 =
center1 + Offset(59 * cos(radianKin), 59 * sin(radianKin));
final centerSui1 =
center1 + Offset(113 * cos(radianSui), 113 * sin(radianSui));
final centerSui2 =
center1 + Offset(59 * cos(radianSui), 59 * sin(radianSui));
canvas.drawCircle(center1, 32, penBlue..style = PaintingStyle.stroke);
canvas.drawCircle(centerMoku1, 27, penBlue..style = PaintingStyle.stroke);
canvas.drawCircle(centerMoku2, 27, penBlue..style = PaintingStyle.stroke);
canvas.drawCircle(centerKa1, 27, penBlue..style = PaintingStyle.stroke);
canvas.drawCircle(centerKa2, 27, penBlue..style = PaintingStyle.stroke);
canvas.drawCircle(centerDo1, 27, penBlue..style = PaintingStyle.stroke);
canvas.drawCircle(centerDo2, 27, penBlue..style = PaintingStyle.stroke);
canvas.drawCircle(centerKin1, 27, penBlue..style = PaintingStyle.stroke);
canvas.drawCircle(centerKin2, 27, penBlue..style = PaintingStyle.stroke);
canvas.drawCircle(centerSui1, 27, penBlue..style = PaintingStyle.stroke);
canvas.drawCircle(centerSui2, 27, penBlue..style = PaintingStyle.stroke);
canvas.drawCircle(center1, 140, penWhite..style = PaintingStyle.stroke);
// 本質チャートの描画
canvas.drawCircle(center2, 32, penBlue..style = PaintingStyle.stroke);
canvas.drawCircle(center2, 60, penWhite..style = PaintingStyle.stroke);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}
class ShapePainter2 extends CustomPainter {
int gogyou = 1; // 五行 0:木 1:火 2:土 3:金 4:水 // ■■■■■■受け取る値を代入する変数を定義
ShapePainter2({required this.gogyou}); // ■■■■■■■■■受け取る値を上記変数に代入
@override
void paint(Canvas canvas, Size size) {
var center1 = const Offset(193, 220 - 30 - 14 - 0); // 表面の中心座標
var center2 = const Offset(193 - 70 - 33, 500 - 60 - 14 - 0 - 0); // 本質の中心座標
const lineLength1 = 170.0;
const lineLength2 = 84.0;
final penWhite = Paint()
..color = Colors.white
..strokeWidth = 2.0;
double radian1 = ((72 * gogyou) - 90 - 36) / 180 * pi;
double radian2 = ((72 * gogyou) - 90 + 36) / 180 * pi;
final line1 = center1 +
Offset(lineLength1 * cos(radian1), lineLength1 * sin(radian1));
final line2 = center1 +
Offset(lineLength1 * cos(radian2), lineLength1 * sin(radian2));
final line21 = center2 +
Offset(lineLength2 * cos(radian1), lineLength2 * sin(radian1));
final line22 = center2 +
Offset(lineLength2 * cos(radian2), lineLength2 * sin(radian2));
// canvas.drawLine(center1, line0, penRed); // 赤い中心線
canvas.drawLine(center1, line1, penWhite);
canvas.drawLine(center1, line2, penWhite);
// 本質チャートの描画
canvas.drawLine(center2, line21, penWhite);
canvas.drawLine(center2, line22, penWhite);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}