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