CODEWITHSUNDEEP
flutterdart
Wilson Wilson
Wilson Wilson

Reputation: 3757

Flutter Drawing a Skewed Oval Using CustomPainter

I'm trying to draw this oval in Custom Painter.

Oval

I can't seem to wrap my head around it. I've tried using the drawOval() function on the 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);
    
  }

... and using the drawArc() function:

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

This is the result I keep on getting:

result

How can I properly draw the arc?

Upvotes: 1

Views: 3027

Answers (1)

user10539074
user10539074

Reputation:

as an option you can use canvas transformations - translate and rotate
like this:

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

enter image description here

Upvotes: 4

Related Questions