flutter 五维雷达图.png
思路：
一、绘制5个正五边形，按照五边形的半径等分绘制。至于五边形需要计算出5个定点的位置。绘制一个正五边形，一个顶点在y轴上，半径为r，s标识sin，c标识cos顺势正依次是（0，r）（rc18，rs18）（rc54，-rs54）（-rc54，-rs54）(-rc18,rs18)，然后注意角度需要转换成程序需要的弧度angle / 180.0 * pi，然后使用path连接即可。
///画n个五边形
for (int i = 0; i < n; i++) {
List<Offset> points = [
Offset(0, -r * (i + 1) / n),
Offset(r * (i + 1) / n * cos(angleToRadian(18)),
-r * (i + 1) / n * sin(angleToRadian(18))),
Offset(r * (i + 1) / n * cos(angleToRadian(54)),
r * (i + 1) / n * sin(angleToRadian(54))),
Offset(-r * (i + 1) / n * cos(angleToRadian(54)),
r * (i + 1) / n * sin(angleToRadian(54))),
Offset(-r * (i + 1) / n * cos(angleToRadian(18)),
r * (i + 1) / n * -sin(angleToRadian(18))),
];
drawPentagon(points, canvas, pentagonPaint);
}
///画五边形
void drawPentagon(List<Offset> points, Canvas canvas, Paint paint) {
Path path = Path();
path.moveTo(0, points[0].dy);
for (int i = 1; i < points.length; i++) {
path.lineTo(points[i].dx, points[i].dy);
}
path.close();
canvas.drawPath(path, paint);
}
二、连接原点和五个定点
void drawZeroToPoint(List<Offset> points, Canvas canvas) {
points.forEach((element) {
canvas.drawLine(
Offset.zero,
element,
zeroToPointPaint,
);
});
}
三、在绘制我们需要显示的雷达图，也是五边形，所以，只需要算出五个顶点就可以套用上面的绘制五边图绘制。
List<Offset> list = converPoint(points, score);
drawPentagon(list, canvas, contentPaint);
List<Offset> converPoint(List<Offset> points, List<RadarBean> score) {
List<Offset> list = [];
for (int i = 0; i < points.length; i++) {
list.add(points[i].scale(score[i].score / 100, score[i].score / 100));
}
return list;
}
四、因为5个顶点位置的文字都需要不同的调整，所以分别设置位置
///根据位置绘制文字
for (int i = 0; i < points.length; i++) {
int type = 0;
switch (i) {
case 0:
type = 1;
points[i] -= Offset(0, padding * 2);
break;
case 1:
type = 0;
points[i] += Offset(padding, -padding);
break;
case 2:
type = 1;
points[i] += Offset(bottomPadding, padding);
break;
case 3:
type = 1;
points[i] += Offset(-bottomPadding, padding);
break;
case 4:
type = 2;
points[i] -= Offset(padding, padding);
break;
default:
}
drawText(canvas, points[i], score[i].name,
TextStyle(fontSize: 14, color: Colors.black54), type);
}
/// 右边的文字不需要移动 有的文字要移动一半居中 左边的文字需要左移动整个距离
///type 0 1 2
void drawText(Canvas canvas, Offset offset, String text, TextStyle style,
int type) {
var textPainter = TextPainter(
text: TextSpan(text: text, style: style),
textAlign: TextAlign.center,
textDirection: TextDirection.rtl);
textPainter.layout();
Size size = textPainter.size;
Offset offsetResult;
switch (type) {
case 1:
offsetResult = Offset(offset.dx - size.width / 2, offset.dy);
break;
case 2:
offsetResult = Offset(offset.dx - size.width, offset.dy);
break;
default:
offsetResult = offset;
}
textPainter.paint(canvas, offsetResult);
}
实际上思路很简单，就是需要算顶点位置，然后文字位置处理并不优雅。
五、新增动画效果
思路：通过修改 ValueNotifier<List<Offset>> values 的值，可以触发重绘。使用AnimationController来控制values的值的变化，使用CurvedAnimation来增加一个加速插值器。
//创建一个1s的动画
ctrl = AnimationController(vsync: this, duration: Duration(seconds: 1))
..addListener(() {
//监听动画的进度，并修改对应的值，重绘
values.value = converPoint(widget.points, widget.scoreList, animation.value);
});
//关联控制器，设置加速器
animation = CurvedAnimation(parent: ctrl,curve: Curves.bounceOut);
添加动画需要注意的几个点：
- 动画需要用到SingleTickerProviderStateMixin 这个类
class RadarMapState extends State<RadarMap> with SingleTickerProviderStateMixin {
- ValueNotifier<List<Offset>>的值的修改，不能放到自定义的CustomPainter中，会无限重绘报错。还是在RadarMapState 中修改对应的值实现动画。
ctrl = AnimationController(vsync: this, duration: Duration(seconds: 1))
..addListener(() {
values.value = converPoint(widget.points, widget.scoreList, animation.value);
});
- 从什么时候开始动画呢？太早还未绘制完成，会报错。可以监听绘制完成，然后再去开始动画。
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
print("界面绘制完成");
ctrl.forward(from: 0);
});
附上整体代码
import 'dart:math';
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
///五维雷达图
/// 设置雷达图的半径，根据分5等分来计算
/// 绘制一个正五边形，一个顶点在y轴上，半径为r，顺势正依次是（0，r）（r*c18，r*s18）
/// （r*c54，-r*s54）（-r*c54，-r*s54）(-r*c18,r*s18)
///
class RadarBean {
double score;
String name;
RadarBean(this.score, this.name);
}
/// 右边的文字不需要移动 有的文字要移动一半居中 左边的文字需要左移动整个距离
///type 0 1 2
///
enum MoveType { noMove, halfMove, allMove }
class RadarMap extends StatefulWidget {
///半径
double r;
// static final double defaultR = setWidth(80.0);
///正五边形个数 目前只支持五边形
int n = 5;
///文字和图像的间距
double padding;
static const double defaultPadding = 10;
///最下面两个的间距
double bottomPadding = 8;
static const double defaultBottomPadding = 8;
static const double strokeWidth_0_5 = 0.5;
static const double strokeWidth_1 = 1;
static const double strokeWidth_2 = 2;
Paint zeroToPointPaint;
Paint pentagonPaint;
Paint contentPaint;
///当前的分数 ///对应的文案
List<RadarBean> scoreList;
List<Offset> points;
RadarMap(this.scoreList,
{this.r,
this.padding = defaultPadding,
this.bottomPadding = defaultBottomPadding,
this.zeroToPointPaint,
this.pentagonPaint,
this.contentPaint}) {
assert(scoreList.length == 5);
r = 80.0;
///原点到5个定点的连线
zeroToPointPaint = Paint()
..style = PaintingStyle.stroke
..color = Colors.black12
..strokeWidth = strokeWidth_0_5;
///5层五边形画笔
pentagonPaint = Paint()
..color = Colors.black12
..strokeWidth = strokeWidth_1
..style = PaintingStyle.fill;
///覆盖内容颜色
contentPaint = Paint()
..color = Colors.lightBlue[300].withAlpha(100)
..strokeWidth = strokeWidth_2
..style = PaintingStyle.fill;
points = [
Offset(0, -r),
Offset(r * cos(angleToRadian(18)), -r * sin(angleToRadian(18))),
Offset(r * cos(angleToRadian(54)), r * sin(angleToRadian(54))),
Offset(-r * cos(angleToRadian(54)), r * sin(angleToRadian(54))),
Offset(-r * cos(angleToRadian(18)), r * -sin(angleToRadian(18))),
];
}
@override
State<StatefulWidget> createState() {
return RadarMapState();
}
}
class RadarMapState extends State<RadarMap>
with SingleTickerProviderStateMixin {
ValueNotifier<List<Offset>> values = ValueNotifier([]);
AnimationController ctrl;
Animation animation;
@override
void initState() {
// TODO: implement initState
super.initState();
ctrl = AnimationController(vsync: this, duration: Duration(seconds: 1))
..addListener(() {
values.value = converPoint(widget.points, widget.scoreList, animation.value);
});
animation = CurvedAnimation(parent: ctrl,curve: Curves.bounceOut);
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
print("界面绘制完成");
ctrl.forward(from: 0);
});
}
List<Offset> converPoint(
List<Offset> points, List<RadarBean> score, double scale) {
List<Offset> list = [];
for (int i = 0; i < points.length; i++) {
list.add(points[i]
.scale(score[i].score * scale / 100, score[i].score * scale / 100));
}
return list;
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: CustomPaint(
painter: RadarmapPainter(widget.scoreList, ctrl, values,
r: widget.r,
n: widget.n,
padding: widget.padding,
bottomPadding: widget.bottomPadding,
zeroToPointPaint: widget.zeroToPointPaint,
pentagonPaint: widget.pentagonPaint,
contentPaint: widget.contentPaint),
),
);
}
}
class RadarmapPainter extends CustomPainter {
double r;
int n;
double padding;
double bottomPadding;
Paint zeroToPointPaint;
Paint pentagonPaint;
Paint contentPaint;
List<RadarBean> score;
AnimationController ctrl;
ValueNotifier<List<Offset>> values;
RadarmapPainter(this.score, this.ctrl, this.values,
{this.r,
this.n,
this.padding,
this.bottomPadding,
this.zeroToPointPaint,
this.pentagonPaint,
this.contentPaint})
: super(repaint: values);
@override
void paint(Canvas canvas, Size size) {
final List<Offset> points = [
Offset(0, -r),
Offset(r * cos(angleToRadian(18)), -r * sin(angleToRadian(18))),
Offset(r * cos(angleToRadian(54)), r * sin(angleToRadian(54))),
Offset(-r * cos(angleToRadian(54)), r * sin(angleToRadian(54))),
Offset(-r * cos(angleToRadian(18)), r * -sin(angleToRadian(18))),
];
canvas.save();
canvas.translate(size.width / 2, size.height / 2);
canvas.drawPoints(
PointMode.points,
[Offset(0, 0)],
Paint()
..color = Colors.green
..strokeWidth = 2);
///画n个五边形
for (int i = 0; i < n; i++) {
List<Offset> points = [
Offset(0, -r * (i + 1) / n),
Offset(r * (i + 1) / n * cos(angleToRadian(18)),
-r * (i + 1) / n * sin(angleToRadian(18))),
Offset(r * (i + 1) / n * cos(angleToRadian(54)),
r * (i + 1) / n * sin(angleToRadian(54))),
Offset(-r * (i + 1) / n * cos(angleToRadian(54)),
r * (i + 1) / n * sin(angleToRadian(54))),
Offset(-r * (i + 1) / n * cos(angleToRadian(18)),
r * (i + 1) / n * -sin(angleToRadian(18))),
];
drawPentagon(points, canvas, pentagonPaint);
}
///连接最外层的五个定点
drawZeroToPoint(points, canvas);
///修改成对应的分数，绘制覆盖内容
drawPentagon(values.value, canvas, contentPaint);
///根据位置绘制文字
drawTextByPosition(points, canvas);
canvas.restore();
}
///根据位置来绘制文字
void drawTextByPosition(List<Offset> points, Canvas canvas) {
for (int i = 0; i < points.length; i++) {
MoveType type = MoveType.noMove;
switch (i) {
case 0:
type = MoveType.halfMove;
points[i] -= Offset(0, padding * 2);
break;
case 1:
type = MoveType.noMove;
points[i] += Offset(padding, -padding);
break;
case 2:
type = MoveType.halfMove;
points[i] += Offset(bottomPadding, padding);
break;
case 3:
type = MoveType.halfMove;
points[i] += Offset(-bottomPadding, padding);
break;
case 4:
type = MoveType.allMove;
points[i] -= Offset(padding, padding);
break;
default:
}
drawText(canvas, points[i], score[i].name,
TextStyle(fontSize: 14, color: Colors.black54), type);
}
}
/// 右边的文字不需要移动 有的文字要移动一半居中 左边的文字需要左移动整个距离
void drawText(Canvas canvas, Offset offset, String text, TextStyle style,
MoveType type) {
var textPainter = TextPainter(
text: TextSpan(text: text, style: style),
textAlign: TextAlign.center,
textDirection: TextDirection.rtl);
textPainter.layout();
Size size = textPainter.size;
Offset offsetResult;
switch (type) {
case MoveType.halfMove:
offsetResult = Offset(offset.dx - size.width / 2, offset.dy);
break;
case MoveType.allMove:
offsetResult = Offset(offset.dx - size.width, offset.dy);
break;
default:
offsetResult = offset;
}
textPainter.paint(canvas, offsetResult);
}
void drawZeroToPoint(List<Offset> points, Canvas canvas) {
points.forEach((element) {
canvas.drawLine(
Offset.zero,
element,
zeroToPointPaint,
);
});
}
///画五边形
void drawPentagon(List<Offset> points, Canvas canvas, Paint paint) {
if(points.length == 0){
return;
}
Path path = Path();
path.moveTo(0, points[0].dy);
for (int i = 1; i < points.length; i++) {
path.lineTo(points[i].dx, points[i].dy);
}
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
///转换角度 18/180.0 *pi
}
double angleToRadian(double angle) {
return angle / 180.0 * pi;
}
