如何绘制圆弧

Question

使用最新的颤动我想使用Canvas.drawArc方法从0到10绘制一个拱形。这是我的代码的样子：

@override
void paint(Canvas canvas, Size size) {
    final double radius = 1000.0;
    final Paint paint = new Paint()
      ..isAntiAlias = true
      ..strokeWidth = 1.0
      ..color = Colors.blue[500]
      ..style = PaintingStyle.stroke;
    canvas.drawArc(new Rect.fromLTWH(0.0, 0.0, size.width/2, size.height/2),
    10.0, 20.0, false, paint);
}

它是在CustomPainter中绘制的，并在布局中调用，如下所示：

children: <Widget>[
        new CustomPaint(
          painter: new CircleGraphWidget(),
          child: new Center(
            child: new Text(
              'Here\'s text',
              style: const TextStyle(
                fontSize: 40.0,
                fontWeight: FontWeight.w900,
                color: const Color(0xFFFFFFFFF),
              ),
            ),
          ),
        )
      ],

我希望drawArc调用在圆圈内的矩形中从10到20绘制一个弧，但这是我得到的：

我想知道如何画出一小部分椭圆而不是整个东西。例如，如果我只想要绘制圆圈的1/4，我该怎么做呢？

Answer 1

https://docs.flutter.io/flutter/dart-ui/Canvas/drawArc.html

它从椭圆周围的startAngle弧度开始到椭圆周围的startAngle + sweepAngle弧度，零弧度

它期望Radians而不是Degrees：

canvas.drawArc(new Rect.fromLTWH(0.0, 0.0, size.width/2, size.height/2),
0.175, 0.349, false, paint);

Answer 2

如何绘制圆弧

要在Flutter中绘画，请使用CustomPaint小部件。 CustomPaint小部件将CustomPainter对象作为参数。在该类中，您必须重写paint方法，该方法为您提供了可以在其上绘画的画布。这是在上图中绘制圆弧的代码。

// Don't forget: import 'dart:math' as math;

@override
void paint(Canvas canvas, Size size) {
  final rect = Rect.fromLTRB(50, 100, 250, 200);
  final startAngle = -math.pi / 2;
  final sweepAngle = math.pi;
  final useCenter = false;
  final paint = Paint()
    ..color = Colors.black
    ..style = PaintingStyle.stroke
    ..strokeWidth = 4;
  canvas.drawArc(rect, startAngle, sweepAngle, useCenter, paint);
}

注意：

rect是要在其中刻出完整椭圆形的地方。
startAngle是直线开始绘制在椭圆上的位置。右侧的角度为0。角度以弧度而不是度为单位。顶部为3π/ 2（或-π/ 2），左侧为π，底部为π/ 2。
sweepAngle是弧中包含多少椭圆。同样，角度以弧度为单位。值为2π将会绘制整个椭圆形。
如果将useCenter设置为true，则从弧的两侧到中心将有一条直线。

上下文

这是 main.dart 代码，以便您可以在上下文中看到它。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: HomeWidget(),
      ),
    );
  }
}

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint( //                       <-- CustomPaint widget
        size: Size(300, 300),
        painter: MyPainter(),
      ),
    );
  }
}

class MyPainter extends CustomPainter { //         <-- CustomPainter class
  @override
  void paint(Canvas canvas, Size size) {
    //                                             <-- Insert your painting code here.
  }

  @override
  bool shouldRepaint(CustomPainter old) {
    return false;
  }
}

另请参见

请参阅this article，以获得更完整的答案。

Flutter drawArc（）方法绘制整圆而不仅仅是弧

2 个答案:

如何绘制圆弧

上下文

另请参见