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

Question

I have a use case in which I've to draw a rectangle using the 4 coordinates. I don't want to use drawLine() as later I need a GestureDetector on the rectangle. How can I draw using 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

For this use case, Dart provides the Rect class :

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

In this case left , top , right , and bottom are the distances from origin as described here .

Alternatively, you can specify two Offset 's as described here :

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

Or, you can also use the width and height of your Rect :

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

There is also Rect.fromCircle , however, this does not really apply to your use case.

Answer 2

You need to create a CustomPainter

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

then use it like this:

new GestureDetector(
  onTap: () {
    debugPrint("hello");
  },
  child: Container(
    width: 50,
    height: 50,
    child: CustomPaint(
      painter: (YourdrawRect()),
    ),
  ),
),

Answer 3

You can simply use create a polygon and use drawPath() function of the canvas

canvas.drawPath(
    Path()..addPolygon([
      Offset(0, 0),
      Offset(10, 0),
      Offset(10, 10),
      Offset(0, 10),
    ], true),
    paint);