[英](Flutter) Curved edge to a CustomPaint Widget
This is what I want to build:这就是我想要构建的:
(Just see the shape of the appBar
and not the contents) (
appBar
的形状而不是内容)
This is what I have:这就是我所拥有的:
I want the edge to be curved, and not so sharp.我希望边缘是弯曲的,而不是那么锋利。
Here is my code for the CustomPaint
:这是我的
CustomPaint
代码:
class LogoPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
paint.color = Colors.blue;
var path = Path();
path.lineTo(0, size.height - size.height / 5);
path.lineTo(size.width / 1.2, size.height);
path.lineTo(size.width, size.height - size.height / 5);
path.lineTo(size.width, 0);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
How do I achieve this curved edge?我如何实现这种弯曲的边缘?
I have tried point.arcToPoint()
and point.quadraticBezierTo()
, but no success.我尝试过
point.arcToPoint()
和point.quadraticBezierTo()
,但没有成功。
This isn't perfect, but you can fiddle with the numbers a bit more:这并不完美,但您可以稍微调整一下数字:
class LogoPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
paint.color = Colors.blue;
var path = Path();
path.lineTo(0, size.height - size.height / 5);
path.lineTo(size.width / 1.2, size.height);
//Added this line
path.relativeQuadraticBezierTo(15, 3, 30, -5);
path.lineTo(size.width, size.height - size.height / 5);
path.lineTo(size.width, 0);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
You can do it this way你可以这样做
class LogoPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
paint.color = Colors.blue;
Path path = new Path();
path.lineTo(0, size.height - size.height / 5);
//Use the method conicTo
path.conicTo(size.width / 1.2, size.height, size.width,
size.height - size.height / 5, 15);
path.lineTo(size.width, 0);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.