flutter 绘制渐变圆环

143 阅读1分钟
canvas.save();
canvas.translate(width / 2, height / 2);
canvas.rotate( -pi / 2);
canvas.drawArc(Rect.fromCenter(center: const Offset(0, 0), width: width, height: height),   pi / 2, pi * 2 , false, whiteCirclePaint);

var path = Path();
path.addArc(Rect.fromCenter(center: const Offset(0, 0), width: width, height: height), -0.1 , - pi * 2 * percent);
drawShadows(canvas,path,[
  BoxShadow(
      color: const Color(0x80258DFF),
      offset: Offset(0, 4.h),
      blurRadius: 16.h,
      blurStyle: BlurStyle.outer
  )
]);
drawPaint.style = PaintingStyle.stroke;
drawPaint.strokeWidth = 20.w;
drawPaint.strokeCap = StrokeCap.round;
//设置渐变
drawPaint.shader = ui.Gradient.sweep(
    const Offset(0,0),
    [
      const Color(0xFF238DFF),
      const Color(0xFFD1FFFB),
    ],
    null,
    TileMode.decal,
    0,
    2 * pi
);
canvas.drawPath(path, drawPaint);
canvas.restore();
//根据path 绘制阴影
void drawShadows(Canvas canvas, Path path, List<BoxShadow> shadows) {
  for (final BoxShadow shadow in shadows) {
    final Paint shadowPainter = shadow.toPaint();
    //这个需要设置 因为只是想让path 路径周围有阴影
    shadowPainter.style = PaintingStyle.stroke;
    shadowPainter.strokeWidth = 10.w;
    if (shadow.spreadRadius == 0) {
      canvas.drawPath(path.shift(shadow.offset), shadowPainter);
    } else {
      Rect zone = path.getBounds();
      double xScale = (zone.width + shadow.spreadRadius) / zone.width;
      double yScale = (zone.height + shadow.spreadRadius) / zone.height;
      Matrix4 m4 = Matrix4.identity();
      m4.translate(zone.width / 2, zone.height / 2);
      m4.scale(xScale, yScale);
      m4.translate(-zone.width / 2, -zone.height / 2);
      canvas.drawPath(path.shift(shadow.offset).transform(m4.storage), shadowPainter);
    }
  }
}

image.png