画图

画笔

p = Paint()
  ..color = Colors.orange // 画笔的颜色
  ..strokeWidth = 2.0 // 线的宽度
  ..style = PaintingStyle.stroke // fill: 填充， stroke: 空心
  ..strokeCap = StrokeCap.butt // 转折处的处理
  ..blendMode = BlendMode.dstIn; // 重叠处的处理模式，clear,src, dst, srcIn,dstIn等等。

Demo

样式示例图

image.png

class MyCirclePainterPaintModel {
  Color color; //画笔色
  double progress; //进度 1为全部

  MyCirclePainterPaintModel ({
    this.color,
    this.progress,
  });
}

class MyCirclePainter extends CustomPainter {
  double radius; //半径
  double strokeWidth; //画笔宽度
  Color bgColor; //底部背景色
  List <MyCirclePainterPaintModel> paints;
  MyCirclePainter ({
    this.radius = 50.0,
    this.strokeWidth = 12.0,
    this.bgColor =  Colors.grey,
    this.paints,
});

  @override
  void paint(Canvas canvas, Size size) {
    Offset offset = Offset(size.width*0.5, size.height * 0.5);
    var paint = Paint()
      ..color = Colors.grey
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth;
    canvas.drawCircle(offset, radius, paint);
    if (paints != null && paints.length > 0) {
      double initSweepAngle = -90 * pi / 180; //初始开始角度
      for (var mPaint in paints) {
        var paint = Paint();
        paint
          ..color = mPaint.color
          ..strokeWidth = strokeWidth
          ..style = PaintingStyle.stroke
          ..strokeCap = StrokeCap.round;
        Rect rect = Rect.fromCenter(center: offset, width: radius * 2, height: radius * 2);
        double sweepAngle = mPaint.progress * 360; //完成角度
        double radian = sweepAngle * pi / 180;
        canvas.drawArc(rect, initSweepAngle, radian, false, paint);
        initSweepAngle += radian;
      }
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }

}