[英]Is there an alternative for an elevation property for CustomPaint widget in flutter?
[英](Flutter) Curved edge to a CustomPaint Widget
这就是我想要构建的:
( appBar
的形状而不是内容)
这就是我所拥有的:
我希望边缘是弯曲的,而不是那么锋利。
这是我的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;
}
}
我如何实现这种弯曲的边缘?
我尝试过point.arcToPoint()
和point.quadraticBezierTo()
,但没有成功。
这并不完美,但您可以稍微调整一下数字:
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;
}
}
你可以这样做
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.