Flutter CustomPainter实现半圆形饼图

CustomPaint
CustomPaint 是一个继承自 SingleChildRenderObjectWidget 的控件,因此我们不能用 setState 的方式来刷新它,但是我们可以通过传值不断刷新build方法取重新绘制它.它需要传入painter结合size属性进行绘制.

    return CustomPaint(size: Size(double.infinity, w(130)),painter: CurvePainter(),);

CurvePainter继承了CustomPainter,CustomPainter需要实现两个方法:

class CurvePainter extends CustomPainter {@overridepaint(Canvas canvas, Size size)  {}@overridebool shouldRepaint(CustomPainter oldDelegate) {return true;}
}

paint() 中进行绘制，可以在这获得画布 Canvas 和画布的大小 Size。
shouldRepaint() 返回 true 才会进行重绘，否则就只会绘制一次。你可以通过一些条件判断来决定是否每次绘制，这样能够节约系统资源。

然后我们开始构思如何如何实现其效果,先抛开动画效果:

先绘制一个半圆(考虑半圆不是闭合的,半圆的边线宽度是画笔的strokeWidth)
在绘制半圆内的线条半圆

发现结束了,这么简单吗?需要考虑的重点其实是:半圆是百分比组合成的,每一块儿都只是一个圆弧.看一下画圆弧的方法:

drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)

rect 参数是一个矩形,先跳过,待会说.
startAngle 参数是起始角度.
sweepAngle 参数是扫过的角度.
useCenter 参数是圆弧是否闭合.
paint 是画笔.

注意:角度是通过π来计算的,2π = 360度.起始角度是从三点钟方向顺时针开始.但是我们需要从九点钟方向顺时针开始,也就是我们需要逆时针180度 = -π = -pi(flutter用pi表示π)

那么我们可以这样计算:第一段p1是-pi到百分比弧度,第二段p2开始弧度是p1的结束弧度,扫过的角度就是百分比弧度,依次类推.

Rect rect = Rect.fromCircle(center: Offset(size.width / 2, size.height), radius: radius);// 绘制p1double runningDegree = pi * runningRate;canvas.drawArc(rect, -pi, runningDegree, false, curvePaint);// 绘制p2curvePaint.color = waitingColor;double waitingDegree = pi * waitingRate;canvas.drawArc(rect, -pi * (1 - runningRate), waitingDegree, false, curvePaint);// 绘制p3curvePaint.color = maintainingColor;double maintainingDegree = pi * maintainingRate;canvas.drawArc(rect, -pi * (1 - runningRate - waitingRate),maintainingDegree, false, curvePaint);// 绘制p4curvePaint.color = breakDownColor;double breakDownDegree = pi * breakDownRate;canvas.drawArc(rect,-pi * (1 - runningRate - waitingRate - maintainingRate),breakDownDegree,false,curvePaint);

画内部圆弧要知道:它的圆心和画弧度的圆心是一样的.都是x:宽度的一半,y:高度.

    /// 画内部圆弧curvePaint.color = runningColor;curvePaint.strokeWidth = 1;Rect insideR = Rect.fromCircle(center: Offset(size.width / 2, size.height), radius: radius - 30);canvas.drawArc(insideR, -pi, pi, false, curvePaint);

接下来就是绘制中心文字:

    /// 画文字TextPainter centerTitlePainter = TextPainter(textAlign: TextAlign.center,text: TextSpan(text: centerTitle.toString(),style:TextStyle(color: centerTitleColor, fontSize: centerTitleSize)),textDirection: TextDirection.ltr);centerTitlePainter.layout(minWidth: 40);centerTitlePainter.paint(canvas,Offset((size.width - centerTitlePainter.width) / 2,size.height - centerTitlePainter.height - 10));

到这里绘制就结束了,那么如何实现动画效果呢?
**动画效果:**每一段的p1-p4的弧度*当前动画已经执行的比率就是当前动画时刻4段弧度数,直至比率等于1

 // 绘制p1runningRate = runningRate * animValue;double runningDegree = pi * runningRate;canvas.drawArc(rect, -pi, runningDegree, false, curvePaint);

animValue就是当前动画的比率.(如果对动画不了解的可以去看看Flutter官网加深印象)

资源下载移步:
https://download.csdn.net/download/qq1377399077/12980300

Flutter CustomPainter实现半圆形饼图相关推荐

flutter CustomPainter 简单绘制三角形多边形
//自定义坐标 class Coordinate { final double cx; final double cy; Coordinate({this.cx, this.cy}); } //绘制 ...
圆形百分比_还有半圆形的饼图！怎么做出来的？
今日分享主题:如何制作半圆形饼图. 我们知道,直接画出来的饼图都是一个完整的圆.但是我们有时候又能看到半圆形的饼图,比如这种: 那这个又是怎么做出来的呢?下面就来分享具体操作. 还是拿原来做饼图的文章 ...
学习笔记之数据可视化（二）—— 页面布局（下）
续上一章 2.7 地图区域(.map) 2.7.1 实现步骤: 2.8 用户统计模块 2.8.1 布局: 2.8.2 柱状图 2.9 订单模块 2.9.1 订单区域布局 2.9.2 订单区域(orde ...
图扑软件 | 虚拟电厂负荷控制系统可视化
前言随着国家"双碳"及"构建以新能源为主体的新型电力系统"等目标的提出,清洁化.数字化越来越成为电力系统面临的迫切需求,负控系统的发展对电力营销现代化建设具有 ...
数字孪生虚拟电厂负荷控制系统可视化
随着国家"双碳"及"构建以新能源为主体的新型电力系统"等目标的提出,清洁化.数字化越来越成为三维数字电网面临的迫切需求,负控系统的发展对电力营销现代化建设具有重 ...
虚拟电厂负荷控制系统三维可视化监控 | 数字孪生
随着国家"双碳"及"构建以新能源为主体的新型电力系统"等目标的提出,清洁化.数字化越来越成为电力系统面临的迫切需求,负控系统的发展对电力营销现代化建设具有重要的 ...
Flutter 饼状图、柱状图、拆线图、Flutter动态饼图、Flutter图表 flutter_echart 开发文档
在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不 ...
Flutter学习笔记 —— CustomPainter自定义画布绘制爱心
Flutter学习笔记 -- CustomPainter自定义画布绘制爱心前言效果图代码示例温馨提示结束语前言最近在学习Flutter中 Canvas相关内容,今天尝试写了一个爱心Dem ...
Flutter syncfusion_flutter_charts 饼图PieSeries使用
Flutter Widgets API Documentation | SyncfusionLearn here all about Syncfusion Flutter Widgets API Do ...
[译] Flutter 从 0 到 1, 第二部分
原文地址:Zero to One with Flutter, Part Two 原文作者:Mikkel Ravn 译文出自:掘金翻译计划本文永久链接:github.com/xitu/gold-m- ...

Flutter CustomPainter实现半圆形饼图

Flutter CustomPainter实现半圆形饼图相关推荐

最新文章

热门文章