Flutter - Draw a triangle in bottom right corner using customPainter

user_11964501 0
Viewed 1684

I'm trying to draw a triangle in the bottom right of the page.
I've successfully created one in the top left doing like this:

    void paint(Canvas canvas, Size size) {

    // top left
    final pathOrange = Path();
    pathOrange.lineTo(0, size.height/3);
    pathOrange.lineTo(size.width/1.5, 0);
    pathOrange.close();
    canvas.drawPath(pathOrange, _paintOrange);
  }

But I can't find a way to do the same for the bottom right. I've read that apparently canvas is set to 0,0by default, but I don't seem to be able to instantiate it twice, otherwise I would change the initial start using canvas.translate.
I know that bottom-left coordinates are 0,size.height and top-right size.width,0but I just can't get the bottom right one.
That's what the result should be
end result
And here what I've done
what I've done

dart flutter canvas
3 Answers

First, you have to do a little math:

enter image description here

After you know where you need your points to be, you can draw your lines.

final pathOrange = Path();

// Create your line from the top left down to the bottom of the orange
pathOrange.lineTo(0, size.height * .3387);

// Create your line to the bottom right of orange
pathOrange.lineTo(size.width, size.height * .162);

// Create your line to the top right corner
pathOrange.lineTo(size.width, 0); // 0 on the Y axis (top)

// Close your line to where you started (0,0)
pathOrange.close();

// Draw your path
canvas.drawPath(pathOrange, _paintOrange);

Now repeat those steps with one addition: moveTo. By default your path will start at the origin (0, 0) top-left. However, you want it to start at a new location.

final pathGreen = Path();

// Create your line from the top left down to the bottom of the orange
pathGreen.moveTo(0, size.height * .978); // (100 - 2.8) / 100

// Create your line to the bottom left
pathGreen.lineTo(0, size.height);

// Create your line to the bottom right
pathGreen.lineTo(size.width, size.height); 

// Create your line to top right of green
pathGreen.lineTo(size.width, size.height * .6538); // (100 - 34.62) / 100

// Close your line to where you started
pathGreen.close();

// Draw your path
canvas.drawPath(pathGreen, _paintGreen);
user_79265650

Maybe you can try something like this?

final pathBlue = Path();
pathBlue.moveTo(size.width, size.height);
pathBlue.lineTo(size.width, (size.height/3)*2);
pathBlue.lineTo(0, size.height);
pathBlue.close();
canvas.drawPath(pathBlue, _paintBlue);
user_86839850

You can easily add another path object and draw it again with canvas.

@override
  void paint(Canvas canvas, Size size) {
    final paintOrange = Paint()..color = Colors.orange;
    final paintGreen = Paint()..color = Colors.green;

    final pathOrange = Path();
    pathOrange.lineTo(0, size.height / 3);
    pathOrange.lineTo(size.width, 0);
    pathOrange.close();

    final pathGreen = Path();
    pathGreen.moveTo(size.width, size.height);
    pathGreen.lineTo(0, size.height);
    pathGreen.lineTo(size.width, size.height / 1.5);
    pathGreen.close();

    canvas.drawPath(pathOrange, paintOrange);
    canvas.drawPath(pathGreen, paintGreen);
  }
user_131566100
Related