画圆
同一颜色的圆
例子样式:
圆的样式
废话不多说 直接上代码,注释清楚!
1.调用该方法 如果只要一个圆
赋值completeColor, completeWidth, completePercent就可以,剩下的不用赋值 就是一个圆
2.如果需要俩圆的话直接调用赋值就行
3.如果只需要一个虚线圆的话
赋值isDividerRound = true; ,lineColor, width, 剩下的不用写,completeWidth 不得大于0
这是一个全圆 就是比例是百分之百的 圆,可以自行修改
/*
* 如果只有一个圆的情况下,请设置已完成的圆 默认的圆的颜色不要设置
*/
class MyPainter extends CustomPainter {
//默认的线的背景颜色
Color lineColor;
//默认的线的宽度
double width;
//已完成线的颜色
Color completeColor;
//已完成的百分比
double completePercent;
//已完成的线的宽度
double completeWidth;
// 从哪开始 1从下开始, 2 从上开始 3 从左开始 4 从右开始 默认从下开始
double startType;
//是不是虚线的圈
bool isDividerRound;
//中间的实圆 统计线条是不是渐变的圆
bool isGradient;
//结束的位置
double endAngle;
//默认的线的背景颜色
List<Color> lineColors;
//实心圆阴影颜色
// Color shadowColor;
//渐变圆 深色在下面 还是在左面 默认在下面
bool isTransfrom;
MyPainter({
this.lineColor,
this.completeColor,
this.completePercent,
this.width,
this.completeWidth,
this.startType = 1,
this.isDividerRound = false,
this.isGradient = false,
this.endAngle = pi * 2,
this.lineColors,
this.isTransfrom = false,
// this.shadowColor,
});
@override
void paint(Canvas canvas, Size size) {
Offset center = Offset(size.width / 2, size.height / 2); // 坐标中心
double radius = min(size.width / 2, size.height / 2); // 半径
//是否有第二层圆
if (lineColor != null) {
//是不是 虚线圆
if (isDividerRound) {
//背景的线
Paint line = Paint()
..color = lineColor
// ..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..isAntiAlias = true
..strokeWidth = width;
double i = 0.00;
while (i < pi * 2) {
canvas.drawArc(Rect.fromCircle(center: center, radius: radius), i,
0.04, false, line);
i = i + 0.08;
}
} else {
//背景的线 实线
Paint line = Paint()
..color = lineColor
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..strokeWidth = width;
canvas.drawCircle(
// 画圆方法
center,
radius,
line);
}
}
//画上面的圆
if (completeWidth > 0) {
double arcAngle = 2 * pi * (completePercent / 100);
// 从哪开始 1从下开始, 2 从上开始 3 从左开始 4 从右开始 默认从下开始
double start = pi / 2;
if (startType == 2) {
start = -pi / 2;
} else if (startType == 3) {
start = pi;
} else if (startType == 4) {
start = pi * 2;
}
//创建画笔
Paint paint = Paint()
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..strokeWidth = completeWidth;
///是渐变圆
if (isGradient == true) {
//渐变圆 深色位置偏移量 默认深色在下面
double transfrom;
if (isTransfrom == false) {
//深色在下面
transfrom = -pi / 2;
} else {
//深色在左面
transfrom = pi * 2;
}
paint.shader = SweepGradient(
startAngle: 0.0,
endAngle: pi * 2,
colors: lineColors,
tileMode: TileMode.clamp,
transform: GradientRotation(transfrom),
).createShader(
Rect.fromCircle(center: center, radius: radius),
);
canvas.drawArc(Rect.fromCircle(center: center, radius: radius), start,
arcAngle, false, paint);
} else {
///是实体圆
paint.color = completeColor;
canvas.drawArc(
Rect.fromCircle(center: center, radius: radius),
start, // -pi / 2,从正上方开始 pi / 2,从下方开始
arcAngle,
false,
paint,
);
}
}
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
渐变色的圆
WeChatbf2f165b43db2cd7284612ad847bdd23.png
代码 看看就会了
///渐变圆
class MyGradientPainter extends CustomPainter {
//默认的线的背景颜色
List<Color> lineColor;
//默认的线的宽度
double width;
double endAngle;
MyGradientPainter({
this.lineColor,
this.width,
this.endAngle = pi * 2,
});
@override
void paint(Canvas canvas, Size size) {
Offset center = Offset(size.width / 2, size.height / 2); // 坐标中心
double radius = min(size.width / 2, size.height / 2); // 半径
var paint = Paint()
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..isAntiAlias = true
..strokeWidth = width;
paint.shader = SweepGradient(
startAngle: 0.0,
endAngle: pi * 2,
colors: lineColor,
transform: GradientRotation(pi * 1.2),
).createShader(
Rect.fromCircle(center: center, radius: radius),
);
canvas.drawArc(Rect.fromCircle(center: center, radius: radius), 0, 2 * pi,
false, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
希望能对大家有所帮助, 如果真的帮助到您,希望给我来个赞 👍 ~ 哈哈!
我明天看看把虚线圆弄出来. 其实道理都是一样的!
如果有问题的朋友,可以直接私聊我! ok,就这样,下班鸟~~~
回见👋👋👋
已有更新,可查看最新代码!
1.修改渐变圆深色位置.
2.修改虚线圆循环问题.
3.添加如果进度圆是渐变色的.
