如何从自定义绘画小部件更改为剪辑路径小部件?

Question

class CoverPainter extends CustomPainter {
final Size sSize;
const CoverPainter({this.sSize});
@override
void paint(Canvas canvas, Size size) {
final paint = Paint();
final double r = (sSize.width).toDouble()/6.8;
paint.color = Color(0xffE6E6E5);
canvas.drawPath(
Path.combine(
PathOperation.difference,
Path()..addRect(Rect.fromLTRB(sSize.width/2-r, 0.6*sSize.height-90-r, sSize.width/2+r, 0.6*sSize.height-90+r)),
Path()
..addOval(Rect.fromCircle(
center: Offset(sSize.width / 2, 1.2/2*sSize.height-90 ),
radius: sSize.width/6.8))
..close(),
),
paint,
);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}

这是我的原始代码，由于某些原因，我需要将其更改为clip path widget。作为初学者，这真的很难……(顺便说一句，sSize是screenSize，而不是画布大小)

class CoverClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
//final path = Path();
final double r = (size.width).toDouble()/6.8;
Path.combine(
PathOperation.difference,
Path()..addRect(Rect.fromLTRB(size.width/2-r, 0.6*size.height-90-r, size.width/2+r, 0.6*size.height-90+r)),
Path()
..addOval(Rect.fromCircle(
center: Offset(size.width / 2, 1.2/2*size.height-90 ),
radius: size.width/6.8))
..close()
);
return Path();
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}

我试过了，但是什么也没发生。没有错误，但是没有显示。

class _Layer2State extends State<Layer2> {
@override
Widget build(BuildContext context) {
final Size size = widget.size;
// return CustomPaint(painter: CoverPainter(sSize: size));
return ClipPath(
clipper: CoverClipper(),
child: Container(
color: Colors.white,
height: size.height,
width: size.width,
),
);
}
}

实际上，我对clippath一无所知。我需要帮助......

Answer 1

您需要返回您想要修改的实际路径，它将工作。当前返回的路径为空路径:

class CoverClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final double r = (size.width).toDouble()/6.8;
return Path.combine(
PathOperation.difference,
Path()..addRect(Rect.fromLTRB(size.width/2-r, 0.6*size.height-90-r, size.width/2+r, 0.6*size.height-90+r)),
Path()
..addOval(Rect.fromCircle(
center: Offset(size.width / 2, 1.2/2*size.height-90 ),
radius: size.width/6.8))
..close()
);
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return true; // you can also change this to true to repaint.
}
}