无法使用 Flutter 中的自定义绘制制作自定义平行四边形答案

【问题标题】：Unable to make a custom parallelogram using Custom paint in Flutter无法使用 Flutter 中的自定义绘制制作自定义平行四边形
【发布时间】：2020-12-27 16:30:00
【问题描述】：

This Is the Shape I want to make This the Screen Shot from my phone

我正在尝试在容器中制作平行四边形，因为它是 UI 的需求。我管理的是这段代码，使其类似于静态设计。即使在这种情况下，我也无法移动形状的原点或起点。正如您在屏幕截图中看到的，绿色部分是形状，粉红色部分是容器，所有信息都将显示在形状中。另外，如果有人可以建议在形状中添加样式的方法。我已经粘贴了下面的代码，并且沿着这段代码我已经评论了我所有我认为可以工作但没有工作的工作。

class MyParallelogram extends CustomPainter {


@override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
    Paint paint = Paint();
    paint.style = PaintingStyle.fill;
    paint.color = Colors.green;
    //Path path = Path();

    // path.addPolygon(List Offset(points), bool close){

    // };
    // path.addRect(
    //   //   Rect.fromLTWH(
    //   //     20,
    //   //     3,
    //   //     50,
    //   //     30,
    //   //   ),
    //   Rect.fromPoints(
    //     Offset.zero,
    //     Offset(50, 30),
    //   ),
    // );

    final path = Path()
      ..lineTo(0.0, size.height / 2)
      ..lineTo(60, 90)
      ..lineTo(250, 60)
      ..lineTo(170, 20)
      ..lineTo(0.0, size.height / 2)
      // ..lineTo(size.width / 2, 0.0)
      // ..lineTo(0.0, size.height / 2)
      ..close();
    // parapath.moveTo(30.0, 38.0);

    // parapath.quadraticBezierTo(80, 5000, 80, 80);
//    parapath.

    // parapath.addRect(
    //   Rect.fromLTRB(70.0, 80.0, 20.0, 10),
    // );
    // parapath.addRRect(
    //   RRect.fromRectXY(Rect.fromLTRB(5, 80, 9, 50,)),
    // );
    //  p
    // paint.color = Colors.pink;
    canvas.drawPath(path, paint);
  }

感谢您的宝贵时间。

【问题讨论】：

标签： android flutter dart material-design mobile-application

【解决方案1】：

试试这个

class MyParallelogram extends CustomPainter{
  @override
  void paint(Canvas canvas, Size size) {

  Paint paint_0 = new Paint()
      ..color = Color.fromARGB(255, 0, 0, 0)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 0.5;
     
    Path path_0 = Path();
    path_0.moveTo(0,0);
    path_0.lineTo(size.width,0);
    path_0.lineTo(size.width,size.height);
    path_0.lineTo(0,size.height);
    path_0.lineTo(0,0);
    path_0.close();

    canvas.drawPath(path_0, paint_0);

  Paint paint_1 = new Paint()
      ..color = Color.fromARGB(255, 0, 0, 0)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 0.5;
 
    Path path_1 = Path();
    path_1.moveTo(size.width*0.05,size.height*0.13);
    path_1.lineTo(size.width*0.80,size.height*0.13);
    path_1.lineTo(size.width*0.95,size.height*0.87);
    path_1.lineTo(size.width*0.20,size.height*0.87);
    path_1.lineTo(size.width*0.05,size.height*0.13);
    path_1.close();

    canvas.drawPath(path_1, paint_1);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

【讨论】：