Question

我有一个用例，其中我必须使用4个坐标绘制一个矩形。我不想使用drawLine（），因为稍后需要在矩形上使用GestureDetector。如何使用drawRect（）进行绘制？

canvas.drawLine(
  new Offset(rectLeft, rectBottom - lineWidth / 2),
  new Offset(rectRight, rectBottom - lineWidth / 2),
  rectPaint
); // bottom

canvas.drawLine(
  new Offset(rectLeft, rectTop + lineWidth / 2),
  new Offset(rectRight, rectTop + lineWidth / 2), 
  rectPaint
); // top

canvas.drawLine(
  new Offset(rectLeft + lineWidth / 2, rectBottom),
  new Offset(rectLeft + lineWidth / 2, rectTop), 
  rectPaint
);  //left

canvas.drawLine(
  new Offset(rectRight - lineWidth / 2, rectBottom),
  new Offset(rectRight - lineWidth / 2, rectTop), 
  rectPaint
);  //right

Answer 1

对于此用例， Dart 提供了Rect class：

canvas.drawRect(Rect.fromLTRB(left, top, right, bottom), paint);

在这种情况下，left，top，right和bottom是距原点as described here的距离。

或者，您可以指定两个Offset的{{3}}：

canvas.drawRect(Rect.fromPoints(a, b), paint);

或者，您也可以Rect中的as described here：

canvas.drawRect(Rect.fromLTWH(left, top, width, height), paint);

还有use the width and height，但是，这实际上不适用于您的用例。

Answer 2

您需要创建一个CustomPainter

return table(thead(tr(each(columnHeaders, header -> 
th(String.valueOf(header))))),
tbody(each(myList, dataset ->
trOf(dataSet,0,10)

    ))
)

然后像这样使用它：

class YourRect extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(
      new Rect.fromLTRB(0.0, 0.0, 50.0, 50.0),
      new Paint()..color = new Color(0xFF0099FF),
    );
  }

  @override
  bool shouldRepaint(YourRect oldDelegate) {
    return false;
  }
}

Answer 3

您只需使用创建多边形并使用drawPath()的{{1}}函数

canvas

如何使用4个坐标绘制矩形？

3 个答案: