颤振：自定义形状作为文本背景

如何解决颤振：自定义形状作为文本背景

我需要在颤振中实现这一点：

我尝试制作 Row 并为 Text 设置背景以处理 ractangle，然后使用 ClipPath 制作三角形。这样做的问题是边缘不精确（您可以在下图中看到矩形和三角形之间的细线），而且 ClipPath 具有固定大小，因此如果我想更改文本大小在某些时候，我将不得不再次微调三角形。

这是我的代码：

class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineto(0.0,size.height);
    path.lineto(size.width / 3,size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(TriangleClipper oldClipper) => false;
}

Row(
        children: [
          Container(
            color: Colors.orange,child: Padding(
              padding: const EdgeInsets.all(4.0),child: Text(
                "a label",),ClipPath(
            clipper: TriangleClipper(),child: Container(
              color: Colors.orange,height: 23,width: 20,)
        ],)

我虽然在 double.infinity 的孩子中使用 ClipPath 而不是固定大小可以解决它，但这样做会使三角形消失（可能它变得太大以至于我看不到它或落后东西）。

解决这个问题的正确方法是什么？我想我可以使用 ClipPath 绘制梯形，但如何使其宽度适应 Text 的长度？

解决方法

实现这一目标的一种方法是这样。

class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final w = size.width;
    final h = size.height;
    final triangleWidth = 10;

    final path = Path();
    path.lineTo(0,0);
    path.lineTo(0,h);
    path.lineTo(w,h);
    path.lineTo(w - triangleWidth,0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(TriangleClipper oldClipper) => false;
}

并像这样使用它。

ClipPath(
    clipper: TriangleClipper(),child: Container(
      padding: EdgeInsets.fromLTRB(4,4,14,4),// 4 + triangleWidth for right padding
      color: Colors.orange,child: Text('A label'),),

,

您可以尝试以下代码：

import 'dart:ui' as ui;

child: CustomPaint(
  size: Size(WIDTH,(WIDTH*0.625).toDouble()),//You can Replace [WIDTH] with your desired width for Custom Paint and height will be calculated automatically
  painter: RPSCustomPainter(),class RPSCustomPainter extends CustomPainter{
  
  @override
  void paint(Canvas canvas,Size size) {
    
    

  Paint paint_0 = new Paint()
      ..color = Color.fromARGB(255,33,150,243)
      ..style = PaintingStyle.fill
      ..strokeWidth = 1;
    paint_0.shader = ui.Gradient.linear(Offset(size.width*0.29,size.height*0.28),Offset(size.width*0.29,[Color(0xff7c1010),Color(0xffffffff)],[0.00,1.00]); 
         
    Path path_0 = Path();
    path_0.moveTo(size.width*0.2937500,size.height*0.2780000);

    canvas.drawPath(path_0,paint_0);
  

  Paint paint_1 = new Paint()
      ..color = Color.fromARGB(255,243)
      ..style = PaintingStyle.fill
      ..strokeWidth = 1;
     
         
    Path path_1 = Path();
    path_1.moveTo(size.width*0.3750000,size.height*0.4000000);
    path_1.lineTo(size.width*0.5000000,size.height*0.4000000);
    path_1.lineTo(size.width*0.5375000,size.height*0.5000000);
    path_1.lineTo(size.width*0.3750000,size.height*0.4000000);
    path_1.close();

    canvas.drawPath(path_1,paint_1);
  
    
  }

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

您可以自己尝试：https://shapemaker.web.app/#/