CircleProgress 与自定义 StrokeCap 图像颤振答案

【问题标题】：CircleProgress with custom StrokeCap Image FlutterCircleProgress 与自定义 StrokeCap 图像颤振
【发布时间】：2020-02-01 17:20:41
【问题描述】：

我正在使用 CustomPainter 构建一个 CircleProgressBar。

有没有办法在 StrokeCap 中放置图像或图标？

这是我想要实现的目标：

这是我目前得到的：

这是我的代码：

import 'package:flutter/material.dart';
import 'dart:math';

class CircleProgress extends CustomPainter{
  double currentProgress;
  CircleProgress(this.currentProgress);
  @override
  void paint(Canvas canvas, Size size) {
    Paint outerCircle = Paint()
        ..strokeWidth = 20
        ..color = Color.fromRGBO(10, 10, 10, 0.1)
        ..style = PaintingStyle.stroke;

    Paint completeArc = Paint()
      ..strokeWidth = 20
      ..color = Colors.redAccent
      ..style = PaintingStyle.stroke
      ..strokeCap  = StrokeCap.round;
    Offset center = Offset(size.width/2, size.height/2);
    double radius = min(size.width/2,size.height/2) - 10;
    canvas.drawCircle(center, radius, outerCircle); // this draws main outer circle
    double angle = 2 * pi * (currentProgress/100);
    canvas.drawArc(Rect.fromCircle(center: center,radius: radius), -pi/2, angle, false, completeArc);
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

【问题讨论】：

是的，使用Canvas.drawImage方法
你能解释一下我将如何在我的代码中做到这一点@pskink

标签： android ios mobile flutter dart

【解决方案1】：

经过多次尝试，我成功了。只需在 canvas.drawArc 之后添加以下代码

final offset = Offset(
  center.dx + radius * cos(-pi / 2 + angle),
  center.dy + radius * sin(-pi / 2 + angle),
);
canvas.drawCircle(
  offset,
  5,
  Paint()
    ..strokeWidth = 5
    ..color = Colors.white
    ..style = PaintingStyle.fill,
);

【讨论】：