Flutter使用CustomPainter绘制倾斜的椭圆形

Question

我正在尝试在Custom Painter中绘制此椭圆形。

我似乎无法全神贯注。我尝试在drawOval()上使用Canvas函数：

    @override
  void paint(Canvas canvas, Size size) {
    final startAngle = -math.pi / 2;
    final sweepAngle = math.pi;
    Offset center = Offset(size.width * 0.5, size.height * 0.5);
    int lineAmount = 10;
    Color paintColor = Color.fromRGBO(250, 154, 210, 1);
    Paint circlePaint = Paint()
      ..color = paintColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = 5;

    // HIGHLIGHT
    canvas.drawOval(Rect.fromLTRB(50, 100, 250, 200), circlePaint);
    
  }

...并使用drawArc()函数：

canvas.drawArc(Rect.fromLTRB(50, 100, 250, 200), startAngle, sweepAngle,
        false, circlePaint);
canvas.drawArc(Rect.fromLTRB(50, 100, 250, 200), -startAngle, -sweepAngle,
        false, circlePaint);

这是我不断得到的结果：

如何正确绘制圆弧？

Answer 1

您可以选择使用画布转换-平移和旋转
像这样：

  @override
  void paint(Canvas canvas, Size size) {
    final angle = -math.pi / 4;
    Color paintColor = Color.fromRGBO(250, 154, 210, 1);
    Paint circlePaint = Paint()
      ..color = paintColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = 5;

    canvas.save();
    canvas.translate(size.width * 0.5, size.height * 0.5);
    canvas.rotate(angle);
    canvas.drawOval(Rect.fromCenter(center: Offset.zero, width: 50, height: 100), circlePaint);
    canvas.restore();
  }