无法在Flutter中使用自定义绘画制作自定义平行四边形

问题描述

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,9,50,)),// );
    //  p
    // paint.color = Colors.pink;
    canvas.drawPath(path,paint);
  }

谢谢您的时间。

解决方法

尝试一下

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

  Paint paint_0 = new Paint()
      ..color = Color.fromARGB(255,0)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 0.5;
     
    Path path_0 = Path();
    path_0.moveTo(0,0);
    path_0.lineTo(size.width,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)
      ..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;
  }
}