canvas - 没有中心点的 Flutter drawArc

Question

在 flutter 文档中它的状态，

If useCenter is true, the arc is closed back to the center, forming a circle sector. Otherwise, the arc is not closed, forming a circle segment.

我不想使用其中任何一个，我只想绘制曲线(路径)的外周。为了更好地解释它，我想要实现的是按照右边的图像。

我知道我可以做一个填充，但我想要一个透明的中心。我可以使用另一种技术吗？

Answer 1

使用 Path.arcTo，或者更简单地说，使用 Canvas.arcTo 和 stroke 样式 Paint

import 'dart:math';

import 'package:flutter/material.dart';

class _ArcPainter extends CustomPainter {
  _ArcPainter();

  @override
  bool shouldRepaint(_ArcPainter oldDelegate) {
    return true;
  }

  @override
  void paint(Canvas canvas, Size size) {
    Rect rect = Rect.fromLTWH(0.0, 0.0, size.width, size.height);

    Path path = Path()..arcTo(rect, 0.0, -pi / 2, true);
    canvas.drawPath(
        path,
        Paint()
          ..color = Colors.orange
          ..strokeWidth = 3.0
          ..style = PaintingStyle.stroke);

    canvas.drawArc(
        rect,
        0.0,
        pi / 2,
        false,
        Paint()
          ..color = Colors.teal
          ..strokeWidth = 3.0
          ..style = PaintingStyle.stroke);
  }
}

class ArcWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new SizedBox(
      width: 250.0,
      height: 250.0,
      child: new CustomPaint(
        painter: new _ArcPainter(),
      ),
    );
  }
}

class SegmentDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: const Text('Arcs etc')),
      body: ArcWidget(),
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      home: SegmentDemo(),
    ),
  );
}