canvas - 颤振drawArc没有中心点

Question

在颤振文档中它的状态，

如果 useCenter 为真，则圆弧向中心闭合，形成一个圆形扇区。否则，圆弧不闭合，形成一个圆段。

我不想使用其中任何一个，我只想绘制曲线的外周长（路径）。为了更好地解释它，我想要实现的是如右图所示。

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

标签： canvasdartflutter

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(),
    ),
  );
}