Flutter - 使用 customPainter 在右下角绘制一个三角形

Question

我正在尝试在页面的右下角绘制一个三角形。
我已经成功地在左上角创建了一个这样的：

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

但是我找不到对右下角执行相同操作的方法。我读过这显然canvas是0,0默认设置，但我似乎无法将它实例化两次，否则我会使用canvas.translate.
我知道左下角的坐标是0,size.height和右上角的，size.width,0但我无法得到右下角的坐标。
结果应该是这样

在这里我做了什么

Answer 1

首先，你必须做一些数学运算：

在你知道你需要你的点在哪里之后，你可以画你的线。

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);

现在重复这些步骤并添加一个：moveTo。默认情况下，您的路径将从左上角的原点 (0, 0) 开始。但是，您希望它从一个新位置开始。

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);