Блог

Главная - Вопросы по программированию - Как нарисовать прямоугольник, используя 4 координаты?

Как нарисовать прямоугольник, используя 4 координаты?

#flutter

#flutter

Вопрос:

У меня есть вариант использования, в котором я должен нарисовать прямоугольник, используя 4 координаты. Я не хочу использовать DrawLine (), так как позже мне понадобится детектор жестов на прямоугольнике. Как я могу рисовать с помощью 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

Комментарии:

1. Добро пожаловать в Stack Overflow! Пожалуйста, взгляните на официальную документацию. Прямоугольник можно нарисовать несколькими способами. docs.flutter.io/flutter/dart-ui/Rect-class.html Если вы уже изучали это и вам чего-то не хватает или вам нужно что-то другое, пожалуйста, укажите это в вопросе.

Ответ №1:

Вам нужно создать пользовательскую схему

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

затем используйте это следующим образом:

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

Ответ №2:

Вы можете просто использовать create a polygon и использовать drawPath() функцию canvas 

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