|
@@ -40,13 +40,24 @@ class OnePageState extends State<OnePage> {
|
|
|
/// titlesList:外面的标题数组
|
|
|
/// minRadius:最小圆的半径
|
|
|
/// poorRadius:扩散圆的半径差
|
|
|
-Widget radarMapComponent(List titlesList, double minRadius, double poorRadius, {BuildContext context}) {
|
|
|
+Widget radarMapComponent(
|
|
|
+ List titlesList,
|
|
|
+ double minRadius,
|
|
|
+ double poorRadius, {
|
|
|
+ required BuildContext context,
|
|
|
+}) {
|
|
|
double maxRadius = minRadius + poorRadius * titlesList.length - 1;
|
|
|
|
|
|
return Container(
|
|
|
- width: maxRadius*2 + 100,
|
|
|
- height: maxRadius*2 + 100,
|
|
|
- child: CustomPaint(size: Size(maxRadius*2 + 100, maxRadius*2 + 100), painter: TolyPainter(titlesList: titlesList, minRadius: minRadius, poorRadius: poorRadius, context: context)),
|
|
|
+ width: maxRadius * 2 + 100,
|
|
|
+ height: maxRadius * 2 + 100,
|
|
|
+ child: CustomPaint(
|
|
|
+ size: Size(maxRadius * 2 + 100, maxRadius * 2 + 100),
|
|
|
+ painter: TolyPainter(
|
|
|
+ titlesList: titlesList,
|
|
|
+ minRadius: minRadius,
|
|
|
+ poorRadius: poorRadius,
|
|
|
+ context: context)),
|
|
|
);
|
|
|
}
|
|
|
|
|
@@ -56,7 +67,12 @@ class TolyPainter extends CustomPainter {
|
|
|
final double minRadius;
|
|
|
final double poorRadius;
|
|
|
|
|
|
- TolyPainter({@required this.context, this.titlesList, this.minRadius, this.poorRadius});
|
|
|
+ TolyPainter({
|
|
|
+ required this.context,
|
|
|
+ required this.titlesList,
|
|
|
+ required this.minRadius,
|
|
|
+ required this.poorRadius,
|
|
|
+ });
|
|
|
|
|
|
@override
|
|
|
void paint(Canvas canvas, Size size) {
|
|
@@ -64,7 +80,6 @@ class TolyPainter extends CustomPainter {
|
|
|
|
|
|
canvas.translate(size.width / 2, size.height / 2);
|
|
|
|
|
|
-
|
|
|
//虚线画笔
|
|
|
Paint dottedLinePaint = Paint()
|
|
|
..style = PaintingStyle.stroke
|
|
@@ -90,19 +105,21 @@ class TolyPainter extends CustomPainter {
|
|
|
Path polygonBrushesPath = Path();
|
|
|
|
|
|
//文字画笔
|
|
|
- TextPainter _textPainter = new TextPainter(textAlign: TextAlign.left, textDirection: TextDirection.ltr);
|
|
|
+ TextPainter _textPainter = new TextPainter(
|
|
|
+ textAlign: TextAlign.left, textDirection: TextDirection.ltr);
|
|
|
|
|
|
final Path path = Path();
|
|
|
final dottedLinePath = Path();
|
|
|
|
|
|
-
|
|
|
-
|
|
|
//绘制文字
|
|
|
for (int i = 0; i < titlesList.length; i++) {
|
|
|
- Size textSize = boundingTextSize(context, titlesList[i], TextStyle(color: Colors.white, fontSize: 9));
|
|
|
+ Size textSize = boundingTextSize(
|
|
|
+ context, titlesList[i], TextStyle(color: Colors.white, fontSize: 9));
|
|
|
canvas.save(); //与restore配合使用保存当前画布
|
|
|
- canvas.translate(0.0, -maxRadius -10); //平移画布画点于时钟的12点位置,+30为了调整数字与刻度的间隔
|
|
|
- _textPainter.text = TextSpan(style: TextStyle(color: Colors.white, fontSize: 9), text: titlesList[i]);
|
|
|
+ canvas.translate(0.0, -maxRadius - 10); //平移画布画点于时钟的12点位置,+30为了调整数字与刻度的间隔
|
|
|
+ _textPainter.text = TextSpan(
|
|
|
+ style: TextStyle(color: Colors.white, fontSize: 9),
|
|
|
+ text: titlesList[i]);
|
|
|
canvas.rotate(-angleToRadian(360 / titlesList.length * i)); //保持画的文字竖直显示。
|
|
|
_textPainter.layout();
|
|
|
|
|
@@ -111,41 +128,48 @@ class TolyPainter extends CustomPainter {
|
|
|
double radiu = 360 / titlesList.length * i;
|
|
|
|
|
|
if (radiu == 0 || radiu == 1) {
|
|
|
- _textPainter.paint(canvas, Offset(-_textPainter.width / 2 , -_textPainter.height / 2 - 5));
|
|
|
- }
|
|
|
- else if(0 < radiu && radiu < 180){
|
|
|
+ _textPainter.paint(canvas,
|
|
|
+ Offset(-_textPainter.width / 2, -_textPainter.height / 2 - 5));
|
|
|
+ } else if (0 < radiu && radiu < 180) {
|
|
|
_textPainter.paint(canvas, Offset(0, -5));
|
|
|
- }
|
|
|
- else if(180 < radiu && radiu < 360){
|
|
|
+ } else if (180 < radiu && radiu < 360) {
|
|
|
_textPainter.paint(canvas, Offset(-_textPainter.width, -5));
|
|
|
+ } else {
|
|
|
+ _textPainter.paint(canvas,
|
|
|
+ Offset(-_textPainter.width / 2, -_textPainter.height / 2 + 5));
|
|
|
}
|
|
|
- else{
|
|
|
- _textPainter.paint(canvas, Offset(-_textPainter.width / 2, -_textPainter.height / 2 + 5));
|
|
|
- }
|
|
|
-
|
|
|
|
|
|
canvas.restore(); //画布重置,恢复到控件中心
|
|
|
- canvas.rotate(angleToRadian(360 / titlesList.length)); //画布旋转一个区间刻度,把文字和刻度对应起来
|
|
|
+ canvas.rotate(
|
|
|
+ angleToRadian(360 / titlesList.length)); //画布旋转一个区间刻度,把文字和刻度对应起来
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
List<Offset> pointsList = [];
|
|
|
|
|
|
for (int i = 0; i < titlesList.length; i++) {
|
|
|
path.moveTo(0, 0);
|
|
|
dottedLinePath.moveTo(0, 0);
|
|
|
if (i < titlesList.length - 1) {
|
|
|
- dottedLinePath.addOval(Rect.fromCircle(center: Offset.zero, radius: 30.0 + 18 * i));
|
|
|
+ dottedLinePath.addOval(
|
|
|
+ Rect.fromCircle(center: Offset.zero, radius: 30.0 + 18 * i));
|
|
|
}
|
|
|
|
|
|
double maxRadius = minRadius + poorRadius * titlesList.length;
|
|
|
- double x = (30 + 18 * (titlesList.length - 1)) * cos(angleToRadian(360 / titlesList.length * (i + 1) - 90));
|
|
|
- double y = (30 + 18 * (titlesList.length - 1)) * sin(angleToRadian(360 / titlesList.length * (i + 1) - 90));
|
|
|
+ double x = (30 + 18 * (titlesList.length - 1)) *
|
|
|
+ cos(angleToRadian(360 / titlesList.length * (i + 1) - 90));
|
|
|
+ double y = (30 + 18 * (titlesList.length - 1)) *
|
|
|
+ sin(angleToRadian(360 / titlesList.length * (i + 1) - 90));
|
|
|
|
|
|
path.lineTo(x, y);
|
|
|
- pointsList.add(Offset(cos(angleToRadian(360 / titlesList.length * (i + 1) - 90)) * maxRadius * (i + 1 > titlesList.length - 1 ? titlesList.length - 2 : i + 1) / titlesList.length, sin(angleToRadian(360 / titlesList.length * (i + 1) - 90)) * maxRadius * (i + 1 > titlesList.length - 1 ? titlesList.length - 1 : i + 1) / titlesList.length));
|
|
|
+ pointsList.add(Offset(
|
|
|
+ cos(angleToRadian(360 / titlesList.length * (i + 1) - 90)) *
|
|
|
+ maxRadius *
|
|
|
+ (i + 1 > titlesList.length - 1 ? titlesList.length - 2 : i + 1) /
|
|
|
+ titlesList.length,
|
|
|
+ sin(angleToRadian(360 / titlesList.length * (i + 1) - 90)) *
|
|
|
+ maxRadius *
|
|
|
+ (i + 1 > titlesList.length - 1 ? titlesList.length - 1 : i + 1) /
|
|
|
+ titlesList.length));
|
|
|
}
|
|
|
|
|
|
polygonBrushesPath.addPolygon(pointsList, true);
|
|
@@ -165,12 +189,22 @@ class TolyPainter extends CustomPainter {
|
|
|
..addText((i * 2).toString());
|
|
|
ParagraphConstraints pc = ParagraphConstraints(width: 50);
|
|
|
Paragraph paragraph = pb.build()..layout(pc);
|
|
|
- canvas.drawParagraph(paragraph, Offset((minRadius + poorRadius * i) * (11 + 13 * i) / (minRadius+ poorRadius * i), (minRadius + poorRadius * i) * (11 + 13 * i) / (minRadius + poorRadius * i)));
|
|
|
+ canvas.drawParagraph(
|
|
|
+ paragraph,
|
|
|
+ Offset(
|
|
|
+ (minRadius + poorRadius * i) *
|
|
|
+ (11 + 13 * i) /
|
|
|
+ (minRadius + poorRadius * i),
|
|
|
+ (minRadius + poorRadius * i) *
|
|
|
+ (11 + 13 * i) /
|
|
|
+ (minRadius + poorRadius * i)));
|
|
|
}
|
|
|
|
|
|
- DashPainter(span: 4, step: 9, pointWidth: 10).paint(canvas, dottedLinePath, dottedLinePaint);
|
|
|
+ DashPainter(span: 4, step: 9, pointWidth: 10)
|
|
|
+ .paint(canvas, dottedLinePath, dottedLinePaint);
|
|
|
canvas.drawPath(path, paint);
|
|
|
- canvas.drawCircle(Offset.zero, minRadius + 18 * (titlesList.length - 1), paint);
|
|
|
+ canvas.drawCircle(
|
|
|
+ Offset.zero, minRadius + 18 * (titlesList.length - 1), paint);
|
|
|
|
|
|
ParagraphBuilder pb = ParagraphBuilder(ParagraphStyle(
|
|
|
textAlign: TextAlign.left,
|
|
@@ -182,14 +216,29 @@ class TolyPainter extends CustomPainter {
|
|
|
..addText((titlesList.length * 2).toString());
|
|
|
ParagraphConstraints pc = ParagraphConstraints(width: 50);
|
|
|
Paragraph paragraph = pb.build()..layout(pc);
|
|
|
- canvas.drawParagraph(paragraph, Offset((minRadius + poorRadius * titlesList.length) * (11 + 13 * titlesList.length) / (minRadius + poorRadius * titlesList.length), (minRadius + poorRadius * titlesList.length) * (11 + 13 * titlesList.length) / (minRadius + poorRadius * titlesList.length)));
|
|
|
+ canvas.drawParagraph(
|
|
|
+ paragraph,
|
|
|
+ Offset(
|
|
|
+ (minRadius + poorRadius * titlesList.length) *
|
|
|
+ (11 + 13 * titlesList.length) /
|
|
|
+ (minRadius + poorRadius * titlesList.length),
|
|
|
+ (minRadius + poorRadius * titlesList.length) *
|
|
|
+ (11 + 13 * titlesList.length) /
|
|
|
+ (minRadius + poorRadius * titlesList.length)));
|
|
|
}
|
|
|
|
|
|
- static Size boundingTextSize(BuildContext context, String text, TextStyle style, {int maxLines = 2 ^ 31, double maxWidth = double.infinity}) {
|
|
|
+ static Size boundingTextSize(
|
|
|
+ BuildContext context, String text, TextStyle style,
|
|
|
+ {int maxLines = 2 ^ 31, double maxWidth = double.infinity}) {
|
|
|
if (text == null || text.isEmpty) {
|
|
|
return Size.zero;
|
|
|
}
|
|
|
- final TextPainter textPainter = TextPainter(textDirection: TextDirection.ltr, locale: Localizations.maybeLocaleOf(context), text: TextSpan(text: text, style: style), maxLines: maxLines)..layout(maxWidth: maxWidth);
|
|
|
+ final TextPainter textPainter = TextPainter(
|
|
|
+ textDirection: TextDirection.ltr,
|
|
|
+ locale: Localizations.maybeLocaleOf(context),
|
|
|
+ text: TextSpan(text: text, style: style),
|
|
|
+ maxLines: maxLines)
|
|
|
+ ..layout(maxWidth: maxWidth);
|
|
|
return textPainter.size;
|
|
|
}
|
|
|
|
|
@@ -207,7 +256,7 @@ class DashPainter {
|
|
|
this.step = 2,
|
|
|
this.span = 2,
|
|
|
this.pointCount = 0,
|
|
|
- this.pointWidth,
|
|
|
+ required this.pointWidth,
|
|
|
});
|
|
|
|
|
|
final double step; //实现的长度
|
|
@@ -216,9 +265,11 @@ class DashPainter {
|
|
|
final double pointWidth; //点划线长
|
|
|
|
|
|
void paint(Canvas canvas, Path path, Paint paint) {
|
|
|
- final PathMetrics pms = path.computeMetrics(); //为此路径创建一个PathMetrics对象,该对象可以描述有关路径轮廓的各种属性。
|
|
|
+ final PathMetrics pms =
|
|
|
+ path.computeMetrics(); //为此路径创建一个PathMetrics对象,该对象可以描述有关路径轮廓的各种属性。
|
|
|
final double pointLineLength = pointWidth;
|
|
|
- final double partLength = step + span * (pointCount + 1) + pointCount * pointLineLength;
|
|
|
+ final double partLength =
|
|
|
+ step + span * (pointCount + 1) + pointCount * pointLineLength;
|
|
|
|
|
|
pms.forEach((PathMetric pm) {
|
|
|
final int count = pm.length ~/ partLength;
|
|
@@ -228,7 +279,8 @@ class DashPainter {
|
|
|
paint,
|
|
|
);
|
|
|
for (int j = 1; j <= pointCount; j++) {
|
|
|
- final start = partLength * i + step + span * j + pointLineLength * (j - 1);
|
|
|
+ final start =
|
|
|
+ partLength * i + step + span * j + pointLineLength * (j - 1);
|
|
|
canvas.drawPath(
|
|
|
pm.extractPath(start, start + pointLineLength),
|
|
|
paint,
|