0

我正在使用 Flutter 的CustomPainter类来绘制看起来像披萨片的形状。它是由多个弧组成一个圆。我需要在弧之间创建排水沟。

我尝试将参数修改为canvas.drawArc(startAngle和sweepAngle) ，但这不是我想要的。

现在我的排水沟在那里，但圆弧的侧面接触到了中心，这不是我想要的外观。我想要的是基本上刮掉绘制弧的侧面，使其从我现有的解决方案（左）变为所需的解决方案（右）：

在此处输入图像描述

我想我必须剪裁现有的形状，但我不确定如何实现这一点。

这是我CustomPainter班的例子：


class PizzaCounterShape extends CustomPainter {
  PizzaCounterShape({
    required this.count,
    required this.maxCount,
    required this.gutterWidth,
    required this.startAngle,
    required this.backgroundColor,
    required this.foregroundColor,
  }) {
    partInRadians = PizzaCounter.circleRadians / maxCount;
    sweepAngle = (pi / maxCount);
  }

  final int count;
  final int maxCount;
  final double gutterWidth;
  final double startAngle;
  final Color backgroundColor;
  final Color foregroundColor;
  late double partInRadians;
  late double sweepAngle;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height),
        Paint()..color = Colors.blue);

    final arcPaint = Paint()
      ..color = backgroundColor
      ..strokeWidth = 5
      ..strokeCap = StrokeCap.round;

    final rect = Rect.fromCenter(
      center: Offset(size.width / 2, size.height / 2),
      height: size.height,
      width: size.width,
    );

    List<int>.generate(maxCount, (i) => i).forEach((i) {
      _paintArc(
          canvas: canvas, rect: rect, paint: arcPaint, index: i);
    });
  }

  void _paintArc({
    required Canvas canvas,
    required Rect rect,
    required Paint paint,
    required int index,
  }) {
    final partStartAngle = _getStartAngle(index);
    final partSweepAngle = partInRadians - gutterWidth;
    final active = (index + 1) <= count;

    paint.color = active ? foregroundColor : backgroundColor;

    canvas.drawArc(
        rect,
        partStartAngle,
        partSweepAngle,
        true,
        paint);
  }

  double _getStartAngle(int index) {
    final baseStartAngle = startAngle + (partInRadians * index);

    return baseStartAngle < PizzaCounter.circleRadians
        ? baseStartAngle
        : baseStartAngle - PizzaCounter.circleRadians;
  }


  @override
  bool shouldRepaint(PizzaCounterShape oldDelegate) {
    return 
        oldDelegate.count != count
        || oldDelegate.maxCount != maxCount
        || oldDelegate.gutterWidth != gutterWidth
        || oldDelegate.startAngle != startAngle
        || oldDelegate.foregroundColor != foregroundColor
        || oldDelegate.backgroundColor != backgroundColor;
  }
}

maxCount变量指定组成圆的切片数。

4

0 回答 0